Responsive Image implementation with polyfill (best practice)

t1merritt's Avatar

t1merritt

13 Jan, 2015 09:20 PM

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.

  1. Support Staff 1 Posted by Tim on 21 Jan, 2015 08:18 PM

    Tim's Avatar

    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:

    • Upload the javascript file (picturefill.js) into Cascade Server
    • Edit your Template and add the following line within your <head> tag:
      <script async="" src="/files/js/picturefill.js" type="text/javascript">
      
      (note that /files/js/picturefill.js is the full path to the location of that file in my instance)
    • Upload a couple of test images of different sizes into Cascade Server
    • Edit a page where this Template is in use (ie, a Page using a Content Type which has this Template assigned)
    • Click the HTML icon, then add in the appropriate code to display the image. For example:
      <img sizes="(min-width: 40em) 80vw, 100vw"
      srcset="examples/images/medium.jpg 375w, examples/images/medium.jpg 480w, examples/images/large.jpg 768w" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
      
      NOTE: There are a couple of important things to note when referencing these images from within Cascade Server:

    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:

    <img alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia" sizes="(min-width: 40em) 80vw, 100vw" srcset="[system-asset]/files/images/medium.jpg[/system-asset] 375w, [system-asset:]/files/images/medium.jpg[/system-asset] 480w, [system-asset:]/files/images/large.jpg[/system-asset] 768w" />
    

    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. 2 Posted by t1merritt on 21 Jan, 2015 08:44 PM

    t1merritt's Avatar

    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.

  3. Support Staff 3 Posted by Tim on 21 Jan, 2015 08:52 PM

    Tim's Avatar

    Glad to hear it! I appreciate the update. Have a good one!

  4. Tim closed this discussion on 21 Jan, 2015 08:52 PM.

Comments are currently closed for this discussion. You can start a new one.

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