smd_thumbnail: manage multiple thumbnails of your images

michaelkpate · 2015-10-29 17:20:11

WordPress is making this a core feature in the next release: Joe McGill Explains How Responsive Images Work in WordPress 4.4

philwareham · 2015-10-29 17:39:08

@michaelkpate

You can already do that with Textpattern tags and smd_thumbnail, I’ve had responsive images on my company site for months (using Picturefill to shim for unsupported browsers).

I’d like to see how they work out what image to serve to what screen resolution at what breakpoint. There is no one-size-fits-all answer to that – so I assume they will roughly get in the ballpark and leave it at that.

I kind of see this all getting superseded by mod_pagespeed for me anyway as it’ll do all that server-side as of v1.10

RedFox · 2016-04-25 19:14:44

Some code (form):

<txp:smd_thumbnail id='<txp:smd_thumbnail_info item="id" />' type="640">
<img src='<txp:smd_thumbnail_info item="url" />' alt="..." srcset="<txp:site_url />images/640/202.jpg 1x, <txp:site_url />images/1280/202.jpg 2x">
</txp:smd_thumbnail>

How to use smd_thumbnail and smd_thumbnail_info to replace “<txp:site_url />images/640/202.jpg 1x” and “<txp:site_url />images/1280/202.jpg 2x” … !?

Something like:

srcset='<txp:smd_thumbnail id="<txp:smd_thumbnail_info item="id" />" type="640"><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail> 1x, <txp:smd_thumbnail id="<txp:smd_thumbnail_info item="id" />" type="1280"><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail> 2x'

… but that doesn’t work.

[edit]
It looks like this snippet does the job:

srcset="<txp:smd_thumbnail id='<txp:smd_thumbnail_info item="id" />' type="640"><txp:smd_thumbnail_info item="url" /> 1x</txp:smd_thumbnail>, <txp:smd_thumbnail id='<txp:smd_thumbnail_info item="id" />' type="1280"><txp:smd_thumbnail_info item="url" />  2x</txp:smd_thumbnail>"

… wrong place 1x and 2x … and no correct use of ‘ and “.

Last edited by RedFox (2016-04-25 21:33:21)

RedFox · 2016-04-25 21:39:22

For those who want to do responsive images (width and retina) using smd_thumbnail and adi_mobile:

In article:

<txp:smd_thumbnail id="202" form="adi_mobile" />

In form=“adi_mobile”:

<txp:adi_if_mobile>
<!-- MOBILES ONLY -->
<txp:smd_thumbnail id='<txp:smd_thumbnail_info item="id" />' type="640">
<img src='<txp:smd_thumbnail_info item="url" />' alt="..." srcset="<txp:smd_thumbnail id='<txp:smd_thumbnail_info item="id" />' type="640"><txp:smd_thumbnail_info item="url" /> 1x</txp:smd_thumbnail>, <txp:smd_thumbnail id='<txp:smd_thumbnail_info item="id" />' type="1280"><txp:smd_thumbnail_info item="url" />  2x</txp:smd_thumbnail>">
</txp:smd_thumbnail>
<txp:else />
<!-- DESKTOP & TABLETS -->
<txp:adi_if_mobile type="tablet">
<!-- TABLETS ONLY -->
<txp:smd_thumbnail id='<txp:smd_thumbnail_info item="id" />' type="780">
<img src='<txp:smd_thumbnail_info item="url" />' alt="..." srcset="<txp:smd_thumbnail id='<txp:smd_thumbnail_info item="id" />' type="780"><txp:smd_thumbnail_info item="url" /> 1x</txp:smd_thumbnail>, <txp:smd_thumbnail id='<txp:smd_thumbnail_info item="id" />' type="1560"><txp:smd_thumbnail_info item="url" />  2x</txp:smd_thumbnail>">
</txp:smd_thumbnail>
<txp:else />
<!-- DESKTOP ONLY -->
<txp:smd_thumbnail id='<txp:smd_thumbnail_info item="id" />' type="930">
<img src='<txp:smd_thumbnail_info item="url" />' alt="..." srcset="<txp:smd_thumbnail id='<txp:smd_thumbnail_info item="id" />' type="930"><txp:smd_thumbnail_info item="url" /> 1x</txp:smd_thumbnail>, <txp:smd_thumbnail id='<txp:smd_thumbnail_info item="id" />' type="1560"><txp:smd_thumbnail_info item="url" />  2x</txp:smd_thumbnail>">
</txp:smd_thumbnail>
</txp:adi_if_mobile>
</txp:adi_if_mobile>

