Wow!

[impactfactory]

Im using the imageresizer Plugin but I confronted some limitations (responsive focus area for cropping / more modern formats / ratio erros in lighthouse /user uploaded images f.e.). I hope this plugin will be able to solve it!!

I could help with translation en-de as I found the image functionalities really really crucial for a cms.

[helmutkaufmann]

Im using the imageresizer Plugin but I confronted some limitations (responsive focus area for cropping / more modern formats / ratio erros in lighthouse /user uploaded images f.e.). I hope this plugin will be able to solve it!!

I could help with translation en-de as I found the image functionalities really really crucial for a cms.

Good afternoon. I am not sure this will solve all of your challenges - but if you let me know what you need, I can check if I can help you with.

Translation... Ja, gerne.

[impactfactory]

Cool, lets see.

1. Would be nice to have one plugin that solves it all. Now it would need two to three plugins to accomplish this. Never tested it, perhaps they sabotage each other.

2. The editor that writes a blog or a page can upload any image int the mediapool, best in high resolution and defines title and description in multilanguage and the focus point. User is embedding the image directly into his richtext editor and does the alignment, the special size for this situation. The frontend is displaying the image as the newest and most little format possible for the current browser. If its 100% width its showing the focuspoint. (not sure about this)

3. The developer can include images into his twig templates as already with current image resizer is possible. resizing can be defined, together with a picture tag and included media queries several different resolutions can be displayed also different formats. all with html. what is impossible still is defining a focuspoint so the cropping is showing the sujet and not just the center.(imageresizer also already offers filters. just the focusing is lacking and the processing of images that the editors are including into rich text editors)

4. I guess now the correct ratios can be preserved with the picture tag. Its a important thing for the google lighthouse test in order to inhibit screens jumping around during loading.

Here is a sample how I solved it to put a responsiv background image(hero) without having the image defined in css (which is not responsiv and seems to be bad practice for Lighthouse) with picture tag. perhaps crazy, but it loads fast and works on all devices. The original image is 1440x547 Pixel.

`
{# Safari <=14 falls back on img if there is not type attribute present at each line! #}

          <source type="image/jpg" media="(max-width: 280px)" srcset="{{ element.image | media | resize(280, 106, { mode: 'cover' }) }},
                                                                      {{ element.image | media | resize(560, 212, { mode: 'cover' }) }} 2x">

          <source type="image/webp" media="(max-width: 320px)" srcset="{{ element.image | media | resize(320, 122, { mode: 'cover', format: 'webp' }) }},
                                                                       {{ element.image | media | resize(640, 244, { mode: 'cover', format: 'webp' }) }} 2x">

          <source type="image/jpg" media="(max-width: 320px)" srcset="{{ element.image | media | resize(320, 122, { mode: 'cover' }) }},
                                                                      {{ element.image | media | resize(640, 244, { mode: 'cover' }) }} 2x">

          <source type="image/webp" media="(max-width: 360px)" srcset="{{ element.image | media | resize(360, 136, { mode: 'cover', format: 'webp' }) }},
                                                                       {{ element.image | media | resize(720, 274, { mode: 'cover', format: 'webp' }) }} 2x">
          <source type="image/jpg" media="(max-width: 360px)" srcset="{{ element.image | media | resize(360, 136, { mode: 'cover' }) }},
                                                                      {{ element.image | media | resize(720, 274, { mode: 'cover' }) }} 2x">

          <source type="image/webp" media="(max-width: 567px)" srcset="{{ element.image | media | resize(567, 215, { mode: 'cover', format: 'webp' }) }},
                                                                       {{ element.image | media | resize(1134, 430, { mode: 'cover', format: 'webp' }) }} 2x">
          <source type="image/jpg" media="(max-width: 567px)" srcset="{{ element.image | media | resize(567, 215, { mode: 'cover' }) }},
                                                                      {{ element.image | media | resize(1134, 430, { mode: 'cover' }) }} 2x">

          <source type="image/webp" media="(max-width: 768px)" srcset="{{ element.image | media | resize(768, 292, { mode: 'cover', format: 'webp' }) }},
                                                                       {{ element.image | media | resize(1440, 547, { mode: 'cover', format: 'webp' })}} 2x">
          <source type="image/jpg" media="(max-width: 768px)" srcset="{{ element.image | media | resize(768, 292, { mode: 'cover' }) }},
                                                                      {{ element.image | media | resize(1440, 547, { mode: 'cover' })}} 2x">

          <source type="image/webp" media="(max-width: 1024px)" srcset="{{ element.image | media | resize(1024, 389, { mode: 'cover', format: 'webp' }) }},
                                                                        {{ element.image | media | resize(1440, 547, { mode: 'cover', format: 'webp' })}} 2x">
          <source mtype="image/jpg" media="(max-width: 1024px)" srcset="{{ element.image | media | resize(1024, 389, { mode: 'cover' }) }},
                                                                        {{ element.image | media | resize(1440, 547, { mode: 'cover' })}} 2x">

          <source type="image/webp" media="(max-width: 3600px)" srcset="{{ element.image | media | resize(1440, 547, { mode: 'cover', format: 'webp' }) }}">
          <source type="image/jpg" media="(max-width: 3600px)" srcset="{{ element.image | media | resize(1440, 547, { mode: 'cover' }) }}">

          <img type="image/jpg" src="{{  element.image | media | resize(1440, 547, { mode: 'cover' }) }}" class="" alt="Keyvisual" width="1440" height="547">
        </picture>

`

Would love to contribute to such an essential plugin!!