...
Anchor ID
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.
Here's the code snippets for how it was done.
First, after columns variables are set, also define variables that store image widths as a percentage of the screen width (vw) by dividing 100 by the # of columns. (Note: these calculated percentages are often overestimates, but that's okay! It's better to overestimate than underestimate, as long as it's still pretty close)
| Code Block | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
//columns
$columns_xs = get_field('columns_xs');
$columns_sm = get_field('columns_sm');
$columns_md = get_field('columns_md');
$columns_lg = get_field('columns_lg');
$columns_xl = get_field('columns_xl');
//Calculates approx. image widths in vw (viewport width) based on column sizes
//these are calculated for the purpose of defining the sizes="" attribute for the img html
//so that the browser picks the correct size image to load from the srcset
//the calculated sizes aren't precise, and are often overestimates, but it's close enough!
//it also sets all the values for the $columns_[size] variables, in case they were defaulted at 0, for the swiper code.
$min_cols = 1; //sets min number of columns.
if($columns_xs) : $min_cols = $columns_xs; else: $columns_xs = $min_cols; endif;//sets min columns to # xs columns if defined. if not, $columns_xs will be set to min columns.
$xs_image_width = ceil(100 / $columns_xs); //xs screens, 0-575px
if($columns_sm) : $min_cols = $columns_sm; else: $columns_sm = $min_cols; endif; //sets min columns to # small columns if defined. if not, $columns_sm will be set to min columns.
$sm_image_width = ceil(100 / $columns_sm); //sm screens, 576-767px
if($columns_md) : $min_cols = $columns_md; else: $columns_md = $min_cols; endif; //sets min columns to # med columns if defined. if not, $columns_nd will be set to min columns.
$md_image_width = ceil(100 / $columns_md); //md screens, 768-991px
if($columns_lg) : $min_cols = $columns_lg; else: $columns_lg = $min_cols; endif; //sets min columns to # large columns if defined. if not, $columns_lg will be set to min columns.
$lg_image_width = ceil(100 / $columns_lg); //lg screens, 992-1200px
if($columns_xl) : $min_cols = $columns_xl; else: $columns_xl = $min_cols; endif; //sets min columns to # xl columns if defined. if not, $columns_xl will be set to min columns.
$xl_image_width = ceil(100 / $columns_xl); //xl screens, 1200px or more
|
Then, in the section of your code that creates each image, add a sizes attribute that tells the browser the width of each image.
| 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.
| Code Block | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
(function($) {
$(document).ready(function() {
var swiperInstances = swiperInstances || {};
swiperInstances['<?php echo $block['id']; ?>'] = new Swiper('#<?php echo $id ?> .swiper-container', {
//XS screen size set as default
slidesPerView: <?php echo $columns_xs ?>,
slidesPerGroup: <?php echo $columns_xs ?>,
loop: true,
centeredSlides: false,
lazy: { //adds lazy loading for hidden slides.
loadPrevNext: true, // Preload previous/next slides
},
breakpoints: {
//set breakpoints the same as flex columns
//setting slides Per Group means each click of the swiper moves the whole row, instead of one image at a time.
576: {
slidesPerView: <?php echo $columns_sm ?>,
slidesPerGroup: <?php echo $columns_sm ?>,
spaceBetween: 0
},
768: {
slidesPerView: <?php echo $columns_md ?>,
slidesPerGroup: <?php echo $columns_md ?>,
spaceBetween: 0
},
992: {
slidesPerView: <?php echo $columns_lg ?>,
slidesPerGroup: <?php echo $columns_lg ?>,
spaceBetween: 0
},
1200: {
slidesPerView: <?php echo $columns_xl ?>,
slidesPerGroup: <?php echo $columns_xl ?>,
spaceBetween: 0
}
},
pagination: {
el: '#<?php echo $id ?> .swiper-pagination',
type: 'custom',
renderCustom: function (swiper, current, total) {
return current + '/' + (total);
}
},
navigation: {
nextEl: '#<?php echo $id ?> .swiper-button-next',
prevEl: '#<?php echo $id ?> .swiper-button-prev',
},
});
});
})(jQuery);
|