MODX Community

Can the Image TV output srcset= options?

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?

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">

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.

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.

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.

1 Like