Home → Bug Reports →

Src images broken in preview when using srcset

• Edit

Michael McGinnis

10 Jul, 2015 07:52 PM

Responsive images (srcset/sizes) have been implemented in most major browsers (Microsoft will add it for Windows 10). But when I tried to use srcset in Cascade Server 7.12.2 - f65d7, the src image looked fine after the page was published, but the image was broken in preview. The bug is present in 7.14.1 as well.

Here's my original HTML:
<section class="spotlight-small" id="spotlight"><img alt="Albritton Bell Tower" sizes="100vw" src="/assets/images/bell.jpg" srcset="/assets/images/bell.jpg 960w, /assets/images/bellm.jpg 480w" /></section>

This is how Cascade rewrote it (not bad):
<section class="spotlight-small" id="spotlight"><img alt="Bell Tower" sizes="100vw" src="/render/file.act?path=/assets/images/bell.jpg" srcset="/assets/images/bell.jpg 960w, /assets/images/bellm.jpg 480w" /></section>

I was able to edit the image's alt attribute by clicking on the tree in TinyMCE, but the preview image was broken.

The image looked fine in preview if I removed srcset (so sizes wasn't the problem):
<section class="spotlight-small" id="spotlight"><img alt="Bell Tower" sizes="100vw" src="/render/file.act?path=/assets/images/bell.jpg" /></section>

As Tim pointed out, it's currently necessary to enclose the srcset elements in system-asset tags. But that doesn't fix the broken preview image.

1. 1 Posted by Michael McGinni... on 10 Jul, 2015 08:24 PM

   

   Interestingly enough, the image isn't broken if I use picture instead of srcset. This is true for 7.14.1 as well.

   <picture> <source media="(min-width: 800px)" srcset="/assets/images/bell.jpg 960w, /assets/images/bellm.jpg 480w" /> <img alt="Bell Tower" src="/render/file.act?path=/assets/images/bellm.jpg" /> </picture>

   But srcset is more commonly used and supported - it's simpler to use than picture as well. And picture tells the browser what to display, whereas srcset tells the browser what images and sizes are available, and lets the browser display the best one. That's more future-proof.

   • Edit

2. 2 Posted by Michael McGinni... on 10 Jul, 2015 09:10 PM

   

   Here is the related Idea (please vote);
   http://ideas.hannonhill.com/forums/52559-cascade-cms-ideas/suggesti...

   • Edit

3. 3 Posted by Ryan Griffith on 07 Aug, 2015 04:36 PM

   

   Hi Michael,

   My apologies for the delayed response to your discussion.

   There are a couple of issues going on here:

   • TinyMCE's support for the attributes. Looking over their changelog, it seems as though srcset support was added in 4.1.7 and sizes support was added in 4.1.8.
   • It appears the browser is attempting to load the values from srcset and is tripping up on the URL. This most likely because they are in the form of [system-asset:id=ASSET_ID]/path/to/image.jpg[/system-asset] as opposed to the src attribute, which is rewritten by our custom image plugin as /render/file.act?path=/path/to/image.jpg

   That being said, I went ahead and logged an improvement in our issue tracker and put it up for consideration for Cascade 8, since it will be running at least TinyMCE 4.1.10.

   Please let me know if you have any questions.

   Thanks!

   • Edit

4. Ryan Griffith closed this discussion on 23 Sep, 2015 05:01 PM.