Forum

Thread tagged as: Problem

Updating templates for responsive images

I’ve updated templates in a list-detail setup to use responsive images (srcset and sizes) for the list page. For existing items I’m having a problem with incorrect srcset image paths.

Old detail template:

<perch:content id="listimage" type="image" label="Image for listing page" width="981" height="654" crop="true" quality="80" sharpen="6" required="true" suppress="true" />

New detail template:

<perch:content id="listimage" type="image" label="Image for listing page" width="981" height="654" crop="true" quality="80" sharpen="4" required="true" suppress="true" />
<perch:content id="listimage" type="image" label="Image for listing page" width="501" height="334" crop="true" quality="80" sharpen="4" required="true" suppress="true" /> <perch:content id="listimage" type="image" label="Image for listing page" width="666" height="444" crop="true" quality="80" sharpen="4" required="true" suppress="true" />
<perch:content id="listimage" type="image" label="Image for listing page" width="840" height="560" crop="true" quality="80" sharpen="4" required="true" suppress="true" />
<perch:content id="listimage" type="image" label="Image for listing page" width="1002" height="668" crop="true" quality="80" sharpen="4" required="true" suppress="true" />

Old list template:

<img src="<perch:content id="listimage" type="image" label="Image for listing page" width="981" height="654" crop="true" quality="80" sharpen="6" required="true" />"  />

New list template:

<img src="<perch:content id="listimage" type="image" label="Image for listing page" width="981" height="654" crop="true" quality="80" sharpen="4" required="true" />" sizes="(max-width: 767px) 100vw, (max-width: 1000px) 50vw, 501px" srcset="<perch:content id="listimage" type="image" label="Image for listing page" width="501" height="334" crop="true" quality="80" sharpen="4" required="true" /> 501w,
<perch:content id="listimage" type="image" label="Image for listing page" width="666" height="444" crop="true" quality="80" sharpen="4" required="true" /> 666w, 
<perch:content id="listimage" type="image" label="Image for listing page" width="840" height="560" crop="true" quality="80" sharpen="4" required="true" /> 840w,
<perch:content id="listimage" type="image" label="Image for listing page" width="1002" height="668" crop="true" quality="80" sharpen="4" required="true" /> 1002w">

When I add a new item everything seems to work fine – Perch creates the fallback image and four additional image sizes and the srcset paths are correct.

New item source code:

<img src="/perch/resources/tree-w981h654.jpg" sizes="(max-width: 767px) 100vw, (max-width: 1000px) 50vw, 501px" srcset="/perch/resources/tree-w501h334.jpg 501w, /perch/resources/tree-w666h444.jpg 666w, /perch/resources/tree-w840h560.jpg 840w, /perch/resources/tree-w1002h668.jpg 1002w”>

However, for existing items even though the fallback image and four additional image sizes are created, the srcset image paths are incorrect as they are to the original file that I uploaded.

Existing item source code:

<img src="/perch/resources/bird-w981h654.jpg" sizes="(max-width: 767px) 100vw, (max-width: 1000px) 50vw, 501px" srcset="/perch/resources/bird.jpg 501w, /perch/resources/bird.jpg 666w, /perch/resources/bird.jpg 840w, /perch/resources/bird.jpg 1002w”>

I’ve tried re-saving the existing item region but that doesn’t seem to make any difference. Any help much appreciated.
Louise Shearer

Louise Shearer 0 points

  • 3 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

3 years ago

Can you post your diagnostics report?
Louise Shearer

Louise Shearer 0 points

3 years ago 
Perch: 3.0.10, PHP: 7.0.8, MySQL: mysqlnd 5.0.12-dev - 20150407 - $Id: 241ae00989d1995ffcbbf63d579943635faf9972 $, with PDO
Server OS: Darwin, cgi-fcgi
Installed apps: content (3.0.10), assets (3.0.10), categories (3.0.10), perch_blog (5.6.1), perch_forms (1.9.1)
App runtimes: <?php $apps_list = [ 'perch_blog', 'perch_forms', ];
PERCH_LOGINPATH: /perch
PERCH_PATH: /Users/louiseshearer/Sites/sitename/perch
PERCH_CORE: /Users/louiseshearer/Sites/sitename/perch/core
PERCH_RESFILEPATH: /Users/louiseshearer/Sites/sitename/perch/resources
Image manipulation: GD
PHP limits: Max upload 32M, Max POST 32M, Memory: 128M, Total max file upload: 32M
F1: 3b606135b33e6a102526838f4152a807
Resource folder writeable: Yes
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php
REQUEST_URI: /perch/core/settings/diagnostics/
DOCUMENT_ROOT: /Users/louiseshearer/Sites/sitename
HTTP_HOST: sitename.local
Drew McLellan

Drew McLellan 2638 points
Perch Support

3 years ago

That should be fine - saving the content should cause any missing assets to be generated.
Louise Shearer

Louise Shearer 0 points

3 years ago

Thanks Drew. I’ve looked at it again just now and the paths to srcset images are correct today – not sure what I did there!