Menu icon Foundation
Interchange setting HTML as background-image

Hi,

I'm using Interchange to swap out bits of HTML. The problem I'm having is that it's setting those HTML snippets as background-images and not loading them into the page.

Here's my HTML:

<div data-interchange="[/patterns/02-organisms-01-product-00-product-hero-small/02-organisms-01-product-00-product-hero-small.html, (small)], [/patterns/02-organisms-01-product-00-product-hero-small/02-organisms-01-product-00-product-hero-large.html, (medium)], [/patterns/02-organisms-01-product-00-product-hero-small/02-organisms-01-product-00-product-hero-large.html, (large)]">
	Loading...
</div>

And here's the generated HTML

<div data-interchange="[/patterns/02-organisms-01-product-00-product-hero-small/02-organisms-01-product-00-product-hero-small.html, (small)], [/patterns/02-organisms-01-product-00-product-hero-small/02-organisms-01-product-00-product-hero-large.html, (medium)], [/patterns/02-organisms-01-product-00-product-hero-small/02-organisms-01-product-00-product-hero-large.html, (large)]" data-uuid="interchange-hsqi5bu50" style="background-image: url(http://patterns.nlg.local/patterns/02-organisms-01-product-00-product-hero-small/02-organisms-01-product-00-product-hero-large.html);">
	Loading...
</div>

Note the "style="background-image: url(http://patterns.dev.com/patterns/02-organisms-01-product-00-product-hero-small/02-organisms-01-product-00-product-hero-large.html);" bit...

What am I doing wrong?

Any help with this would be super!

interchange

Hi,

I'm using Interchange to swap out bits of HTML. The problem I'm having is that it's setting those HTML snippets as background-images and not loading them into the page.

Here's my HTML:

<div data-interchange="[/patterns/02-organisms-01-product-00-product-hero-small/02-organisms-01-product-00-product-hero-small.html, (small)], [/patterns/02-organisms-01-product-00-product-hero-small/02-organisms-01-product-00-product-hero-large.html, (medium)], [/patterns/02-organisms-01-product-00-product-hero-small/02-organisms-01-product-00-product-hero-large.html, (large)]">
	Loading...
</div>

And here's the generated HTML

<div data-interchange="[/patterns/02-organisms-01-product-00-product-hero-small/02-organisms-01-product-00-product-hero-small.html, (small)], [/patterns/02-organisms-01-product-00-product-hero-small/02-organisms-01-product-00-product-hero-large.html, (medium)], [/patterns/02-organisms-01-product-00-product-hero-small/02-organisms-01-product-00-product-hero-large.html, (large)]" data-uuid="interchange-hsqi5bu50" style="background-image: url(http://patterns.nlg.local/patterns/02-organisms-01-product-00-product-hero-small/02-organisms-01-product-00-product-hero-large.html);">
	Loading...
</div>

Note the "style="background-image: url(http://patterns.dev.com/patterns/02-organisms-01-product-00-product-hero-small/02-organisms-01-product-00-product-hero-large.html);" bit...

What am I doing wrong?

Any help with this would be super!

Rafi Benkual over 5 years ago

There are a few discussions that will help you on this. Karl has a solution that works here
http://foundation.zurb.com/forum/posts/1171-interchange-and-background-images

This pull request was merged into the master branch 10 days ago https://github.com/zurb/foundation/pull/4051 It should take care of this for you. 5.2.1 will be out tomorrow which will include this PR.

Interchange is looking for an img src.To target a background image would require a change of how interchange handles images.
http://foundation.zurb.com/forum/posts/223-interchange-for-background-image-url

Darren Wood over 5 years ago

Thanks for the reply Rafi, but none of your links address the issue I'm having... which is that interchange thinks that my HTML snippet is an image. If you look at the rendered HTML again you will see that it's setting my 02-organisms-01-product-00-product-hero-large.html file as the background image rather than loading that HTML block into the page

Lannie Le over 5 years ago

Same issue I'm facing with Interchange v 5.2.0. Instead of loading HTML, Interchange sets the HTML file as style="background-image:url(../path/file.html)"

Lannie Le over 5 years ago

It's working as intended when I use Interchange v5.0.3 (you can grab it off Github)

David Ollerhead over 5 years ago

+1 for this problem. Have updated an issue on Github accordingly: https://github.com/zurb/foundation/pull/4752

Running 5.2.1 - html partial files as specified by interchange are requested from the server correctly, but the script is applying the html as a background image.

            <div data-interchange="[/interchange/mobile.html, (small)], [/interchange/tablet.html, (large)], [/interchange/desktop.html, (xlarge)]">
                <div data-alert class="alert-box warning radius">
                    This is the INITIAL content.
                    <a href="#" class="close">&times;</a>
                </div>
            </div>

DOM once Interchange has kicked in

<div data-interchange="[/interchange/mobile.html, (small)], [/interchange/tablet.html, (large)], [/interchange/desktop.html, (xlarge)]" data-uuid="interchange-ht723eyr0" style="background-image: url(http://localhost:8000/interchange/desktop.html);">
                <div data-alert="" class="alert-box warning radius">
                    This is the INITIAL content.
                    <a href="#" class="close">×</a>
                </div>
            </div>

Meland Neno over 5 years ago

  1. Open your foundation.interchange.js
  2. Find Javascript var regex = "/^.(\.jpg|\.jpeg|\.png|\.gif|\.tiff|\.bmp)\??|#?./"; It's written at line 61 by default.
  3. Change it into Javascript var regex = "/(\.jpg|\.jpeg|\.png|\.gif|\.tiff|\.bmp)$/";
  4. Hit F5 button on your page.