Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

Aeyoun
Member
From: NO
Registered: 2013-06-30
Posts: 15
Website

Any work on bringing responsive images to Textpattern?

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)

Offline

#2 2016-07-07 22:21:25

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,461
Website

Re: Any work on bringing responsive images to Textpattern?

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.


TXP Builders – finely-crafted code, design and txp

Offline

#3 2016-07-09 18:49:18

Aeyoun
Member
From: NO
Registered: 2013-06-30
Posts: 15
Website

Re: Any work on bringing responsive images to Textpattern?

I’m working on this.

Offline

#4 2016-07-11 15:23:52

mrdale
Moderator
From: Walla Walla
Registered: 2004-11-19
Posts: 2,202
Website

Re: Any work on bringing responsive images to Textpattern?

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

Adaptive Images

Offline

#5 2016-07-11 21:38:37

towndock
Member
From: Oriental, NC USA
Registered: 2007-04-06
Posts: 273
Website

Re: Any work on bringing responsive images to Textpattern?

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

Offline

#6 2016-07-11 21:44:07

Aeyoun
Member
From: NO
Registered: 2013-06-30
Posts: 15
Website

Re: Any work on bringing responsive images to Textpattern?

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.

Offline

#7 2016-07-11 22:28:46

mrdale
Moderator
From: Walla Walla
Registered: 2004-11-19
Posts: 2,202
Website

Re: Any work on bringing responsive images to Textpattern?

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).

Offline

#8 2016-07-12 00:01:25

towndock
Member
From: Oriental, NC USA
Registered: 2007-04-06
Posts: 273
Website

Re: Any work on bringing responsive images to Textpattern?

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.

Offline

#9 2016-07-12 00:17:21

gomedia
Plugin Author
Registered: 2008-06-01
Posts: 1,225
Website

Re: Any work on bringing responsive images to Textpattern?

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.

Offline

#10 2016-07-12 01:57:01

Aeyoun
Member
From: NO
Registered: 2013-06-30
Posts: 15
Website

Re: Any work on bringing responsive images to Textpattern?

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.

Offline

Board footer

Powered by FluxBB