Changes to LCP Gallery Meta

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

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