Please, shoot at it if you know how to code it more elegantly.

BTW … I’ll have a look at this post of @maniqui … because it makes more sense after reading this good (and funny) article … :)

Last edited by RedFox (2016-04-26 07:17:13)

jakob · 2016-05-14 16:10:37

Stef, might it be possible to store the respective smd_thumbnail image dimensions with the image?, e.g. as {profile}_w and {profile}_h columns, much like the thumb_w/h columns that already exist in the txp_images table.

There is sometimes a need to retrieve the image dimensions of a smd_thumbnail image. My current case is for use with photoswipe (http://photoswipe.com) where I need to provide a data-size="{width}x{height}" attribute for the lightbox image, but another typical situation is the image width in the new srcset markup.¹

I know I can set a default size for a thumbnail profile but there are cases when it is too prescriptive and I leave it set to “0”. Take a typical responsive images setup with three image sizes – small, regular and large – where regular is the normal txp:image and small and large are smd_thumbnail profiles. It works where the images have a uniform dimensions and aspect ratio, but if you have portrait images and landscape images the large and small profiles will not have the same width/height for all images, so I can’t set the smd_thumbnail profiles to fixed dimensions. What would be the best way of doing this:

I pondered setting up separate profiles for portrait_large, portrait_small, landscape_large and landscape_small, but that would entail doing an image orientation test for every image and then using different smd_thumbnail profiles accordingly. It also mucks up the thumb tracking in the admin panel.
Currently I’m using manually-set variables that map certain txp:image_info type="w" values to corresponding large and small image sizes. That works but means hard-coding site-specific settings into the forms, so my form (macro) is not very portable.²

Both these variants assume you don’t have any images that don’t adhere to the ‘agreed’ image dimensions. Clients are good at uploading images with other dimensions ;-) Hence my thinking, that it would be useful to store each images dimensions in the db.

Or, is there a better way?

¹ Maniqui’s srcset example uses the width as set in the smd_thumbnail profile, so here too all images have to adhere to fixed formats.

² This is what I’m currently doing:

<!-- set vars prior to use with corresponding smd_thumbnail profile width and height
      for typical regular txp:image widths (350=portrait, 640=landscape) -->

<txp:variable name="img_350_w_large">525</txp:variable>
<txp:variable name="img_350_h_large">750</txp:variable>
<txp:variable name="img_350_w_small">175</txp:variable>
<txp:variable name="img_350_h_small">250</txp:variable>
<txp:variable name="img_640_w_large">1000</txp:variable>
<txp:variable name="img_640_h_large">640</txp:variable>
<txp:variable name="img_640_w_small">360</txp:variable>
<txp:variable name="img_640_h_small">220</txp:variable>

<!-- use in code -->
… data-size="<txp:variable name='img_<txp:image_info type="w" />_w_large' />x<txp:variable name='img_<txp:image_info type="w" />_h_large' />"

<!-- or for srcset -->
srcset="<txp:image_url /> <txp:image_info type="w" />w,
        <txp:smd_thumbnail type="small" display="url" /> <txp:variable name='img_<txp:image_info type="w" />_w_small' />w,
        <txp:smd_thumbnail type="large" display="url" /> <txp:variable name='img_<txp:image_info type="w" />_w_large' />w"

Bloke · 2016-05-16 10:40:10

jakob wrote #299116:

might it be possible to store the respective smd_thumbnail image dimensions with the image?

Call me Mr. Thicky but as far as I recall it’s already possible to output the profile dimensions. In fact, any thumb info if you use a container:

<txp:smd_thumbnail type="Large">
   <img
      src="<txp:smd_thumbnail_info item="url" />"
      data-size="<txp:smd_thumbnail_info item="w" />x<txp:smd_thumbnail_info item="h" />"
   />
</txp:smd_thumbnail>

What am I missing?

I pondered setting up separate profiles for portrait_large, portrait_small, landscape_large and landscape_small, but that would entail doing an image orientation test for every image

Now this is something the plugin could maybe help with, if you indulge me for a moment. I’m considering adding a column to each profile called something like “rule”. In here you specify conditions under which the thumb will actually be created. So, obvious contenders in a preset dropdown list are:

