...
Sets id of the block.
Additional Notes
Image Optimization
This block is the first time a component included code that used the Column Structure fields to calculate the approximate image widths for optimization purposes.
...
| Code Block | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<img
class="image " style="max-height: <?php echo $max_height ?>px"
src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"
srcset="<?php echo wp_get_attachment_image_srcset($image['id']); ?>"
sizes="(max-width: 575.98px) <?php echo $xs_image_width; ?>vw, (max-width: 767.98px) <?php echo $sm_image_width; ?>vw, (max-width: 991.98px) <?php echo $md_image_width; ?>vw, (max-width: 1199.98px) <?php echo $lg_image_width; ?>vw, <?php echo $xl_image_width; ?>vw"
> |
Columns in Swipers
This block is also the first time we used Column Structure in combination with the Swiper. The if statements in the first code snippet above, combined with the code in the breakpoints parameter of Swiper JS below, is how this was accomplished.
...