0

We're currently using Zurb Foundation on a site and are looking to use data-interchange instead of background images.

While it handles images with an image extension (JPG, PNG) it chokes whenever we try to use our CMS' dynamically created images.

Example:

<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en"> <![endif]-->
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>data-interchange test</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row"><div class="large-12 columns">
    <div data-interchange="[http://bus.wisc.edu/_images/template/global/thin/logo-horizontal.png, (default)]" style="width:100%;height:400px;">
        JPG extension
    </div>
</div></div>

<div class="row"><div class="large-12 columns">
    <div data-interchange="[https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=640&h=150, (default)]" style="width:100%;height:400px;">
        Dynamic image
    </div>
</div></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation/foundation.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation/foundation.interchange.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Based upon their documentation on Interchange, it sounds like they're treating it as content and trying to load it in as such:

When you add a data-interchange attribute containing image paths (.jpg, .jpeg, .png, .gif, .bmp, .tiff), instead of replacing the element content it will set a background-image css property with the corresponding path.

What it doesn't have is a way to tell Foundation to treat it as an image, which is what I'm hoping for.

Is there a way to tell Foundation to treat URLs as a particular type (image vs. content)?

James Skemp
  • 8,018
  • 9
  • 64
  • 107
  • What CMS are you using? Does the CMS create different sizes of the images and store them somewhere for different use cases or does it generate each image on the fly based on the requested parameters. Looking at the Interchange source `if (/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i.test(path))` it needs to be an image with the file extension at the end. – Thomas Taylor Sep 22 '15 at 00:51
  • Further this question might be of interest: http://stackoverflow.com/questions/17893133/trouble-with-interchange-js-in-zurb-foundation-when-images-are-being-dynamically?rq=1 – Thomas Taylor Sep 22 '15 at 01:05
  • Sitecore, which by default uses `.ashx` as the extension. I've switched it so it adds the actual file extension, but it would be good to know an alternative method, in case we have instances that we can't overwrite. Hacking the original code is an option, but a poor one for maintainability purposes. – James Skemp Sep 22 '15 at 14:25
  • Sounds like you've resolved the issue to a degree. I don't think there is an alternative method that doesn't involve some kind of hack/workaround. Foundation components tend to do 1 thing well and that's it. – Thomas Taylor Sep 23 '15 at 01:00

0 Answers0