-
-
Save stffndtz/d535cea39ee21fc556f170e97cca2a28 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| // create srcset images for kirby | |
| function img($image, $options = array()) { | |
| // defaults | |
| $defaults = array( | |
| "alt" => $image->title()->or(''), | |
| "widths" => [100, 100, 100], | |
| "class" => "", | |
| "lazy" => false, | |
| ); | |
| // merge | |
| $settings = array_merge($defaults, $options); | |
| // set local variables | |
| $alt = $settings['alt']; | |
| $widths = $settings['widths']; | |
| $class = $settings['class']; | |
| $lazy = $settings['lazy']; | |
| // configure sizes | |
| $breakpoints = array(640, 1280, 1920); | |
| // get image width | |
| $width = $image->width(); | |
| // create an image for each breakpoint | |
| $thumbs = array(); | |
| foreach ($breakpoints as $point) { | |
| // don't upsize images | |
| if ($width >= $point) { | |
| array_push($thumbs, thumb($image, array('width' => $point), false) . " {$point}w"); | |
| } else { | |
| array_push($thumbs, $image->url() . " {$width}w"); | |
| } | |
| } | |
| // string it together | |
| $srcset = ""; | |
| $count = 1; | |
| foreach ($thumbs as $thumb) { | |
| $srcset .= $thumb; | |
| if ($count < count($thumbs)) { | |
| $srcset .= ", "; | |
| } | |
| $count++; | |
| } | |
| // default source for image | |
| $src = thumb($image, array('width' => 1000), false); | |
| // convert sizes into proper formatting | |
| $sizes = ""; | |
| $count = 1; | |
| foreach ($widths as $width) { | |
| switch ($count) { | |
| // small | |
| case 1: | |
| $sizes .= "(max-width: 768px) {$width}vw, "; | |
| break; | |
| // medium | |
| case 2: | |
| $sizes .= "(min-width: 768px) {$width}vw, "; | |
| break; | |
| // large | |
| case 3: | |
| $sizes .= "(min-width: 1024px) {$width}vw"; | |
| break; | |
| default: | |
| # code... | |
| break; | |
| } | |
| $count++; | |
| } | |
| // alignment | |
| $vertical = $image->vertical()->or('center'); | |
| $horizontal = $image->horizontal()->or('center'); | |
| $align = "object-position: $vertical $horizontal"; | |
| // build attributes | |
| $attr = array( | |
| 'alt' => $alt, | |
| $lazy ? 'data-src' : 'src' => $src, | |
| $lazy ? 'data-srcset' : 'srcset' => $srcset, | |
| 'sizes' => $sizes, | |
| 'class' => $lazy ? "lazy" : $class, | |
| 'style' => $align | |
| ); | |
| return html::tag('img', null, $attr); | |
| } | |
| ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment