Interchange images not appearing on IE

[nitrokevin]

First I apologise if this is an issue with core foundation rather than fondationpress, but I have found that newly installed FP site are not displaying interchange images in internet explorer, I have just tried with a brand new installation without any code modifications.

How can this bug be reproduced?

1. Install FP
2. Go to sample page in Wordpress, change template to Full page or left sidebar
3. add a featured image (as this is controlled by interchange)
4. open site in IE and the image doesn't load, all other browsers are fine ( Initially tested by visiting ieonchrome.com but also verified with real IE on windows)

What did you expect to happen?
The image should be displayed
What happened instead?
Big empty space in IE
Please List the Following:

• OS & version: Mac OS 12.4
• Node version (node -v) [Node v4+ is required] : 6.12.3
• FoundationPress version (see line 3 in package.json): 2.10.4
• Foundation version (found in node_modules/foundation-sites/package.json) : 6.4.3

[MrAndreius]

try changing in

FoundationPress/template-parts/featured-image.php

Line 5 in c078fc3

<header class="featured-hero" role="banner" data-interchange="[<?php the_post_thumbnail_url( 'featured-small' ); ?>, small], [<?php the_post_thumbnail_url( 'featured-medium' ); ?>, medium], [<?php the_post_thumbnail_url( 'featured-large' ); ?>, large], [<?php the_post_thumbnail_url( 'featured-xlarge' ); ?>, xlarge]">

<header class="featured-hero" role="banner" data-interchange="[<?php the_post_thumbnail_url( 'featured-small' ); ?>, small], [<?php the_post_thumbnail_url( 'featured-medium' ); ?>, medium], [<?php the_post_thumbnail_url( 'featured-large' ); ?>, large], [<?php the_post_thumbnail_url( 'featured-xlarge' ); ?>, xlarge]"></header>

on

<img class="featured-hero" data-interchange="[<?php the_post_thumbnail_url( 'featured-small' ); ?>, small], [<?php the_post_thumbnail_url( 'featured-medium' ); ?>, medium], [<?php the_post_thumbnail_url( 'featured-large' ); ?>, large], [<?php the_post_thumbnail_url( 'featured-xlarge' ); ?>, xlarge]">

and add src="" for default

<img class="featured-hero" src="<?php the_post_thumbnail_url( 'featured-small' ); ?>" data-interchange="[<?php the_post_thumbnail_url( 'featured-small' ); ?>, small], [<?php the_post_thumbnail_url( 'featured-medium' ); ?>, medium], [<?php the_post_thumbnail_url( 'featured-large' ); ?>, large], [<?php the_post_thumbnail_url( 'featured-xlarge' ); ?>, xlarge]">

Note !

Interchange evaluates rules in order, and the last rule to match will be used. For this reason, you should order your rules from smallest screen to largest screen.

[conorbarclay]

I suspect this might have something to do with some optimizations made to the Webpack setup in #1169. During dev, there is an exclusion made to not apply Babel transformations on the "node_modules" folder (line 104 of gulpfile.babel.js) to save those cycles during recompile -- however, it might be the case that IE depends on a script in the Foundation package being transformed to work properly. If you don't mind, changing line 104 from this:

exclude: (PRODUCTION ? undefined : /node_modules/),

to this:

exclude: /node_modules(?!\/foundation-sites)/,

and reporting back?

[nitrokevin]

adding src="<?php the_post_thumbnail_url( 'featured-small' ); ?>" to img interchange tags does work with those but that still leaves background images broken.

changing to
exclude: /node_modules(?!\/foundation-sites)/,
had no effect I'm afraid

[MrAndreius]

@nitrokevin

Try restarting the module after loading the page
something like
`<script>
// Fire on document ready.
$( document ).ready( function() {
var frame_image = $('#frame-image');
var imageFrame = new Foundation.Interchange(frame_image, {
rules: [
"[< php echo the_post_thumbnail_url('featured-small'); >, small]",
"[< php echo the_post_thumbnail_url('featured-medium'); >, medium]",
"[< php echo the_post_thumbnail_url('featured-large'); >, large]",
"[< php echo the_post_thumbnail_url('featured-xlarge'); >, xlarge]"
]
});

                });

</script>`

where is #frame-image id your div

I had a similar problem in Chrome browser with orbits slider and pagerbuilder Elementor

[JPOak]

@nitrokevin Just to double check what version of IE are you testing in? I don't believe interchange images will show in IE9. IE10 and Edge. If the images still don't show you might want to make sure that you aren't using an old version of IE checked in documents mode.

[nitrokevin]

I’m testing 10, 11 and edge and have checked the settings they are set to the correct version

I know it was working fairly recently because I have two sites on the go and the older one is working fine it’s just newly created ones that have the issue

[nitrokevin]

I've just gone back and checked again to make sure I'm not going mad and here are some examples.

This site was developed in November and this page is using featured images with interchange as a background image - this is tested and working on IE 11 and Edge

https://www.avidd-design.co.uk/portfolio/stamford-kitchen-company-logo/

This site is being developed now and this page is using featured images with interchange as a background image - this is tested and is not working in IE 11 or edge
http://staging.avidd-design.co.uk/thestamfordkitchencompany/ (there should be a big header image at the top)

[JPOak]

@nitrokevin I am guessing you are using the DEV flag as your files aren't minified. I think this does have something to do with what @conorbarclay says above. Try running "npm run build" and I will guess your images will show up. At least they did for me.

As a fix I tested 'exclude: (PRODUCTION || DEV ? undefined : /node_modules/),' as a replacement to what @conorbarclay said and it seemed to work for me for the PRODUCTION and DEV flag.

@conorbarclay I did try your fix above, but it actually gave me errors. Thoughts on this? You seem like a Webpack guy : ) . My fix seemed to work, but seeing that you pushed this change maybe you can make the call.

[nitrokevin]

@JPOak You are right, when I run nom run build the image do show up correctly, however I still couldn't get it to work for DEV with your replacement

[conorbarclay]

@JPOak Agh! I probably shouldn't have posted that without trying on a fresh install. I had been testing some tweaks on the gulpfile, which should fix this issue.

Basically, all this change entails is moving the webpackConfig within the local scope of the webpack object. Due to variable scoping in the gulpfile, the webpackConfig was actually coming up as undefined during the dev stage. Give my forked gulpfile a shot on a fresh install and see if it works for you.

https://github.com/conorbarclay/FoundationPress/blob/master/gulpfile.babel.js

[nitrokevin]

@conorbarclay Your forked gulpfile is now working for DEV and PRODUCTION for me know, thank you

[JPOak]

@nitrokevin did you try the npm run build command by chance? And then back to start? etc. All good? I'm gonna trust you on this as I installed on a PC just to test this, so my environment may be a little wonky. However, I am getting some errors.

[nitrokevin]

@JPOak Yes I did npm start, npm run build and npm start again with no errors.

I should say I'm building on a mac but just testing the site on PC

[JPOak]

@nitrokevin That's what I normally do. Build on Mac and test on PC. However, I decided to install a new environment on a PC to see what happens. My errors are probably due to something I need to update. If you are good sounds good to me : ).

[tomhermans]

is there a fix for this already?