Menu icon Foundation
Can Interchange do things like Medium-up

Hi,

I'm a bit of a newbie with Foundation and currently doing my first project so apologies if this is a dumb question! :)

I'm using Interchange for image replacement across different screen sizes. I want one image for 'small' and another for 'medium' or bigger screens (L, XL and XXL). These are 'BK-logo-small.jpg' and 'BK-logo.jpg'.

My img element is attached below.

This is working for small and medium screens, however it does not display any image at all for large, XL and XXL screens.

Is there any way I can easily make it use the same image for medium, large, XL and XXL or do I have to explicitly add the definitions for each screen size.

I want to be able to use 'medium-up' or something like that.

Thanks

<img data-interchange="[/Images/BK-logo-small.jpg, (default)], [/Images/BK-logo-small.jpg, (small)], [/Images/BK-logo.jpg, (medium)]">

            

         

interchange

Hi,

I'm a bit of a newbie with Foundation and currently doing my first project so apologies if this is a dumb question! :)

I'm using Interchange for image replacement across different screen sizes. I want one image for 'small' and another for 'medium' or bigger screens (L, XL and XXL). These are 'BK-logo-small.jpg' and 'BK-logo.jpg'.

My img element is attached below.

This is working for small and medium screens, however it does not display any image at all for large, XL and XXL screens.

Is there any way I can easily make it use the same image for medium, large, XL and XXL or do I have to explicitly add the definitions for each screen size.

I want to be able to use 'medium-up' or something like that.

Thanks

<img data-interchange="[/Images/BK-logo-small.jpg, (default)], [/Images/BK-logo-small.jpg, (small)], [/Images/BK-logo.jpg, (medium)]">

            

         

Rafi Benkual gave the most helpful answer for this post
Rafi Benkual over 5 years ago

Thanks for the example page. It is working as it should on Foundation 5.0.3. Here is your code working on 5.0.3. http://cdpn.io/mvoIw We suggest updating. Thanks!

Karl Ward over 5 years ago

I find it strange that it does not display any image at all for large screens ... "default" should display on all screens from 1px and up, while the specific settings set specific images for larger resolutions.

default  only screen and (min-width: 1px)
small  only screen and (min-width: 1px)
medium  only screen and (min-width: 641px)
large  only screen and (min-width: 1024px)

Got a link?

Martin Kearn over 5 years ago

Hi Karl,

Yes that is what i thought should happen (i.e. default applies if nothing is defined), but it is not working that way.

Having looked into it a bit more, i think it is only an issue when the page first loads (if the screen is bigger than M). If you scale the browser down to S and back up again, it work just fine. Could this be a JavaScript issue?

I'm taking a slightly different approach now for S and M and I'm using an off canvas menu and hiding my entire top bar so the issue cannot be seen (I do not have a link). However, I'm still interested in the answer from a theoretical point of view.

I guess it is good to know that the default should apply and it is not something I'm doing wrong in my syntax.

Rafi Benkual over 5 years ago

Interchange is based on the media queries assigned to each screen size. So if you want one image for 'small' and another for 'medium' then the rest of the screen sizes will see the medium image. The larger screen sizes default to the largest interchange image size defined.

If you define a large image, Xlarge will also see that one.

Nick Jackson over 5 years ago

As with Martin, I have a problem with interchange where the appropriate size isn't loaded until after a viewport resize which crosses a breakpoint. More specifically in my testing:

My test image has a (default) query and no others. It loads by default on "small" viewports, but does not load by default on "medium up". However, if I resize a "medium up" viewport to "small" the image loads, and resizing back up the image is retained.

If I add a (medium) query, the (default) loads on "small" as expected, and (medium) loads on "medium", but nothing loads by default on "large". If I resize a "large" viewport to "medium" the image loads correctly, if I resize to "small" is correctly swaps, and when I resize back up to "medium" and into "large" the (medium) image is retained as expected.

Martin Kearn over 5 years ago

Hi Nick, what you have described is what I am seeing, but you did a much better job of explaining it than i did! It is good to know i am not the only one seeing this issue.

Hi Rafi, what you described is how i understand interchange is supposed to work, however it is not working in this way for me or Nick by the looks of it.

This seems like a bug with interchange to me. Is there anyone from Zurb watching this thread and able to comment?

Silvio Gutierrez over 5 years ago

I also have this problem, exactly as described by Nick.

Karl Ward over 5 years ago

Would be interesting to see a link ...

Nick Jackson over 5 years ago

I've knocked up a quick example page which should show the problem:

http://zurb-interchange.site44.com/

Karl Ward over 5 years ago

yup. I cannot see how this is not a bug.

Rafi Benkual over 5 years ago

Thanks for the example page. It is working as it should on Foundation 5.0.3. Here is your code working on 5.0.3. http://cdpn.io/mvoIw We suggest updating. Thanks!