Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image Thumbnails - Media Queries for min-width breakpoints #5201

BlackbitNeueMedien opened this issue Nov 6, 2019 · 1 comment


Copy link

@BlackbitNeueMedien BlackbitNeueMedien commented Nov 6, 2019

Image Thumbnails don't follow the mobile first concepts by providing only max-width media queries.
It should be possible to set up min-width media queries for thumbnails too (or in my opinion, technically it should be only the min-width - way to define media queries for thumbnails, but this will obviously break existing ones)

Currently you always have to set the largest variant of the image as default and then create media query variants for smaller devices. The mobile-first approach would be more to first define the smallest thumbnail as default and then create media querys for larger sizes.

Currently it is a bit weird concernind the mobile-first approach: You just start to code your mobile template but have to create a thumbnail definition with at least a large default and a media query size for mobile. You cannot start by setting the default to the small size and later add a larger media query when you develop the desktop template.
Even worse would be if you initially create the mobile size as default and later on add larger sizes. You develop the mobile template and are finished some time. Then you continue to the desktop version: You add a media query size and without knowing the previously defined default size will not be used anymore for small devices because of the max-width approach.


This comment has been minimized.

Copy link

@roland4432 roland4432 commented Nov 12, 2019

To add to the conversation, I don't think this will help much.
First, min-width media queries are mostly non-intuitive since you add a rule for min-width which is not reflected by the actual image width. Like the breakpoint is set to 400 but the image width might be 600.
This is more sustainable with max-width: max-width: 600 => image width 600

For convinience: we have a skeleton project where we clone new projects from with already setup generic thumbnail configs, one being a config with 400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000, ... up to 4k since the thumbnail config is (as you surly know) stored in var/config/image-thumbnails and can be adopted as a default to any project.
Furthermore we altered the image blocks to use this default if no thumbnail has been set.
For quality issues you want the next higher resolution for your images anyway, don't you? Or mind having a 300px wide image in a 600px wide container, since it hits the min-width query?

Just my 2 cents...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
2 participants
You can’t perform that action at this time.