Can the Image TV output srcset= options?

Development
1

Is it possible to have the Image TV output the srcset= attribute with multiple resolutions using either wild cards to load similarly named images or pThumb to create a batch of new images from one high res master?

2

You probably can just put code like this in your template/chunk:

<img src="[[*myImageTV]]" srcset="[[*myImageTV:pthumb=`w=320`]] 320w, [[*myImageTV:pthumb=`w=640`]] 640w">
3

That’s basically what I was doing. I just figured it would be nice to include it into the output of the TV if there was a way.

4

I think that out of the box this is not possible with a standard Image TV.

You could probably write a custom output render for the TV:
You would basically create a custom template variable, but only implement the “Output Controller”. As a template you could use the class modTemplateVarOutputRenderImage, change the class name, adjust the code and save it in a custom package. Then change the “Output Type:” of your TV to this new option.

If this sounds too complicated (which it probably is), you could also write a snippet to create the desired output. There are also the extras Adaptive Image and srcset that don’t exactly do what you want, but maybe they work for you.

5

I have pThumb and Image+ extra’s installed. Then a TV named imageSrcSet, set to the type Image+.
In my template / output chunk I use

[[ImagePlus?
    &tvname=`imageSrcSet`
    &docid=`[[+id]]`
    &options=`w=100`
    &type=`tpl`
    &tpl=`imagePlus.fullVisual`
]]

And the imagePlus chunk that is used here looks as follows (there are examples with image+)

<picture class="breakOut">
        <source media="(min-width: 1201px)"
            srcset="[[+source.src:pthumb=[[+crop.options]]&w=1600]]"/>
        <source media="(min-width: 1025px)"
            srcset="[[+source.src:pthumb=[[+crop.options]]&w=1200]]"/>
        <source media="(min-width: 769px)"
            srcset="[[+source.src:pthumb=[[+crop.options]]&w=1024]]"/>
        <source media="(min-width: 481px)"
            srcset="[[+source.src:pthumb=[[+crop.options]]&w=768]]"/>
        <img src="[[+source.src:pthumb=[[+crop.options]]&w=480]]" alt="[[+alt]]"/>
    </picture>

But I guess it can be done without Image+ as well.

2 Likes