Convert images to .webp

phiw13 · 2024-02-19 05:58:43

jakob wrote #336703:

Here’s a mini-update to the earlier version with one UI modification and two additions […]

You V 0.2 looks good so far. The placement of the of the .webp widget as part of the meta-data / details block makes sense as well. The markup has a bit of problems on 4.9.0-dev with CSP enabled for the admin side (inline styles…). I realise that this might be part of experimenting, though.

Would a slightly simpler markup work as well ?

<p class="txp-actions">
  <a class="" title="Generate or recreate corresponding webp versions of this image and thumbnail" href="#"><span class="ui-icon ui-icon-gear"></span><span class="ui-button-icon-space"> </span>Recreate WebP images</a>
  <span>
    <a target="_new" rel="prefetch" href="http://txpdev.local/images/144.webp"><span class="ui-icon ui-icon-newwin"></span><span class="ui-button-icon-space"> </span>Image</a> <a target="_new" href="http://txpdev.local/images/144t.webp"><span class="ui-icon ui-icon-newwin"></span><span class="ui-button-icon-space"> </span>Thumbnail</a>
  </span>
</p>

By analogy with the link set under the “save” button on the Write and Pages/Forms panels. That way non additional styling would be needed I think

myusername’s variant is still desirable as this is more a proof of concept for creating webp images on a one-by-one basis. Ideally you’d want a generic setting that creates them as a rule as part of the image_save routine.

Yes it would probably nice to automate that, as an option, eventually with the possibility to exclude specific image formats (e.g .png).

Last edited by phiw13 (2024-02-19 05:59:21)

Pat64 · 2024-02-19 06:48:42

Julian.
Thank you a lot.
If you project an update, here is some little amendments for the French textpack:

#@language fr
#@image
kuo_create_webp_btn => Créer des images WebP
kuo_recreate_webp_btn => Recréer des images WebP
kuo_create_webp_btn_tooltip => Générez ou recréez les versions Webp correspondantes à cette image et sa miniature
#@prefs
kuo_webp => Options WebP
kuo_webp_pref_quality => Qualité de l’image WebP (0-100)

Bloke · 2024-02-19 07:06:30

phiw13 wrote #336706:

It would probably nice to automate that, as an option, eventually with the possibility to exclude specific image formats (e.g .png).

Is this something we can build upon for the next major version of core? I’m conscious that auto-generating different file formats is not for everyone, as there are people who prefer to do all their image editing offline.

There is probably a balance to be struck between completely manual processing and auto-generation on upload, and auto-generation at point of usage, with suitable security restrictions.

Fundamentally, the database structure for images requires alteration in some way to handle multiple file formats of the same image so the metadata can be associated with it. I’m still not quite sure how best to do that.

jakob · 2024-02-19 15:48:44

phiw13 wrote #336706:

The markup has a bit of problems on 4.9.0-dev with CSP enabled for the admin side (inline styles…). I realise that this might be part of experimenting, though. Would a slightly simpler markup work as well ?

<p class="txp-actions">...

I understand the problem. I fiddled a lot to get it work cleanly under .txp-edit-actions – all variants there involve negating some of the effects of the flex-box and margins. With .txp-actions (no edit), there’s no separator line but that’s tolerable, and the links don’t run into each other. Thank you for that pointer. That’s now also included in the revised installer above.

BTW: do you think there’s an argument for including a selection of basic utility classes in textpattern.css from 4.9 onwards, so that one can achieve tweaks without resorting to inline style attributes? As you rightly point out, the latter will potentially be blocked by CSP settings?

Yes it would probably nice to automate that, as an option, eventually with the possibility to exclude specific image formats (e.g .png).

I guess one could add a pref to this one here to prevent the buttons showing on certain image types, though it would likely confuse some users as to why the buttons are only sometimes there.

So far, Pete’s plugin with my mini-modifications is really only a proof of concept. You would really want this to happen on saving, and have a method to bulk convert existing images. Not sure how far this plugin should be taken? And then there’s also the question of whether such a plugin should also cater for AVIF? … … …

etc · 2024-02-19 21:48:03

jakob wrote #336709:

