Can't Get URL asset helper to load dynamic images

Themes
1

How do I pass an asset variable to the url helper to load dynamic images?

                <img class="site-header-cover"
                srcset="{{img_url (asset '/images/hannah-cover.png') size="s"}} 300w,
                        {{img_url (asset '/images/hannah-cover.png') size="m"}} 600w,
                        {{img_url (asset '/images/hannah-cover.png') size="l"}} 1000w,
                        {{img_url (asset '/images/hannah-cover.png') size="xl"}} 2000w"
                sizes="100vw"
                src="{{img_url (asset '/images/hannah-cover.png') size="xl"}}"
                alt="Hannah's Hideaway"
				width="2000" height="1000"
            />

This leads to passing argument of safeString not allowed.

2

You can use variables for the first parameter of img_url instead of asset. For example:

<img
    srcset="{{img_url feature_image size="s"}} 300w,
            {{img_url feature_image size="m"}} 720w,
            {{img_url feature_image size="l"}} 960w,
            {{img_url feature_image size="xl"}} 1200w,
            {{img_url feature_image size="xxl"}} 2000w,
            {{img_url feature_image}}"
    sizes="(max-width: 1200px) 100vw, 1200px"
    src="{{img_url feature_image size="xl"}}"
    alt="{{title}}"
>
1 Like
3

As far as I’m aware, Ghost doesn’t support image resizing for theme assets, since the list of images are statically known. As such, you wouldn’t use the img_url helper for assets.

1 Like
4

Thank you so much for the clarification. I was hoping it would have extended to doing so automatically for the theme assets. If worth the trouble for speed optimization, I’ll create the images myself and then use the asset helper class for each size.

1 Like