Hello,

I need to use some animated gif, so I can't use the autoresize function.

Is there a way to use the image autoresize feature with the exception of GIF images?

Can You give an example what you want to resize : in a Bootstrap-grid pictures are auto resized.

We had a simaliar discussion at this forum-link. (where You find a link to simple-image(for sections : User Juek)

* There are several resize-plugins for jquery (append at the settings.php of the template) and also a autoresize-plugin.

* What You can do with  animated gifs is : Make several sizes at http://gifgifs.com/resizer/ and show them in dependency of the viewport.

* You can make a video out of the gif and do it like cloudinary. :

<video width="320" height="180" autoplay loop muted="muted" poster="https://res.cloudinary.com/demo/image/upload/picture.jpg">

<source type="video/mp4" src="https://res.cloudinary.com/demo/image/upload/picture.mp4">

<source type="video/webm" src="https://res.cloudinary.com/demo/image/upload/picture.webm">

Your browser does not support HTML5 video tag.

<a href="https://res.cloudinary.com/demo/image/upload/picture.gif">Click here to view original GIF</a> </video>

---

* There is a tool Gifsicle - for experts to install an system level (evtl. slow)

* I have no time to make a plugin with php ! (Possible)

Typeseter default settings auto resize all page images. (See Settings -> Image-> Create optimized versions of scaled down images.)

If I put a big picture, and I set 80x80 pixels, Typesetter creates a scaled down 80x80 pixel image; this way page loading of typesetter is incredible fast.

My problem is that this default mechanism breaks animated gifs (and probably animated png), the shrinken image created by Typesetter is always fixed type without animation.

At the present I set OFF this Typesetter feature, but I would to have it on. I just want to filter this feature just on JPG images.

 

* The page loading is so fast , because there is a file for every single page stored (under_data), and no database-access is necessary. Typesetter compresses also js and css (when hooked at) , and together with mode-deflate in the .htaccess it is so fast.

The zip- compression of images is just 10-20%, and the thumbnails are a different theme, because they are not shown in the final pages.

Typesetter must transfer the whole image. It doesnt make big images out of the 80*80 thumbnails(like 80*80px and 5000dpi - the  browser does the rest ? NO - The browser had not information to resize to 400*400 and then 200dpi).

A standard is img { max-width: 100%; width: 500px;} // assume this is the default size

You can use other methods with CSS  as i described in the above discussion-link :

1. add .img-fluid { max-width: 100%; height: auto; margin:5px; } class -- to the custom.css (layout editor)

2. then adjust the image - size for the lg mode and notice the height  - and then delete any entries like width, height, vspace, align ( in ckeditor ->image)

3. in the ckeditor- advanced mode - tab under stylesheet-classes add :   img-fluid mx-auto d-block (bootstrap)

4. then add the above lg - height to max-height : xxx px; (i.e. 300px) into  the line beyond

( most of it bootstrap-people could have done - integrated into img-fluid  except point 4)

For people without bootstrap 4 a class like expanded -> img-fluid could solve that too.

You can of course add Javascript to the settings.php of the template(jquery plugins etc.).

The above Simple Image (zip) has such features for the Typesetter - sections.

Finally some links to this theme (image resizing belongs to the most essential things of webdevelopment)

•  W3C responsive images
• Kulturbanause responsive images (with a php plugin)
• Mozilla Responsiveimages
• Css tricks responsive images

P.s. If - as in Your site - the text is a bit too near to the images - You can give the images a horizontal space or the div a <div class=table">  div.table td{padding-left:3px;} - or similar

 

P.S. At Responsive breakpoints You can upload Your picture and generate different sizes , and then in Your sourcecode :

<picture>

<img  sizes="(max-width: 1400px) 100vw, 1400px" srcset="

pexels-photo-235985_bfl4sp_c_scale,w_200.jpg 200w,

pexels-photo-235985_bfl4sp_c_scale,w_624.jpg 624w,

pexels-photo-235985_bfl4sp_c_scale,w_846.jpg 846w,

pexels-photo-235985_bfl4sp_c_scale,w_1018.jpg 1018w,

pexels-photo-235985_bfl4sp_c_scale,w_1181.jpg 1181w,

pexels-photo-235985_bfl4sp_c_scale,w_1325.jpg 1325w,

pexels-photo-235985_bfl4sp_c_scale,w_1397.jpg 1397w,

pexels-photo-235985_bfl4sp_c_scale,w_1400.jpg 1400w"

src="pexels-photo-235985_bfl4sp_c_scale,w_1400.jpg"

alt="">

</picture>