wide_image.html

{% comment %}

    The image file is expected in the site.directory.large_images folder.
    Downscaled copies should be put in the subfolders "phone, "tablet" and 
    "desktop" respectively.
    Parameters:
        file_name: The file name including extension.
        alt_text: An alternative text for the image.

    A NOTE ON PIXEL VALUES:
    While CSS is fixed to assuming 96dpi (especially in the context of media
    queries) for rendering measurements, the pixel values here correspond to
    actual physical pixels. As a consequence, phones or tablets may chose a
    much larger image file than it seems at first glance due to retina displays.

{% endcomment %}

{% assign bp_phone      =   600 %}
{% assign bp_tablet     =  1200 %}
{% assign bp_desktop    =  1800 %}
{% assign bp_disp_2k    =  2400 %}

{% assign phone_img_url = site.directory.large_images
    | append: "phone/"
    | append: include.file_name 
    | strip 
    | relative_url %}

{% assign tablet_img_url = site.directory.large_images
    | append: "tablet/"
    | append: include.file_name 
    | strip 
    | relative_url %}

{% assign desktop_img_url = site.directory.large_images
    | append: "desktop/"
    | append: include.file_name 
    | strip 
    | relative_url %}

{% assign disp_2k_img_url = site.directory.large_images
    | append: "display_2k/"
    | append: include.file_name 
    | strip 
    | relative_url %}

{% assign default_img_url = site.directory.large_images
    | append: include.file_name 
    | strip 
    | relative_url %}

<img
    sizes="
        (max-width:  {{ bp_phone }}px ) {{ bp_phone }}px,
        (min-width:  {{ bp_phone }}px)
            and (max-width: {{ bp_tablet }}px) {{ bp_tablet }}px,
        (min-width: {{ bp_tablet }}px)
            and (max-width: {{ bp_desktop }}px) {{ bp_desktop }}px,
        (min-width: {{ bp_desktop }}px)
            and (max-width: {{ bp_disp_2k }}px) {{ bp_disp_2k }}px,
        100vw
    "

    srcset="
        {{ phone_img_url }}     {{ bp_phone }}w,
        {{ tablet_img_url }}    {{ bp_tablet }}w,
        {{ desktop_img_url }}   {{ bp_desktop }}w,
        {{ disp_2k_img_url }}   {{ bp_disp_2k }}w,
        {{ default_img_url }}"
    src="{{ default_img_url }}"
    alt="{{ include.alt_text}}"
    class="bg-jumbotron"
>