Skip to content

Instantly share code, notes, and snippets.

@stffndtz

stffndtz/images.php

Forked from azharc/images.php
Created August 28, 2017 23:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save stffndtz/d535cea39ee21fc556f170e97cca2a28 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save stffndtz/d535cea39ee21fc556f170e97cca2a28 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @azharc azharc created this gist Nov 23, 2016.
    93 changes: 93 additions & 0 deletions images.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,93 @@
    <?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);
    }
    ?>