Responsive Image implementation with polyfill (best practice)
Hi,
Wondering if anyone has attempted responsive images with the polyfill, Picturefill 2.0, and what steps were taken within Cascade?
Thank You so much for the help.
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
Support Staff 1 Posted by Tim on 21 Jan, 2015 08:18 PM
Hi,
I noticed that no one has responded to this particular discussion so I figured I'd give this a shot in my local instance to see if I could offer any pointers. I'm basically just following what is listed out on the Picturefill page.
Here are the steps I took to set up a very simple example in my Cascade Server instance:
<head>tag: (note that /files/js/picturefill.js is the full path to the location of that file in my instance)1) The paths to the images must be the full path to where those images exist in your Cascade Server instance.
2) The paths must be enclosed within
[system-asset][/system-asset]tags. These tags tell the application that you are attempting to reference a file that is managed in the system. They are necessary in this particular case because Cascade Server doesn't automatically attempt to rewrite links for srcset attributes.So, the final code with modifications might look something like this:
Once you insert that code and submit your page you should see the image appear. You can then resize the page to test and verify that the image is changing.
Keep in mind this is a very simple example. There are potentially a number of additional ways you could set this up (perhaps by making use of Data Definition file chooser fields where end users would simply browse to the different image files that they want inserted into the page, then you would have a Velocity or XSLT Format output the appropriate HTML to have the images displayed).
I hope this helps! Let me know if you have any trouble setting this up in your instance and I'll be happy to help out.
2 Posted by t1merritt on 21 Jan, 2015 08:44 PM
Thank You so much, Tim!
Yeah, I was noticing myself that Cascade wasn't recognizing the srcset attribute for referencing the images properly. I was assuming that the [system-asset] tag was necessary, but I wanted to get a fresh look from someone else to make sure I was correct in my thinking. I've since implemented the instance, similarly, and it seems to be working as expected.
Thank You, again, for your time.
Support Staff 3 Posted by Tim on 21 Jan, 2015 08:52 PM
Glad to hear it! I appreciate the update. Have a good one!
Tim closed this discussion on 21 Jan, 2015 08:52 PM.