search

olefredrik / FoundationPress

FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb
https://foundationpress.olefredrik.com
MIT License
2.71k stars 871 forks source link

Interchange images not appearing on IE #1202

Open nitrokevin opened 6 years ago

nitrokevin commented 6 years ago

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:

MrAndreius commented 6 years ago

try changing in https://github.com/olefredrik/FoundationPress/blob/c078fc39a5f3fe428e8a99ad365c1c435c367657/template-parts/featured-image.php#L5

<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="<?php the_post_thumbnail_url( 'featured-small' ); ?>" 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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@nitrokevin

Try restarting the module after loading the page something like ``

where is #frame-image id your div

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

JPOak commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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

JPOak commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

is there a fix for this already?