Low-resolution thumbnails on post lists in mobile single-column views

[insightgraphics]

How can I have small thumbnails in a post list when viewed on a large monitor, but full-width (non-bitmappy) thumbnails when the post list adapts to a 480px-wide single-column viewport?

In any post list, when the browser window (viewport) is 480px or less, the featured image thumbnails (set to small in the post list) grow to full width of the single column. This is good, BUT instead of being reduced to 480px wide from the original large image, they are enlarged from the smaller thumbnail image, so they look bitmappy.

Your demo of a post list with small thumbnails works just the way I want mine to work: (see demo Category Archive or Post List Shortcode) — images in a single 480px-wide column use the full-size image as their source. In fact the demo uses the full-size image as the source of the small thumbnails, while my thumbnail images (small or wide) are sourced from a 195px-wide “thumbnail.”

Please see the featured image on this post, within my post lists in page template pages “Articles” & “Community Contributions” pages. (Don’t test the “Justice Teaching” image — that one is just too small to stretch well anyway.)

Also: the featured image lightbox has forward/back arrows, as if it’s a gallery of images, even though it only repeats the same image. Can this be set to behave like a one-image lightbox instead of a gallery?

I’ve combed the documentation, codex, theme settings, media upload options — I can’t for the life of me figure out what I’m missing.

Topic

[Jason Bobich]

Hello,

There’s not really going to be any great solution for this. You’ve got a 195px wide image and a space that is not that large. So to expand it to fit is going to result in this, unless you were to stuff a bunch of hidden images in the page that were displayed when scaled down to mobile. This wouldn’t be a good practice in general, obviously, as you’d now be loading extra images on your site.

Maybe one alternate approach could be to do something like this in your CSS:

@media (max-width: 480px) {
	.featured-image-wrapper.attachment-small {
		max-width: 195px;
		margin-left: auto;
		margin-right: auto;
	}
}

This would essentially just center it.

Also: the featured image lightbox has forward/back arrows, as if it’s a gallery of images, even though it only repeats the same image. Can this be set to behave like a one-image lightbox instead of a gallery?

The gallery of images should be all of the featured images on the current page from all the posts. The same image shouldn’t be repeating.

Example: http://www.themeblvd.com/demo/akita/category/portfolio/

In looking at your site, it looks like you’ve figured out a solution to this.

[insightgraphics]

Sorry I didn’t explain this well. The featured image I uploaded is 800px wide. I guess WordPress or the Theme makes a 195px-wide thumbnail to use if I select “small thumbnail” in the Post List options? (I did not upload a 195px image.)

I want my site to work like your demo and use the 800px-wide image as the source for the small thumbnail, AND then use that same 800px-wide image as the source for the full-column-width image when the post list is adapted to a 480px-wide viewport. Your demo can have small thumbnails on a post list AND nice hi-res versions of the same images in the other responsive formats: 480px and large monitors.

I want my 800px-wide image shrunk to fit wherever it goes: the 195px thumbnail for a post list AND the full-column width when the post list is adapted to the 480px viewport (AND the full size for the desktop). I can see on your demo that it sources the original-size image for both the small thumbnail and the full-column image, so how can I do it this way, too?

[Jason Bobich]

I understand what you’re referencing now, and this is actually a mistake on the demo, and a bit of a fluke. I guess when imported the posts at some point the thumbnails weren’t generated properly. So, WordPress is attempting to put in the correct image but can’t find it (on my demo), and the only reason WordPress is making the image 195 width is because the crop sizes is that. What you’re wanting to do isn’t possible with how it’s setup I guess unless you went in and deleted all of your small thumbnails from the upload directory on your site. — lol don’t do that…

I’ve now regenerated all my thumbnails and you’ll notice what you described is no longer the case.

One approach you could do is change the size of the small thumbnails used to something much larger, which can be done with this plugin:

http://wordpress.org/extend/plugins/theme-blvd-image-sizes/

Then on everything above mobile, just limit it to 195px wide with CSS so it can still be floated to the left.

@media (min-width: 481px) {
	.featured-image-wrapper.attachment-small {
		max-width: 195px;
	}
}

[insightgraphics]

Thanks for sticking with me, and for your great suggestions. I have learned a LOT from your detailed documentation and from reading discussions like this, so I thought I’d share what I worked out, in case it’s useful to anyone else.

I have decided to keep the thumbnail sizes as set by the theme, but to keep them from enlarging on small screens, so they’ll just behave the way they do on the large monitor — except I shrink them even more as the viewport shrinks so the text continues to flow around them. I’d rather have the thumbnail get smaller and stay crisp than get larger and lose quality.

(I can always add the lightbox to important images so a visitor can get the large, hi-res image right there with a tap. Also, the single-post has the full-size image, so a small thumbnail on the post-list is sufficient on a small device.)

The css I added is below. I’m using max-width rather than width so it works on tall, thin thumbnails as well as short, wide ones. (The numbers can be adjusted to taste, depending on the size of the text):

@media (max-width: 480px) {
	.attachment-small {
		float: left;
		margin: 0 15px 3px 0;
		max-width: 60%;
	}
}

[Author]

Replies