Example of the homepage template with added make_url tag for CDN resizing

homepage.css

.homepage-template {
    display: block;

    img {
        display: block;
        max-width: 100%;
    }
}

homepage.hypr

{% extends "page" %}

{% block body-tag-classes %}
    homepage-template
{% endblock body-tag-classes %}

{% block body-content %}
    {# Homepage Slide show #}
    <div class="slideshow-container">
        <ul class="slideshow-wrapper">
            <li class="slide">
                <img src="{{ make_url "image" model.slideshowImgUrl with maxWidth=2400 quality=35 as_parameter }}" alt="">
            </li>
            ...
        </ul>
    </div>

    {# Featured Categories #}
    <div class="featured-categores-container">
        <div class="row">
            <div class="col ">
                <img src="{{ make_url "image" model.featuredCategoryImage with maxWidth=1200 quality=35 as_parameter }}" alt="">
            </div>
            ...
        </div>
    </div>

    {# Featured Products #}
    <div class="featured-products-carousel">
        <ul class="featured-products-carousel-wrapper">
            <li class="slide">
                <img src="{{ make_url "image" model.featuredProductImage with maxWidth=600 quality=35 as_parameter }}" alt="">
            </li>
            ...
        </ul>
    </div>
{% endblock body-content %}

homepageExcerpt.hypr

// Slide show:
<img src="{{ make_url "image" model.slideshowImgUrl with maxWidth=2400 quality=35 as_parameter }}" alt="">

// Featured Categories:
<img src="{{ make_url "image" model.featuredCategoryImage with maxWidth=1200 quality=35 as_parameter }}" alt="">

// Featured Products:
<img src="{{ make_url "image" model.featuredProductImage with maxWidth=600 quality=35 as_parameter }}" alt="">