Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
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
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
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
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
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
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
Pages: 1