Craft 3 - Imager

{# @var craft \craft\web\twig\variables\CraftVariable #}
{# @var entry \craft\elements\Entry #}

{% set image = opt.data %}
{% set options = opt.imager %}

{% set defaults = {
    sizes: [
        { width: 1440 },
        { width: 900 },
        { width: 600 }
    ],
    allowUpscale: false,
    alt: image.title ?? null,
    blurUp: false,
    class: false,
    dataSizes: 'auto',
    dominantColor: false,
    format: 'jpg',
    interlace: true,
    lazy: true,
    mediaBox: false,
    mode: 'crop',
    objectFit: true,
    objectFitValue: 'cover',
    preload: false,
    quality: 80,
    ratio: 'auto',
    watermark: false,
    wrapper: false,
    svg: false,
    noscript: false,
} %}

{# Merge Attr with Defaults #}
{% set options = options ? defaults | merge(options): defaults %}

{% if image and image.extension == 'svg' %}

    {% if options.svg %}
        <div class="{{ options.svg }}">
    {% endif %}

    {{ svg(image) }}

    {% if options.svg %}
        </div>
    {% endif %}

{% elseif image %}

    {# Set Ratio #}
    {% if options.ratio != 'auto' %}
        {% set ratio = options.ratio %}
    {% elseif options.ratio %}
        {% set ratio = image.getWidth() ~ '/' ~ image.getHeight() %}
    {% endif %}

    {# Set Position #}
    {% if image.hasFocalPoint %}
        {% set position = image.getFocalPoint() %}
        {% set position = position|merge({
            x: position.x * 100 ~ '%',
            y: position.y * 100 ~ '%',
        }) %}
        {% set position = position|join(" ") %}
    {% else %}
        {% set position = '50% 50%' %}
    {% endif %}

    {# Define global variables #}
    {% set imageSettings = {
        allowUpscale: options.allowUpscale,
        format: options.format,
        interlace: options.interlace,
        jpegQuality: options.quality,
        mode: options.mode,
        position: position,
        ratio: ratio,
    } %}

    {% set imageSettingsWebp = {
        allowUpscale: options.allowUpscale,
        format: 'webp',
        interlace: options.interlace,
        webpQuality: options.quality,
        mode: options.mode,
        position: position,
        ratio: ratio,
    } %}

    {#Get Dominant Color#}
    {% if options.dominantColor and not craft.app.config.general.devMode %}
        {% set dominantColor = craft.imager.getDominantColor(image) %}
    {% else %}
        {% set dominantColor = '#e0e0e026' %}
    {% endif %}

    {# Setup Image Transforms #}
    {% set images = craft.imager.transformImage(image, options.sizes, imageSettings) %}

    {# If the server has support for WebP, create transforms #}
    {% if craft.imager.serverSupportsWebp() %}
        {% set imagesWebp = craft.imager.transformImage(image, options.sizes, imageSettingsWebp) %}
    {% endif %}

    {% if options.wrapper %}
        <div
        class="{{ options.mediaBox ? 'mediabox aspect-ratio-' ~ options.ratio : '' }} {{ options.wrapper }}"
        style="{{ options.dominantColor ? 'background-color:' ~ dominantColor ~ ';' }}">
    {% endif %}

    <picture>
        {% if craft.imager.serverSupportsWebp() %}
            <source
                {% if options.lazy %}data-{% endif %}sizes="{{ options.dataSizes }}"
                {% if options.lazy %}data-{% endif %}srcset="{{ craft.imager.srcset(imagesWebp) }}"
                {% if options.blurUp %} data-lowsrc="{{ imagesWebp|last.url }}"{% endif %}
                type="image/webp">
        {% endif %}
        <img
            class="{{- options.class -}}
                     {% if options.lazy %} lazyload {% endif %}
                     {% if options.preload %} lazypreload {% endif %}
                     {% if options.mediaBox %} mediabox-img{% endif %}"
            src="{{ craft.imager.placeholder() }}"
            {% if options.lazy %}data-{% endif %}sizes="{{ options.dataSizes }}"
            {% if options.lazy %}data-{% endif %}srcset="{{ craft.imager.srcset(images) }}"
            {% if options.blurUp and options.lazy %}
                data-lowsrc="{{ images|last.url }}"
            {% endif %}
            alt="{{ options.alt }}"
            {% if options.objectFit %}
                style="
                    object-fit:{{ options.objectFitValue }};
                    object-position:{{ position }};
                    font-family:'{{ 'object-fit: ' ~ options.objectFitValue }}, {{ 'object-position: ' ~ position  }}';
                    "/>
            {% endif %}

    </picture>
    {% if options.noscript %}
        <noscript>
            <img src="{{ images|first.url }}"
                 alt="{{ options.alt }}">
        </noscript>
    {% endif %}
    {% if options.wrapper %}
        </div>
    {% endif %}

{% endif %}