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.

philwareham · 2016-07-12 09:32:35

I use responsive images in Textpattern on my site via smd_thumbnail plugin – it takes some dedication and initial setup of pixel ratios but it works – I agree some better core image features would be very welcome at some point.

Also as a side note, you can polyfil the HTML5.1 picture and srcset tags for older browsers using Picturefill.

Bloke · 2016-07-12 12:23:19

I concur with Phil, and look forward to Aeyoun’s work on forking my plugin (or a pull request thereof, I’m easy either way).

For core support in some undisclosed timeframe, what actually needs to happen? From my — extremely limited — point of view, one of the barriers to entry seems to be our storage and use of image dimensions in the database. Is that true or not?

That is, if we dropped the image sizes entirely — from the DB and from the output of the various image tags — would that make it easier to then move forward with some kind of responsive support? Or do the image sizes in the DB and injected into the img tags make no difference at all to the ability to successfully employ scrset/picture elements? Should the image dimensions be desired sizes and not actual dimensions? Do we need both? Some kind of actual sizes for each image, as we have now, and some range of values or percentage scaling over which that image is “valid”?

Whether dimensions help or hinder, what’s next? What do we need to actually do in terms of a) database support, b) interface support, to allow this to move forward?

A long-overdue grid of images is on the cards for the UI (currently available via plugin). A plugin for creating multiple image profiles exists. Somewhere in between these (or possibly outside them) lies the ability to manage multiple images and thumbnails in a usable and intuitive manner. Certainly, smd_thumbnail isn’t it, as it doesn’t cope with varying aspect ratios and pixel densities particularly well. And the interface is a bit clunky.

What needs to happen? How will it look? How will it work? Bring ideas to this table, please. Or put forward some code as a core pull request.

jakob · 2016-07-12 12:52:40

I do the same as Phil and others: smd_thumbnail and picturefill. You can make yourself an own tag, e.g. txp:xyz_picture or txp:xyz_photo for use in the body field using smd_macro or rah_beacon.

One problem with the srcset variant, is that while it’s straightforward enough to output the 1280w image width, it’s harder to automate the sizes attribute that lets the browser know how large it will be displayed in the layout at the different media breakpoints. Mostly, you need to set that manually.

Textpattern CMS

Textpattern CMS support forum

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