Changes to LCP Gallery Meta
This commit is contained in:
Jeremy Rangel
@ -1 +1 @@
|
||||
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '40a5279a7e8774abfe4c');
|
||||
<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '04e9c02e00cfeee61658');
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
.wp-block-create-block-lcp-viewport{background-color:#21759b;color:#fff;padding:2px}
|
||||
.wp-block-create-block-lcp-viewport{background-color:#21759b;color:#fff;padding:2px}.lcp-dynamic-container.lcp-has-background-image{position:relative;width:100%}.lcp-dynamic-container.lcp-has-background-image>.lcp-background-image{height:100%;right:0;-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;position:absolute;top:0;width:100%}
|
||||
|
||||
@ -1 +1 @@
|
||||
.wp-block-create-block-lcp-viewport{background-color:#21759b;color:#fff;padding:2px}
|
||||
.wp-block-create-block-lcp-viewport{background-color:#21759b;color:#fff;padding:2px}.lcp-dynamic-container.lcp-has-background-image{position:relative;width:100%}.lcp-dynamic-container.lcp-has-background-image>.lcp-background-image{height:100%;left:0;-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;position:absolute;top:0;width:100%}
|
||||
|
||||
@ -65,10 +65,10 @@ if (!function_exists('lcp_random_string')) {
|
||||
}
|
||||
|
||||
|
||||
function render_lcp_container( $attributes, $content ) {
|
||||
function render_lcp_dynamic_container( $attributes, $content ) {
|
||||
// Debugging: Check the passed attributes
|
||||
//var_dump($attributes);
|
||||
|
||||
|
||||
// Generate a random class name (optional, could be customized)
|
||||
$random_class = lcp_random_string(12,true);
|
||||
|
||||
@ -159,13 +159,39 @@ if (!function_exists('lcp_random_string')) {
|
||||
if ( ! empty( $style ) ) {
|
||||
$style_tag = sprintf( '<style>.%s { %s }</style>', esc_attr( $random_class ), $style );
|
||||
}
|
||||
// Set the post thumbnail
|
||||
if ( has_post_thumbnail() ) {
|
||||
// Get the post thumbnail URL for different sizes
|
||||
$full_size_url = get_the_post_thumbnail_url( get_the_ID(), 'full' );
|
||||
$medium_size_url = get_the_post_thumbnail_url( get_the_ID(), 'medium' );
|
||||
$large_size_url = get_the_post_thumbnail_url( get_the_ID(), 'large' );
|
||||
|
||||
// Generate the <picture> element with <source> and <img> tags for responsiveness
|
||||
$post_thumb = '<picture class="lcp-background-image">';
|
||||
|
||||
// Add source for large image (for screens >= 1200px)
|
||||
$post_thumb .= '<source media="(min-width: 1200px)" srcset="' . esc_url( $large_size_url ) . '">';
|
||||
|
||||
// Add source for medium image (for screens >= 768px)
|
||||
$post_thumb .= '<source media="(min-width: 768px)" srcset="' . esc_url( $medium_size_url ) . '">';
|
||||
|
||||
// Add fallback image (for smaller screens or if no match for media queries)
|
||||
$post_thumb .= '<img src="' . esc_url( $full_size_url ) . '" alt="Responsive Background Image" class="responsive-background">';
|
||||
|
||||
$post_thumb .= '</picture>';
|
||||
}
|
||||
|
||||
$has_background_image = (2 + 2 == 4) ? 'lcp-has-background-image' : '';
|
||||
|
||||
// Output the content wrapped in the div with the random class and padding styles
|
||||
return $style_tag . sprintf(
|
||||
'<div class="lcp-container %s">%s</div>',
|
||||
esc_attr( $random_class ),
|
||||
$content
|
||||
'<div class="lcp-dynamic-container %s %s">%s%s</div>',
|
||||
esc_attr( $random_class ), // The random class
|
||||
esc_attr( $has_background_image), // Conditionally add 'lcp-has-background-image' class
|
||||
$post_thumb, // Add the $post_thumb (responsive image) here,
|
||||
$content // Keep the original content
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,12 +1,4 @@
|
||||
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
|
||||
|
||||
export default function Save() {
|
||||
// Block props
|
||||
const blockProps = useBlockProps.save();
|
||||
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
import { InnerBlocks } from '@wordpress/block-editor';
|
||||
export default function save() {
|
||||
return (<InnerBlocks.Content/>); // No content is saved in the database for dynamic blocks
|
||||
}
|
||||
@ -10,3 +10,20 @@
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.lcp-dynamic-container.lcp-has-background-image {
|
||||
position:relative;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.lcp-dynamic-container.lcp-has-background-image > .lcp-background-image {
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; /* Cover the container like a background */
|
||||
object-position: center center; /* Center the image */
|
||||
|
||||
}
|
||||
@ -9,9 +9,16 @@
|
||||
"description": "A dynamic or static gallery based on the Lightgallery javascript plugin",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"html": false
|
||||
"html": false,
|
||||
"color": {
|
||||
"background": true,
|
||||
"text": false
|
||||
}
|
||||
},
|
||||
"attributes": {
|
||||
"backgroundColor": {
|
||||
"type": "string"
|
||||
},
|
||||
"parseElementForItems": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
|
||||
@ -125,6 +125,30 @@ function validate_media_ids($input) {
|
||||
|
||||
// Return an array of Media IDs
|
||||
function get_media_ids($attributes) {
|
||||
// If post_gallery meta field
|
||||
if (!$attributes['sources'] == "postGallery") {
|
||||
$post_id = get_the_ID();
|
||||
$lcp_post_gallery = get_post_meta( $post_id, 'lcp_gallery', true );
|
||||
|
||||
// Check if the meta field is not empty and unserialize the value
|
||||
if ( ! empty( $lcp_post_gallery ) ) {
|
||||
// Unserialize the meta field value to convert it into an array
|
||||
$gallery_array = $lcp_post_gallery;
|
||||
|
||||
// Initialize an empty array to hold the media IDs
|
||||
$media_ids = array();
|
||||
|
||||
// Loop through the gallery array and extract the media_id values
|
||||
foreach ( $gallery_array as $item ) {
|
||||
// Check if the 'media_id' key exists
|
||||
if ( isset( $item['media_id'] ) ) {
|
||||
$media_ids[] = $item['media_id']; // Add the media_id to the array
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $media_ids;
|
||||
}
|
||||
// Manual Source
|
||||
if ($attributes['source'] == "manual" && isset($attributes['galleryItems'])) {
|
||||
// Extract 'id' from each item in the 'galleryItems' array
|
||||
|
||||
@ -2,7 +2,10 @@ import { __ } from '@wordpress/i18n';
|
||||
import {
|
||||
InspectorControls,
|
||||
MediaUpload,
|
||||
MediaUploadCheck
|
||||
MediaUploadCheck,
|
||||
useBlockProps,
|
||||
withColors,
|
||||
PanelColorSettings
|
||||
} from '@wordpress/block-editor';
|
||||
import { useState,
|
||||
useEffect,
|
||||
@ -65,9 +68,6 @@ const galleryElements = [
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Aspect ratio options
|
||||
const aspectRatioOptions = [
|
||||
{ value: '1-1', label: __('1:1', metadata.textdomain) },
|
||||
@ -125,8 +125,8 @@ const MultiMediaUpload = ({ onSelect }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default function Edit(props) {
|
||||
const { attributes, setAttributes } = props;
|
||||
function Edit(props) {
|
||||
const { attributes, setAttributes, backgroundColor, setBackgroundColor } = props;
|
||||
const {
|
||||
galleryItems = [],
|
||||
source,
|
||||
@ -314,11 +314,17 @@ const { isTemplate, postType, postId } = useSelect((select) => {
|
||||
togglePlugin('lgZoom', value); // Add/Remove lgZoom plugin based on toggle value
|
||||
};
|
||||
|
||||
const blockProps = useBlockProps({
|
||||
style: {
|
||||
backgroundColor: backgroundColor?.color,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
{/* The Gallery */}
|
||||
<LightGallery {...attributes.lgSettings} />
|
||||
<LcpGallery {...attributes.lgSettings} />
|
||||
|
||||
<InspectorControls>
|
||||
{/* Settings and Style Tabs */}
|
||||
@ -717,6 +723,16 @@ const { isTemplate, postType, postId } = useSelect((select) => {
|
||||
if (name === 'style') {
|
||||
return (
|
||||
<PanelBody title={__('Style Settings')}>
|
||||
<PanelColorSettings
|
||||
title={__('Color settings', 'lcp')}
|
||||
colorSettings={[
|
||||
{
|
||||
value: backgroundColor?.color,
|
||||
onChange: setBackgroundColor,
|
||||
label: __('Background color', 'lcp'),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{initialLayout === 'inline' && (
|
||||
<>
|
||||
<UnitControl
|
||||
@ -857,3 +873,4 @@ const { isTemplate, postType, postId } = useSelect((select) => {
|
||||
);
|
||||
}
|
||||
|
||||
export default withColors('backgroundColor')(Edit);
|
||||
|
||||
Reference in New Issue
Block a user