...
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_ variables, in case they were defaulted at 0, for the swiper code.
$min_cols = 1; //sets min number of columns.
if($columns_sm) : $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 = 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 = 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 = 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 = 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 = ceil(100 / $columns_xl); //xl screens, 1200px or more
|
...