Always
If portrait
If landscape
If square

That would mean that if you set up a profile called Landscape and set its rule to If landscape, when you upload or edit an image with dimensions 400×300 and hit Save, the Landscape thumbnail is created, your ‘default’ thumbnail (which you probably set to “Always”) is created, but no others would be.

From a disk space and logic perspective, this is great. OK, you get “holes” in your thumbnail sets but I think the plugin caters for this already by failing (semi-gracefully?) if a particular thumbnail is missing. And there’s always <txp:smd_if_thumbnail>.

Whether there’s scope for other (custom) rules I don’t know. Anything you can think of? Maybe some way of specifying “If image width greater than N” and a corresponding ‘less than’ option? Any general thoughts on the usefulness of this idea?

And if I’ve completely missed the point about outputting the various bits of thumbnail info for, e.g. a srcset then maybe there’s a tag the plugin could offer which would simplify things? Any ideas on this front?

jakob · 2016-05-17 12:40:29

Bloke wrote #299124:

Call me Mr. Thicky but as far as I recall it’s already possible to output the profile dimensions. In fact, any thumb info if you use a container:

<txp:smd_thumbnail type="Large">...

What am I missing?

You’re right that you can output the profile dimensions, but I don’t think you can output the actual image dimensions if they deviate from that (at least I couldn’t find the dimensions of the image in the database). I have my sed thumbnail profile dimensions set to 0/nothing, so that a “large” thumb profile can be both landscape or portrait, but that means I get no output from that tag, just the “x” in-between. Either that or I’m doing it wrong (perfectly possible, even probable!)

Now this is something the plugin could maybe help with … where you specify conditions under which the thumb will actually be created. So, obvious contenders in a preset dropdown list are: always / If portrait / If landscape / If square … whether there’s scope for other (custom) rules I don’t know. Anything you can think of? Maybe some way of specifying “If image width greater than N” and a corresponding ‘less than’ option?

That sounds very clever, but I admit to not having really considered it in detail. However, I guess it is conceivable to have two different landscape thumbnail profiles with different aspect ratios in the same site, so your custom rule idea is probably good, although more complex to realise and use. Examples: maybe film stills at 16:9 and headshot of directors/actors at 4:3 or something, plus film posters or dvd cases in portrait. Another typical situation is banner images that are often very wide but normal landscape images in the site. So, those rules you mention do sound like a good way of safeguarding against accidentally overwriting thumbs.

From a disk space and logic perspective, this is great. OK, you get “holes” in your thumbnail sets but I think the plugin caters for this already by failing (semi-gracefully?) if a particular thumbnail is missing. And there’s always <txp:smd_if_thumbnail>.

Those “holes” were the main reason why I decided against creating separate thumbnail profiles. I realised I was going to have to test for orientation / thumbnail profile and in the end I went with my workaround with a poor-man’s array of corresponding sizes based on the txp:image_info type="w".

But the separate profiles way is a more logical approach. Typically, you’ll have different sizes of certain kinds of images – banners/header heros, inset images, maybe other-format teaser images, regular images in different orientations. You don’t need txp to generate the other format thumbnails that aren’t appropriate to your situation, e.g. banner landscape thumbs of portrait images.

So maybe a way of creating thumbnail profile sets and correspondences between them, so that if you choose “small” or “large” or “extra large” in your smd_tag, it will know which thumbnail profile out of a profile set to use.

How do other CMSes handle this? Of the couple of WP-sites I “babysit”, it seems it generates huge numbers of thumbnails for each image…

michaelkpate · 2016-05-17 15:05:06

jakob wrote #299131:

How do other CMSes handle this? Of the couple of WP-sites I “babysit”, it seems it generates huge numbers of thumbnails for each image…

I can tell you how my brother does it on the site he runs with WordPress. He used to use a Plugin that create all the sizes he needed automatically but then it broke and was never updated. So now he does everything manually and sets custom fields for the url to every thumbnail. It works and has some advantages but it means a bit of work every time a new post is added.

Bloke · 2016-05-17 19:51:03

jakob wrote #299131:

You’re right that you can output the profile dimensions, but I don’t think you can output the actual image dimensions if they deviate from that.

I get you now. You can only output the actual dimensions for the default image (because that gets saved in thumb_w / thumb_h in the database if you tell the plugin to track the thumbs). You’re right that the smd_thumbnail_info tag only outputs the intent of the profile. And, stupidly, if it’s zero it outputs nothing, which I think was either a design decision or stupidity on my part (or related to that core bug-slash-feature in join_atts()). I’ll dig into that one.

