Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2020-02-20 16:22:40

tka
New Member
Registered: 2010-02-15
Posts: 4

Custom thumbnail output

Hi there,

I use <txp:article_image /> with the thumbnail option to show thumbnails on my blog (landing page + individual articles). Wondering on how to reduce network traffic, I stumbled upon webp and wanted to give it a shot. So my idea was: use bash/cron to convert any thumbnail image uploaded to the image dir into webp; alter the output of txp:article_image to provide webp images with a fallback. Something along the lines of this:

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg">
</picture>

Would you see any possibility to achieve this goal? I am aware about the controversial nature of webp but I wanted to give it a try and maybe raise some awareness about serving sites with low bandwidth requirements.

Thanks

Offline

#2 2020-02-20 16:40:44

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: Custom thumbnail output

tka wrote #321819:

Hi there,

I use <txp:article_image /> with the thumbnail option to show thumbnails on my blog (landing page + individual articles). Wondering on how to reduce network traffic, I stumbled upon webp and wanted to give it a shot. So my idea was: use bash/cron to convert any thumbnail image uploaded to the image dir into webp; alter the output of txp:article_image to provide webp images with a fallback. Something along the lines of this:

<picture>...

Would you see any possibility to achieve this goal? I am aware about the controversial nature of webp but I wanted to give it a try and maybe raise some awareness about serving sites with low bandwidth requirements.

Thanks

Hi

I do not think that you will need to hack article_image. You could write the cron-job and save all the images in the default, or another folder you may create just for the webp format. If the saved webp images have the same names (numbers in the case of txp) you can then create a form with:

<txp:variable name="ai"><txp:custom_field name="article_image" /></txp:variable>
<txp:if_variable>
<picture>
    <source srcset="/webp/<txp:variable name="ai" />.webp" type="image/webp">
    <source srcset="/images/<txp:variable name="ai" />.jpg" type="image/jpeg">
    <img src="/images/<txp:variable name="ai" />.jpg">
</picture>
</txp:if_variable>

You can then call this form in your template by using <txp:output_form form="webp" /> or whatever else you may have called your form.

>Edited to add that GD Graphics Library supports webp so a plugin might be possible.

Last edited by colak (2020-02-20 16:51:57)


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#3 2020-02-20 17:03:31

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: Custom thumbnail output

I’ve not tried it yet myself, but I was curious about a solution using .htaccess that retrieves a webp if it is there instead of the specified jpg/png file:

See here (and I’m sure I saw this detailed elsewhere).

With this option, you wouldn’t need to specify both or upload both to textpattern, you just need a generator on your server to periodically produce webp files from your jpg and png files. Even if the conversion wasn’t immediate, then jpg/png would still be there, so it shouldn’t break if no webp is available.


TXP Builders – finely-crafted code, design and txp

Offline

#4 2020-02-20 17:24:34

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: Custom thumbnail output

Devil’s advocate here: if it’s supported by GD and we can create thumbnails from webp images then why do we not support upload of webp natively? Piece of cake to add. 4.8.0? 4.8.1? The only requirement would be that people would need PHP 7.1.0+ which is above our minimum spec, but poses no problem for Txp.

It shouldn’t be hard to add conditional support based on the PHP version installed.


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

#5 2020-02-20 17:37:06

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: Custom thumbnail output

I guess the issue would be the fallback as txp natively only supports one thumbnail/image currently.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#6 2020-02-20 18:03:44

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: Custom thumbnail output

colak wrote #321823:

I guess the issue would be the fallback as txp natively only supports one thumbnail/image currently.

Sure, that’s for future. But right now, if you upload a GIF you get a gif thumbnail created. If you upload a JPG, you get a jpg thumbnail. So what’s to stop us creating a webp thumbnail if you uploaded a WEBP image?


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

#7 2020-02-20 18:06:02

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: Custom thumbnail output

You are right!. If webp images look better and weigh less, maybe txp should be supporting them and tka’s script should be converting them into jpegs. Just an idea.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#8 2020-02-20 18:59:40

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: Custom thumbnail output

The problem – at present – is that webp doesn’t show at all on some browsers.


TXP Builders – finely-crafted code, design and txp

Offline

#9 2020-02-20 19:17:37

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: Custom thumbnail output

jakob wrote #321826:

The problem – at present – is that webp doesn’t show at all on some browsers.

Yeah, if you’re on Safari, you’re out of luck. And on macOS (at least Sierra), you can’t even pick a .webp file from the Browse… button in any browser – files are greyed out regardless that their mime type matches image/*. You can drag one from Finder and it’ll allow it, though.


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

#10 2020-02-20 20:14:11

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Custom thumbnail output

Offline

#11 2020-02-20 21:31:20

michaelkpate
Moderator
From: Avon Park, FL
Registered: 2004-02-24
Posts: 1,379
Website GitHub Mastodon

Re: Custom thumbnail output

WebP image format

The Browsers that don’t support WebP are:

  • IE – still in use by 1.55%
  • Safari 13 – 2.65%
  • iOS Safari/Chrome – 13.3%

And some more discussion on this page for the WebP Express Wordpress Plugin

Offline

#12 2020-02-21 10:50:41

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,134
GitHub

Re: Custom thumbnail output

Bloke wrote #321822:

Piece of cake to add. 4.8.0? 4.8.1?

4.8.1 or later. The infamous Feature Creep Police are watching this thread, Bloke…

Offline

Board footer

Powered by FluxBB