Any work on bringing responsive images to Textpattern?

Aeyoun · 2016-07-07 13:37:32

Is there any ongoing work on bringing responsive images to Textpattern?

The image functionality is very basic at the moment, so it looks like it would require a lot of work.

Drupal and WordPress lets me crop images to a few given aspect ratios, and will resize the images to a few preset sizes. This allows me to call up a responsive square image for use in lists, or a large 16:9 for use on article pages. Textpattern’s one-size-fits all approach seems a bit dated.

Last edited by Aeyoun (2016-07-07 13:54:19)

jakob · 2016-07-07 22:21:25

There’s smd_thumbnail if you want to generate or upload thumbnails of different sizes. How you decide to combine them for use with srcset is up to you… you can build quite complex scenarios with it, but it’s not a drop-in and go solution.

Aeyoun · 2016-07-09 18:49:18

I’m working on this.

mrdale · 2016-07-11 15:23:52

In the meantime there’s always this, which works quite well with minimal effort.

Adaptive Images

towndock · 2016-07-11 21:38:37

I question that Textpattern isn’t responsive anyway. Much modern template structure supports responsive images. Just build sites that way.

For example, use Bootstrap. Having one larger image and one thumbnail works. You simple use the larger one for most applications and it is responsive.

  <img class="img-responsive" src="your-image.jpg" alt="this">

Here is an example site done recently – using Textpattern & Bootstrap. Responsive enough?

www.innatoriental.com

Aeyoun · 2016-07-11 21:44:07

towndock wrote #300272:

For example, use Bootstrap. Having one larger image and one thumbnail works. You simple use the larger one for most applications and it is responsive.

<img class="img-responsive" src="your-image.jpg" alt="this">...

Here is an example site done recently – using Textpattern & Bootstrap. Responsive enough?

No, that is terrible for mobile devices. It may look okay but it becomes expensive to download over mobile data plans and will cause performance problems. You can’t take a high-definition desktop image and just scale it down on smaller devices.

What I’m talking about are the new responsive images <img src="image_600.jpeg" srcset="image_300.jpeg 300w, image_600.jpeg 600w, image_1200.jpeg 1200w">. A very simplified example where legacy devices get a 600px image, and mobile gets 300px and retina gets 1200px.

mrdale · 2016-07-11 22:28:46

Hence Adaptive images which combines image caching with down-sampled versions of files in sub-directories.

Got a small screen? You get a postage stamp.

You got a 4k Monitor you get a dutch master (by which I mean a gloriously large image and not a sexual position).

towndock · 2016-07-12 00:01:25

Aeyoun wrote #300273:

No, that is terrible for mobile devices. It may look okay but it becomes expensive to download over mobile data plans and will cause performance problems. You can’t take a high-definition desktop image and just scale it down on smaller devices.

What I’m talking about are the new responsive images <img src="image_600.jpeg" srcset="image_300.jpeg 300w, image_600.jpeg 600w, image_1200.jpeg 1200w">. A very simplified example where legacy devices get a 600px image, and mobile gets 300px and retina gets 1200px.

Pull that site I linked to up on your phone. Is it terrible? Slow?

Really, I’d like to know what your real world experience is.

That site has small thumbs and 1000px images. The 1000px images, after processing through Adobe Fireworks, are under 100kb each. Most 60 or 70kb.

They load quickly where I live on a phone, and I live in a tiny coastal town with marginal mobile service. The target audience lives in larger cities with much better mobile & net service than we have here.

I understand your hypothetical point, but this works.

gomedia · 2016-07-12 00:17:21

towndock wrote #300275:

They load quickly where I live on a phone, and I live in a tiny coastal town with marginal mobile service. The target audience lives in larger cities with much better mobile & net service than we have here.

Loading speed is only one part of the equation. File size is the other. When users are on limited download allowance, it’s unkind to waste their data serving up large image files when smaller ones could be made available.

Aeyoun · 2016-07-12 01:57:01

You can calculate the real-world cost to your users around the world using this website:
https://whatdoesmysitecost.com

Responsive images means giving the web browser a choice in how high quality images it should download. (Modern browsers on high-resolution displays can choose to download non-high resolution variant of an image if they’re on EDGE or other slow connection. Likewise, mobile browsers will, in theory, choose lower resolution images when nearing the end of the month’s data quota or when roaming outside of their home networks.

bici · 2016-07-12 02:56:25

Aeyoun wrote #300277:

You can calculate the real-world cost to your users around the world using this website:
https://whatdoesmysitecost.com

Responsive images means giving the web browser a choice in how high quality images it should download. (Modern browsers on high-resolution displays can choose to download non-high resolution variant of an image if they’re on EDGE or other slow connection. Likewise, mobile browsers will, in theory, choose lower resolution images when nearing the end of the month’s data quota or when roaming outside of their home networks.

can you provide real examples with actual code?

DA · 2016-07-12 03:18:04

bici wrote #300278:

can you provide real examples with actual code?

Sure. Every feature image on my blog is responsive. So every image on the front page, and every image at the top of articles. The website is currently built with WordPress, but I’d like to get responsive images working in Textpattern so I can port my site over. Images inline in articles aren’t responsive because of limitations in how WordPress handles responsive images.

The images on the front page have an 7.1:2.9 aspect ratio (the image element), but at small screen resolutions the image is switch to a smaller 1:1 image (the source element through a media attribute which acts as a media query selector). Works in every modern browser.

<picture> <source media="(max-width:420px)" srcset="/images/applenewsbot-log-150x150.jpeg 150w, /images/applenewsbot-log-300x300.jpeg 300w"> <img sizes="(max-width:670px) 98vw,300px"src="/images/applenewsbot-log-300x123.jpeg" alt="AppleNewsBot log messages" srcset="/images/applenewsbot-log-300x123.jpeg 300w, /images/applenewsbot-log-1024x418.jpeg 1024w, /images/applenewsbot-log-1200x490.jpeg 1200w, /images/applenewsbot-log-600x246.jpeg 600w, /images/applenewsbot-log-640x262.jpeg 640w, /images/applenewsbot-log-1280x524.jpeg 1280w, /images/applenewsbot-log-710x290.jpeg 710w, /images/applenewsbot-log-1420x580.jpeg 1420w" > </picture>

See the HTML 5.1 spec for details on the picture element and the picture and source elements used together; as well as the srcset attribute.

Textpattern CMS

Textpattern CMS support forum

#1 2016-07-07 13:37:32