I am trying to have TYPO3 10.4.12 generate webp images as described in the example on this page: https://docs.typo3.org/c/typo3/cms-core/master/en-us/Changelog/10.3/Feature-90416-SpecificTargetFileExtensionInImage-relatedViewHelpers.html
{f:uri.image(image:images.0, fileExtension: 'webp')}
I am using GraphicsMagick and with gm version I get
WebP yes
and converting a picture to webp manually via command line works.
Also cwebp is installed.
If I try fileExtension: 'png' it generates a png file so the parameter seems to work.
However the image does not get converted, instead the original unprocessed image gets referenced.
The main problem seems to have been that I needed to add webp to the [GFX][imagefile_ext] configuration.
Additionally sometimes it only worked after removing all generated images under Remove Temporary Assets in the Maintenance section.
Yes that is true, webp must be added to image file list. In addition we faced another problem with webp. If you create an image as jpg with a width and after that the same image as webp also in the same width, only the jpg was generated. That's why we added 1px to the jpg images.
Now nearly all picutures are delivered in a modern way on https://www.in2code.de
Related
I’m using capacitor pdf-generator plugin to create a pdf. I managed to do so as long as the html code is limited to non image tag, code in which I inject some dynamic data by nesting variable using ${ }.
Now, my aim is to bind the src attribute of an ```img`` tag to a variable so that I can change the logo displayed in the created PDF.
Where I fail: what appears on the PDF is a white space with dashed borders (check picture attached). So I guess that the path must be correct because if not it would show the missing icon (issue I went through before I could format correctly the path).
Anyone who already had that trouble?
Finally bypassed this issue by storing the base64 data when selecting a logo and using it directly in the img tag.
<img src="data:image/png;base64,${base64data} " />
You can convert the images to base64 here https://www.base64-image.de/
then add the codes directly to your image tag
TinyMCE 4: I have implemented the image file/upload from local source, using php to save the uploaded file into a directory, with tinyMCE referencing this image. Works fine. This leaves a simple html text file to save in the database.
However, I see that the user can just cut and paste an image directly into the textbox, resulting in the image showing up and becoming a base64 image string, which defeats the purpose of storing only html text. Now the text could become extremely long if this base64 image is not prevented.
Is there a way to prevent this image paste action in tinyMCE? Or better yet, a way to automatically convert this paste into an image file and have it stored in the same place as the other images on the fly?
I know I could convert base64 images to a jpg files and store after submitting the form to a php handler, but would seek a simpler answer if possible.
The documentation is your friend for this issue. TinyMCE can certainly help you convert the images on the fly as they are pasted into the editor:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
You can also stop the images from appearing in the first place if that is your preference:
https://www.tinymce.com/docs/plugins/paste/#paste_data_images
In my typo3 7.6.19 Website I want to user the flexslider plugin.
That works fine, my problem is that the image is a cropped one and not the original file I uploaded.
How can I change it to use the original picture?
Thanks in advance
The plugin sets up a TypoScript constant
plugin.tx_wsflexslider.maxwidth=800px
You can modify this value in your TypoScript template (Module Template > Constant Editor > select "PLUGIN.TX_WSFLEXSLIDER"
About your other problem that is artifacts in the reduced image, I think that when resizing an image from 2550px to 800px, it is probable that the quality will be reduced :) You could check those settings in Install Tool >All Configuration > Image Processing [GFX] and see if you can improve them.
A last word: I would not use images of 2550px, it seems that they will be very heavy! I would try to set a compromise (e.g. plugin.tx_wsflexslider.maxwidth=1200px).
You could also evalutate the extension EXT:image_autoresize https://extensions.typo3.org/extension/image_autoresize/
to automatically resize the images when uploading them and limit the weight or dimensions of the images that your editor will upload.
From this answer typo3 uses crop images how can I avoid this I see that (of course) you can also modify the partial that renders the image and avoid using the TypoScript constants at all, but for the reasons I mentioned above, I would not recommend it.
In TYPO3 10.4.x and ws_slider 0.9.8, it was not a constant but:
<f:image image="{item.foregroundMedia.0}" maxWidth="600" />
in
Resources/Private/Partials/Item/Flexslider.html
I have in my Typo3 Content text and image. And i would like to insert a animated gif. I first made it normal, than i recognized that the gif changed to .png files.
After a few test I found the parameter (FE png_to_gif), in the Install Tool.
But when I choose this. The gif files has the path fileadmin/processed but there are no gif files in this directory.
Can anybody help me that i can display my animated gifs ?
Thank you.
If the image you are processing is resized or modified by ImageMagick/GraphicsMagick, all frames of an animation will be lost. Use the orginal size in the frontend to avoid this.
Hi try select "None (ignores all other options)" under Apperance->Quality and Type
gl
Like Merec answered: the animation will be lost trough processing ...
an option is to intervene on the rendering of the fluid-template: in your own extension you overwrite the original fluid-template and find the image-viewhelper the ouputs the image:
This processes the image also when no width or height are given
<f:image image="{imageObject}" />
This without size will not (or use the variable directly)
<f:image src="{imageObject.0.originalResource.publicUrl}" />
(note that an imageobject is often an array, to find that out <f:debug>{_imageObject}</f:debug> or <f:debug>{_all}</f:debug>)
I'm not using any WP cache plug ins. I've noticed that only one png out of the other pngs (and other images) I have on my WP site has a query string attached to it when I look at in Chrome dev tools. It's actually downloaded twice - with and without query string.
The other odd this is that Chrome Dev tools says that the intiator for the png with query string is jQuery. I just include jQuery from Google's CDN, so I'm not changing anything.
Any ideas to why just one of my pngs (why this one?) has a query string attached? Here's what it looks like:
<img src="http://www.mysite.com/wp-content/themes/myTheme/images/slide1Btn.png?1369071380764" alt="">
Please let me know if I haven't included enough information.
Edit
This png is a button on one of the slides I have in a slideshow. I use http://archive.slidesjs.com/ to generate the slideshow. The png images are part of the HTML markup and not generated by the script, however I did find this line in the slides.js code:
// gets image src, with cache buster
var img = control.find('img:eq(' + start + ')').attr('src') + '?' + (new Date()).getTime();
I would like to just have the png load once and just be retrieved from the cache on reloads - like each of the pngs will do on subsequent slides in my slideshow. I'm perplexed as to why it only happens to this png.
It might either be :
some argument for a script that dynamically generates or resizes or processes the image (it does not matter that the url has a .png extension, that doesn't necessarily mean that a png file is served statically)
a "cache breaker" - or "cache buster". This can be used to prevent the browser (sometimes also the server) to get the image from a cache, and force it to get it fresh from the server.
Because in this case this looks as a timestamp (unix epoch in milliseconds), I'd bet for the later.
wordpress generates many of the images dynamically, meaning when you access the png you are calling a server page that generates the png dynamically choosing between different images or based on the query string parameters, like size for exmaple.
200px width image.
http://mysite.com/wp-content/uploads/2013/05/Giant_water_bugs_on_plate.png&w=200&h=446&zc=1&q=100
vs
600px width image
http://mysite.com/wp-content/uploads/2013/05/Giant_water_bugs_on_plate.png&w=800&h=446&zc=1&q=100