So, yes, some way to get at the actual dimensions might be helpful. I could probably ask PHP for the real dimensions and stash them in the thumb_data array so that smd_thumbnail_info could extract them on a per-image basis. That’ll work but it might slow things down a tad as I think the getimagesize() function isn’t exactly the Ferrari of the language. I do query that upon creation so it might be possible to stash it somewhere or cache it intelligently. Will see what I can do, as I’d rather not modify the txp_images table directly.

But the separate profiles way is a more logical approach. Typically, you’ll have different sizes of certain kinds of images – banners/header heros, inset images, maybe other-format teaser images, regular images in different orientations.

Hmmm, groups of images with the same aspect but different sizes based on, ultimately, viewport. Sounds complicated but I’ll chew it over. Anyone with any thoughts on how to supercharge the plugin for the modern size-agnostic web, please chime in.

maverick · 2016-05-18 02:25:26

Not sure that it quite applies to Jakob’s question, but since the question was raised as to what other CMSes do, Symphony CMS has an extension that offers JIT Manipulation

Last edited by maverick (2016-05-18 02:25:53)

joebaich · 2016-05-18 03:49:54

Bloke wrote #299134:

Hmmm, groups of images with the same aspect but different sizes based on, ultimately, viewport. Sounds complicated but I’ll chew it over. Anyone with any thoughts on how to supercharge the plugin for the modern size-agnostic web, please chime in.

This is hot off the presses over at Processwire modules. In a sense, don’t get too concerned about PW or the new module so much as the incorporation of LazySizes to generate SEO-friendly and self-initializing lazyloaded images (including responsive images picture/srcset), iframes, scripts/widgets and more. I have used smd_thumbnail in the past to generate steam driven responsive image sets and this, if incorporated, could automate the process AND provide state of the art lazyloading.

jakob · 2016-05-18 14:05:36

Interesting links. Those plugins for “Lazysizes” cover a whole series of aspects aside from lazy loading that I haven’t even considered.

But this idea in your other link to “MarkupSrcSet”:

{
    "hero": [
        [640, 210], [1080, null], [1920, null]
    ],
    "featured-image": [
        [360, 240], 1.333, 2.667
    ],
    "gallery-thumb": [
        [240, 120], [480, 300], [800, 576]
    ]
}

describing Image Sets shows something like I was trying to articulate where there is an image type, and a series of thumbnail sizes from small to large with specific dimensions or widths or shared aspect ratios. In their example replicated above, “null” in the “hero” example means calculate the height from the x/y of the base image size, while “featured-image” uses multiplication factors (1.333x, 2.667x) and “gallery thumb” specifies exact image dimensions for each thumbnail size. I guess there could just as easily be four or more sizes.

Textpattern CMS

Textpattern CMS support forum

#313 2015-10-29 17:20:11

Re: smd_thumbnail: manage multiple thumbnails of your images

#314 2015-10-29 17:39:08

Re: smd_thumbnail: manage multiple thumbnails of your images

#315 2016-04-25 19:14:44

Re: smd_thumbnail: manage multiple thumbnails of your images

#316 2016-04-25 21:39:22

Re: smd_thumbnail: manage multiple thumbnails of your images

#317 2016-05-14 16:10:37

Re: smd_thumbnail: manage multiple thumbnails of your images

#318 2016-05-16 10:40:10

Re: smd_thumbnail: manage multiple thumbnails of your images

jakob wrote #299116:

#319 2016-05-17 12:40:29

Re: smd_thumbnail: manage multiple thumbnails of your images

Bloke wrote #299124:

#320 2016-05-17 15:05:06

Re: smd_thumbnail: manage multiple thumbnails of your images

jakob wrote #299131:

#321 2016-05-17 19:51:03

Re: smd_thumbnail: manage multiple thumbnails of your images

jakob wrote #299131:

#322 2016-05-18 02:25:26

Re: smd_thumbnail: manage multiple thumbnails of your images

#323 2016-05-18 03:49:54

Re: smd_thumbnail: manage multiple thumbnails of your images

Bloke wrote #299134:

#324 2016-05-18 14:05:36

Re: smd_thumbnail: manage multiple thumbnails of your images

Board footer