Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2021-02-22 11:22:11

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

Trim the file extension off image tag

Hi Textpattern folks, can someone let me know the trim regex needed to remove the file extension from image tags?

For example I want to use the following code snippet, where in lines 2 and 3 the trim="" is filled out correctly so that the file extension is stripped and the .avif and .webp are appended respectively.

Note I’m also using the (new in 4.8.5) <txp:image_info type="mime" /> in line 4 too, for interest.

<picture>
    <source srcset="<txp:smd_thumbnail_info item="url" trim="" />.avif, <txp:image_url trim="" />.avif 2x" type="image/avif" />
    <source srcset="<txp:smd_thumbnail_info item="url" trim="" />.webp, <txp:image_url trim="" />.webp 2x" type="image/webp" />
    <source srcset="<txp:smd_thumbnail_info item="url" />, <txp:image_url /> 2x" type="<txp:image_info type="mime" />" />
    <img loading="lazy" width="450" height="300" alt="<txp:image_info type="alt" />" src="<txp:smd_thumbnail_info item="url" />">
</picture>

Cheers!

Offline

#2 2021-02-22 18:45:54

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,469
Website GitHub Twitter

Re: Trim the file extension off image tag

Hi Phil.

Try this:

trim="/(.*)(\..*)/"

Online test: https://regex101.com/r/DlZMrb/1/

Last edited by Pat64 (2021-02-25 07:02:37)


Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

Offline

#3 2021-02-22 20:07:26

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

Re: Trim the file extension off image tag

Pat64 wrote #329031:

Try this: trim="(.*)(\..*)"

Presumably you then also need replace="S1" with that.

Do those attributes work with every tag?

philwareham wrote #329027:

Hi Textpattern folks, can someone let me know the trim regex needed to remove the file extension from image tags?

If you need to have just match, perhaps you can just go for the predictable file types:

trim="/\.(gif|png|jpe?g)$/"

For example I want to use the following code snippet, where in lines 2 and 3 the trim="" is filled out correctly so that the file extension is stripped and the .avif and .webp are appended respectively.

Interesting you should mention that. Now that webp is coming to txp4.9, I thought maybe avif could be included too. This article on equivalent avif and web settings for common jpeg settings crossed my radar just yesterday (yours too perhaps?) and that got me intrigued. However it seems there is not yet a php library to handle avif resizing etc. just yet.

Note I’m also using the (new in 4.8.5) <txp:image_info type="mime" /> in line 4 too, for interest.

Can you explain what that does?


TXP Builders – finely-crafted code, design and txp

Offline

#4 2021-02-22 23:14:45

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

Re: Trim the file extension off image tag

WebP support in Textpattern is actually in 4.8.5, which should be released any day now. However I’m investigating in 4.9 how we can have multiple file formats per image entry in the database (say you could have a JPEG and WebP version directly in the admin panel with the same ID).

For now, my stopgap is the code snippet I posted in OT above. It means I’ll have to manually upload a WebP and AVIF file via FTP along with the image actually uploaded into Textpattern (be that a PNG, JPEG, whatever). But since I like to manually optimise images anyway that’s not a big problem for our official sites, that I manage anyway.

I’m using Squoosh to generated WebP and AVIF images from my original source images so not to degrade quality.

In the code snippet above the reason line 4 has a dynamic mime type is because that file could be one of three formats: PNG, JPEG, or (unlikely) GIF.

Line 5 is the fallback image that gets replaced by ones in source depending on what browser supports, top priority given to AVIF, then WebP.

Hope that explains it!

Offline

#5 2021-02-23 03:16:22

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,469
Website GitHub Twitter

Re: Trim the file extension off image tag

The regexes above match your request (a target for webp and avif file extensions only: https://regex101.com/r/DlZMrb/2).

Phil, I was first intrigued by your code because Textpattern can’t serve multiple file formats. For the moment (seems that’s projected into 4.9 version).

I’m using webp images for my latest project and here is how I included it (with other png) by manually upload corresponding image (generated by Squoosh, too) :

<txp:php>
/**
 * If files exist, create image source for webp format
 */
$pic = image_info(array('type'=>'id')).'.webp';
$webp = get_pref('path_to_site').'/images/webp/'.$pic;

if (file_exists($webp)) {
	echo '<source srcset="../../images/webp/'.$pic.' 963w, ../../images/webp/small/'.$pic.' 320w" type="image/webp">';
}

</txp:php>

Last edited by Pat64 (2021-02-23 04:03:26)


Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

Offline

#6 2021-02-23 13:23:56

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

Re: Trim the file extension off image tag

Just a note to say Jakob’s trim suggestion worked thanks, the code is live on our Textpattern.com site (which runs Textpattern 4.8.5-dev for now) – for the showcase images on homepage and showcase landing. Saves quite a few KBs.

Offline

Board footer

Powered by FluxBB