BTW: do you think there’s an argument for including a selection of basic utility classes in textpattern.css from 4.9 onwards, so that one can achieve tweaks without resorting to inline style attributes? As you rightly point out, the latter will potentially be blocked by CSP settings?

That’s what I’m advocating for, but our theme authors do not seem to agree.

phiw13 · 2024-02-20 05:08:26

Bloke wrote #336708:

Is this something we can build upon for the next major version of core? I’m conscious that auto-generating different file formats is not for everyone, as there are people who prefer to do all their image editing offline.

That is something that has already been discussed here, I think. Minimal idea: an automated process for at least generating alternative formats (jpg, webp, jpgXL) and a (user defined) thumbnail for each format for use on the public side.

The thumbnail used for the admin side (image listings) should be kept separated.

And yes there is a need for letting the user/author fully manage the images needed and excluding some image formats (like .png) from image auto-generation. Figures, pie- and bar-charts, screenshots etc can look really messy.

phiw13 · 2024-02-20 05:25:59

jakob wrote #336709:

I understand the problem. I fiddled a lot to get it work cleanly under .txp-edit-actions – all variants there involve negating some of the effects of the flex-box and margins. With .txp-actions (no edit), there’s no separator line but that’s tolerable, and the links don’t run into each other. Thank you for that pointer. That’s now also included in the revised installer above.

Thank you, I’ll check later.

BTW: do you think there’s an argument for including a selection of basic utility classes in textpattern.css from 4.9 onwards, so that one can achieve tweaks without resorting to inline style attributes? As you rightly point out, the latter will potentially be blocked by CSP settings?

There are already some widgets or building blocks in core that plugins can reuse (.txp-edit-actions …). There is a lack of documentation, possibly some poor naming and possibly some poor styling. It could probably be useful to expand that, plugin authors should speak up here.

As for the styling for those building blocks is it not what the default theme is for¹? Up to alternate theme authors to support that. I absolutely don’t see the use for a separate stylesheet for some “core widgets / utility classes / …”.

–^–

¹ Unfortunately, it does not help much if the default theme is poorly or not-at-all maintained.

Last edited by phiw13 (2024-02-20 05:26:17)

Myusername · 2024-02-22 11:34:57

I developed this small plugin, and it automates the entire process of generating and deleting webp images. It can convert both images and thumbnails, whether they are generated automatically(if there’s already a width or height size defined in the prefs) or manually through the create button; it can also generate a webp image if you upload a thumbnail different from the original image directly through the upload button. I tried to consider all possibilities, but I might have missed something. I’m also not great at handling errors, so please excuse the quality of the code, and feel free to tweak and improve it if you’d like.

I attempted to pay attention to gif format images, but I really couldn’t figure out why they weren’t being converted, so I just ignored the existence of .gif images.

Last edited by Myusername (2024-02-22 11:39:27)

jakob · 2024-02-23 08:49:16

Myusername wrote #336720:

I developed this small plugin, and it automates the entire process of generating and deleting webp images. It can convert both images and thumbnails, whether they are generated automatically(if there’s already a width or height size defined in the prefs) or manually through the create button.

Thank you for developing this. I’ll try it out as soon as I can, but it looks like it does what you originally wanted and automatically adds webp files where available.

Textpattern CMS

Textpattern CMS support forum

#25 2024-02-19 05:58:43

Re: Convert images to .webp

jakob wrote #336703:

#26 2024-02-19 06:48:42

Re: Convert images to .webp

#27 2024-02-19 07:06:30

Re: Convert images to .webp

phiw13 wrote #336706:

#28 2024-02-19 15:48:44

Re: Convert images to .webp

phiw13 wrote #336706:

#29 2024-02-19 21:48:03

Re: Convert images to .webp

jakob wrote #336709:

#30 2024-02-20 05:08:26

Re: Convert images to .webp

Bloke wrote #336708:

#31 2024-02-20 05:25:59

Re: Convert images to .webp

jakob wrote #336709:

#32 2024-02-22 11:34:57

Re: Convert images to .webp

#33 2024-02-23 08:49:16

Re: Convert images to .webp

Myusername wrote #336720:

Board footer