Src images broken in preview when using srcset
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.
Discussions are closed to public comments.
If you need help with Cascade CMS please
start a new discussion.
Keyboard shortcuts
Generic
? | Show this help |
---|---|
ESC | Blurs the current field |
Comment Form
r | Focus the comment reply box |
---|---|
^ + ↩ | Submit the comment |
You can use Command ⌘
instead of Control ^
on Mac
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.
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...
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:
srcset
support was added in 4.1.7 andsizes
support was added in 4.1.8.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 thesrc
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!
Ryan Griffith closed this discussion on 23 Sep, 2015 05:01 PM.