Image thumbnails not working with media queries

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
IndyF
Jr. Propeller Head
Posts: 4
Joined: Wed Apr 01, 2020 6:12 pm

Image thumbnails not working with media queries

Post by IndyF »

Hi,

I am trying to set up my CSS so that images for screen devices larger than 1200px use a thumbnail. Devices smaller than 1200px should not use thumbnails.

So far it isn't working, and I can't tell what I'm doing wrong.

This is the media query that I'm using:

Code: Select all

@media non-print and (min-width: 1200px)
{ 

	img
	{
		mc-thumbnail: popup;
		mc-thumbnail-max-width: 620px;
		mc-thumbnail-max-height: auto;
	}
}
Images in any screen output don't use thumbnails when I do this, but removing the and (min-width: 1200px) causes all screen outputs to use thumbnails. I've also tried putting in media queries below the above to explicitly set mobile and tablet outputs to mc-thumbnail: none; and this didn't work either. I have body set to 36em, which is smaller than 1200px, but I thought min-width is based on screen size rather than the size of the container, so I wouldn't think that this would be the issue.

Does anybody have an idea on what I can do to get this working?
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Image thumbnails not working with media queries

Post by Psider »

I'm not sure 'non-print' is a valid @media type. Can you try @media screen instead?
IndyF
Jr. Propeller Head
Posts: 4
Joined: Wed Apr 01, 2020 6:12 pm

Re: Image thumbnails not working with media queries

Post by IndyF »

Good suggestion, but it doesn't change anything unfortunately.
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Image thumbnails not working with media queries

Post by Psider »

Just re-reading "I thought min-width is based on screen size". It's actually the browser viewport (in simple terms, the width of the browser window, but in reality is much more complicated because reasons). For tablet and phone this likely means the screen width, but not necessarily on a desktop pc. So make sure your browser window is maximised/definitely wider than 1200px on your monitor?

Do note, I'm just going on the regular CSS, not the madcap specific stuff as I don't currently have access to Flare. I have no idea if the thumbnail stuff is written "to spec". :)
IndyF
Jr. Propeller Head
Posts: 4
Joined: Wed Apr 01, 2020 6:12 pm

Re: Image thumbnails not working with media queries

Post by IndyF »

Thanks for letting me know that :) the browser window is definitely wider than 1200px on the monitor.

I tested the media query with a property that isn't related to thumbnails - border-radius - and this worked, so it seems that the issue is with the madcap thumbnail properties. I know they work outside a media query, since I've tested that also.

Does anyone know if this is a bug with the thumbnail properties? Or if madcap properties in general don't work with media queries?
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Image thumbnails not working with media queries

Post by NorthEast »

I'd guess that Flare doesn't actually support different thumbnail settings in media queries.

It works with border-radius as that's just regular CSS.

Thumbnails don't just use CSS though; if you look at the generated HTML code, the <img> tag points to the thumbnail, and it's enclosed in a link (<a> tag).

So I can't see this working the way Flare currently implements thumbnails.
IndyF
Jr. Propeller Head
Posts: 4
Joined: Wed Apr 01, 2020 6:12 pm

Re: Image thumbnails not working with media queries

Post by IndyF »

Ahh okay, that makes sense then.

Thanks for clearing that up Dave!
Post Reply