jrangel/local-content-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes to LCP Gallery Meta

Browse Source
This commit is contained in:
Jeremy Rangel
2025-01-09 17:50:32 -08:00
parent ceb37fc5af
commit ae31fec647
14 changed files with 651 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
includes/blocks/lcp-dynamic-container/build/index.asset.php
View File

@ -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');

2
includes/blocks/lcp-dynamic-container/build/index.js
View File

File diff suppressed because one or more lines are too long

2
includes/blocks/lcp-dynamic-container/build/style-index-rtl.css
View File

@ -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%}

2
includes/blocks/lcp-dynamic-container/build/style-index.css
View File

@ -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%}

36
includes/blocks/lcp-dynamic-container/lcp-dynamic-container.php
View File

@ -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
);
}

16
includes/blocks/lcp-dynamic-container/src/save.js
View File

@ -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
}

17
includes/blocks/lcp-dynamic-container/src/style.scss
View File

@ -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 */
}