Textpattern CMS support forum

You are not logged in. Register | Login | Help

#11 2016-07-12 02:56:25

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 1,510
Website

Re: Any work on bringing responsive images to Textpattern?

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?


…. texted postive

Offline

#12 2016-07-12 03:18:04

DA
New Member
From: NO
Registered: 2016-07-10
Posts: 2
Website

Re: Any work on bringing responsive images to Textpattern?

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.

Offline

#13 2016-07-12 09:32:35

philwareham
Core designer
From: Farnham, Surrey, UK
Registered: 2009-06-11
Posts: 3,199
Website

Re: Any work on bringing responsive images to Textpattern?

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.

Offline

#14 2016-07-12 12:23:19

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 8,788
Website

Re: Any work on bringing responsive images to Textpattern?

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.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#15 2016-07-12 12:52:40

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

Re: Any work on bringing responsive images to Textpattern?

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.


TXP Builders – finely-crafted code, design and txp

Online

Board footer

Powered by FluxBB