Some changes were made to the ViewHelpers in TYPO3 10 to be able to use them in email templates. These changes should be brought to the drop-in replacements of this extension as well:

TYPO3/typo3@e6e40cd

ImageViewHelper Line 73.

This is necessary since TYPO3 10: https://review.typo3.org/c/Packages/TYPO3.CMS/+/59594/7/typo3/sysext/fluid/Classes/ViewHelpers/ImageViewHelper.php

I like your extension, after including the static tempaltes its working right away, like charm.
As I saw on the documentation the default src attribute should be contained as fallback.
I am using the default configurations and the src attribute is not showing up.

<img 
 srcset="/fileadmin/_processed_/2/0/csm_flowers_01_ae8e56d053.png 400w, 
/fileadmin/_processed_/2/0/csm_flowers_01_d824802bcd.png 600w, 
/fileadmin/_processed_/2/0/csm_flowers_01_d42bc2d4a4.png 800w, 
/fileadmin/_processed_/2/0/csm_flowers_01_e1a70c84e6.png 1000w, 
/fileadmin/_processed_/2/0/csm_flowers_01_c0087add80.png 1200w, 
/fileadmin/_processed_/2/0/csm_flowers_01_4e626efa81.png 565w" 
 sizes="(min-width: 565px) 565px, 100vw" 
 width="565" 
 height="312">

Am I missing something?

Support image file extensions added with TYPO3 10:

TYPO3/typo3@d05ea9f

Currently the maxHeight attribute is ignored when in srcset mode.

We updated all dependencies in our composer file and suddenly there is only the desktop cropVariant used for all breakpoints and sources.

Are there any examples for @2x/3x/... dpi src values?

The exception timestamp in the ViewHelper class is still the same used in the TYPO3 core.

Using Fluid Class Aliases has been deprecated in TYPO3 v9.5.

Instead of \TYPO3\CMS\Fluid\Core\ViewHelper\TagBuilder \TYPO3Fluid\Fluid\Core\ViewHelper\TagBuilder should be used.

When the uploaded image is smaller than the desired width as configured for srcset, upscaled images are still created despite processor_allowUpscaling is set to false. I'm using pixel widths.

Xdebug shows that the processed image's size always equals the candidateSize. Maybe just comparing the desired candidate size widh the image size of the original file is a better approach.

I would expect that the srcset stops at the highest available width (which should be the size of the original file).

Hello,

I discovered, that PNG images have a bad quality. Every generated image looks red. All JPG images work fine.

Tested in TYPO3 9.5

Hello,

I´ve got an TYPO3 8.7.3 installation with your newest SMS extension. Images are shown correctly in Firefox and Chrome but Internet Explorer 11 is having a problem with the img-tag and doesn´t show the image at all. Maybe it´s because the src-attribute (as fallback) is missing?
Could you please fix that issue?

Thanks in advance,
Stefanie

Chrome doesnt Support the Image-Path. How can I solve this ?
Im using sms:media

The idea is to show the user a preview of the image until the real image is loaded.
The image tag could be rendered like this:
<img class="image-embed-item lazyload" src="/fileadmin/_processed_/3/7/image-1_really_small.jpg" data-srcset="/fileadmin/_processed_/3/7/image-1_1d4a98938c.jpg 800w, /fileadmin/_processed_/3/7/image-1_45daa42d81.jpg 1200w, /fileadmin/_processed_/3/7/image-1_c9ff912115.jpg 300w" sizes="(min-width: 800px) 800px, 100vw" width="800" height="500" alt=""> where the image linked in src is just 8x5 px.

This way the html would be valid, the user would see a blurry preview and it could be easily animated to the real image with a lazyload function.

The size of the lazyload fallback image could be set via the options, e.g.
# set the image size of the fallback image when lazyload is active in percent
lib.contentElement { settings.tx_smsresponsiveimages { lazyloadFallbackImageSize = 1 # for 1% } }

Now supported by browsers (not yet Safari) and TYPO3 10 core:

Native lazyloading via loading="lazy". https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading

I believe there is no placeholder functionality in the standard, though.

So far I would expect multiple src/file settings so we could use another image for a specific breakpoint but this is not possible in the backend. The viewhelper justs uses one file relation / src for all spurce tags.

And I do not mean the different dpi versions. Think about totally different file references per source.

I would like to use a different Partial template (in order to get rid of the width attribute, which I find superfluous) and use this typoscript:

lib.contentElement {
    // templateRootPaths.110 = EXT:theme/Resources/Private/Extensions/fluid_styled_content/Templates/
    partialRootPaths.110 = EXT:theme/Resources/Private/Extensions/fluid_styled_content/Partials/
    // layoutRootPaths.110 = EXT:theme/Resources/Private/Extensions/fluid_styled_content/Layouts/
}

The TypoScirpt browser does recognize the template path, where there is a Media/Rendering/Image.html file structure. However, sms-responsive-images is still rendering from its own file...

Am I doing something wrong here?

BTW: Typo3 8.7.22, sms-responsive-images 1.2

Hi,
If i enable lazyload from constant editor then it adds data-srcset attribute which is fine, but it doesn't add lazyload class to the img tag. i have to add it via typoscript using lib.contentelement.settings.responsivexyz.class = lazyload. i think most of the lazyload libraries work with lazyload class so when lazyload is enabled from the constant then data + class both things should be done.

The extension should provide a setting (e. g. in TypoScript constants) to include the picturefill polyfill automatically.

I want to use the picture-tag in combination with the crop variants. But unfortunatelly there is no documentation about how to do this. I defined two crop variants according to the links you provided. But in the frontend it still don't show any picture-tag.
I guess I have to fill in the lib.contentElement.settings.tx_smsresponsiveimages.breakpoints,
but how?
I tried this:
lib.contentElement.settings.tx_smsresponsiveimages.breakpoints = {0: {'cropVariant': 'default', 'media': '(min-width: 1000px)', 'srcset': '1000, 1200, 1400, 1600'}, 1: {'cropVariant': 'mobile', 'srcset': '400, 600, 800, 1000, 1200, 1400, 1600'}}
But it shows an error message.
So please can you write a short description, how to use the picture-tag?

When using the ImageViewHelper like this

<sms:image image="{file}" breakpoints="

this HTML gets output:

<picture>
  <source srcset="..." media="..." sizes="...">
  ...
  <img srcset="..." ...></picture>
</picture>

IMHO the <img> tag should have src= instead of srcset=

In the current way IE11 does not display the image.

In ImageViewHelper line 76:
\TYPO3\CMS\Fluid\Core\ViewHelper\Exception can be replaced with \TYPO3Fluid\Fluid\Core\Exception

Is it possible to add the src-attribut to viewhelper? it causes an error on https://validator.w3.org "Element img is missing required attribute src."

Currently, the examples in the manual show solutions with the f:image viewhelper. But the most commonly used content element is most likely textmedia, which employs the "gallery" functionality.

It is totally unclear (from the manual's description) how to use - that is: modify - you extension with textmedia and different scenarios.

Also, it most probably would be great to see some examples for how to use this extension with news or any other popular extension.

It is not good to always assume good TYPO3 users (something that happens through the TYPO3 community more and more...). The manual needs to explain as clearly as possible on how to incorporate the functionality the extension provides.

Thank you!

The default f:media file="{file}" works and displays the preview of the pdf file but sms:media file="{file}" does not work

Hi!

I just updated to v2.0.2 and keep getting this error:
get_class() expects parameter 1 to be object, null given in /[path]/typo3_src-9.5.21/typo3/sysext/fluid/Classes/ViewHelpers/MediaViewHelper.php line 110

Upon reading the documentation I came accross the line that mentions that the namespace changed:
The PHP namespace has switched from SMS\SmsResponsiveImages to Sitegeist\ResponsiveImages, so if you extended one of the provided PHP classes, you need to adjust this.

But looking at the image.html in this extension, the namespace is still in the old fformat:
<html xmlns:sms="http://typo3.org/ns/SMS/SmsResponsiveImages/ViewHelpers" data-namespace-typo3-fluid="true">

Also, just updating from a v1 to a v2 does NOT remove the Demo folder. So reading the docu and comparing with the existing files in the extension is confusing :-)

I use these image settings in CE:

Without sms-responsive-images, i have one row centered with images of width 500px, as configured.

If i activate sms-responsive-images, i get one row centered with images, each with width 235px.

Looking to source, the images have 500px in html-tag:
<picture><source srcset="https://loop.min-themes.de/fileadmin/fotos/samples/900/20080601-NSC_4427.jpg 1000w, https://loop.min-themes.de/fileadmin/fotos/samples/900/20080601-NSC_4427.jpg 1200w, https://loop.min-themes.de/fileadmin/fotos/samples/900/20080601-NSC_4427.jpg 1400w, https://loop.min-themes.de/fileadmin/fotos/samples/900/20080601-NSC_4427.jpg 1600w, https://loop.min-themes.de/fileadmin/fotos/samples/900/20080601-NSC_4427.jpg 1920w" media="(min-width: 768px)" sizes="(min-width: 500px) 500px, 100vw"><source srcset="https://loop.min-themes.de/fileadmin/_processed_/d/5/csm_20080601-NSC_4427_abf878acc8.jpg 800w" media="(min-width: 538px)" sizes="(min-width: 500px) 500px, 100vw"><source srcset="https://loop.min-themes.de/fileadmin/_processed_/d/5/csm_20080601-NSC_4427_aeb738e5ce.jpg 500w" media="(max-width: 534px)" sizes="(min-width: 500px) 500px, 100vw"><img class="image-embed-item" srcset="https://loop.min-themes.de/fileadmin/_processed_/d/5/csm_20080601-NSC_4427_0740aa52e5.jpg" width="500" alt=""></picture>

Do you see where the problem is?

thx, greets

Idea:

Add a preload-parameter to s:image viewhelper. If set, a link-header to preload the image is sent to the client. Idea: https://addyosmani.com/blog/preload-hero-images/

• collect images-to-preload (a registry for example)
• finally add link header(s) for each registered image in a dedicated middleware

If image path contains characters like space or comma, SMS\SmsResponsiveImages\Utility\ResponsiveImagesUtility::generateSrcsetAttribute will generate invalid srcset because it does not url-encode image paths. In my case the result looked like:

srcset="/fileadmin/_processed_nextcloud_/c/7/csm_Foto_Airsec_165_97b5ee854c.jpg 160w,
/fileadmin/_processed_nextcloud_/c/7/csm_Foto_Airsec_165_a32d92bd66.jpg 320w,
/fileadmin/_processed_nextcloud_/c/7/csm_Foto_Airsec_165_7c7c4221e7.jpg 480w,
/fileadmin/_processed_nextcloud_/c/7/csm_Foto_Airsec_165_b42af5e0cf.jpg 640w,
/fileadmin/_processed_nextcloud_/c/7/csm_Foto_Airsec_165_7b9986c8a5.jpg 683w,
http://domain.test/typo3temp/fal_webdav/4/A/B/Keller, _Archive, _Lager/Foto_Airsec_165_6d4bd6dd2014c984cfa0ba40de5c420a62976bd2.jpg 943w"

Look at http://domain.test/typo3temp/fal_webdav/4/A/B/Keller, _Archive, _Lager/Foto_Airsec_165_6d4bd6dd2014c984cfa0ba40de5c420a62976bd2.jpg.

Pity I didn't notice before 2.0 was released.

.typoscript is the new standard file extension. .ts anyway clashes with TypeScript.

Add an attribute to the ViewHelpers to switch from src to data-src and srcset to data-srcset to allow client-side lazy loading of images.

It should be possible to specify/overwrite the image quality option. Ideally, it should be possible to specify multiple qualities, e. g. to generate lower-quality for high dpi images.

Does the new async attribute for images make client-side lazy loading redundant?

https://www.chromestatus.com/feature/4897260684967936

The current ViewHelpers seem to behave differently than the core ViewHelpers when errors occur (e. g. when an image doesn't exist).

The extension adds a few TypoScript options to lib.contentElement which should be explained in the documentation. How to specify those options per column should also be mentioned:
https://techblog.sitegeist.de/responsive-images-with-typo3-8-7/#comment-4

The extension seems to conflict with EXT:fluid_styled_responsive_images, which should be added to the conflicting extensions list.

Hi,

first of all, thank you for your awesome extension!

I want to be able to configure the crop variants not globally, but specific to multiple different Fluid content elements (FCEs).

Like for example:

• FCE A has crop variants 16:9 and 3:2
  but
• FCE B has crop variants 16:9 and 1:1 (but 3:2 should not be visible/usable, and vice versa)

So i can not just do it like in the provided demo for altering the page media:

// Demo plugin: Enable three fixed crop variants for the page media field
$GLOBALS['TCA']['pages']['columns']['media']['config']['overrideChildTca']['columns']['crop']['config'] = [
    'cropVariants' => [
        'default' => [
            'disabled' => true
        ],
        'mobile' => [
            'title' => 'Mobile',
            'allowedAspectRatios' => [
                '1:1' => [
                    'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.1_1',
                    'value' => 1
                ]
            ],
        ],
        'tablet' => [
            'title' => 'Tablet',
            'allowedAspectRatios' => [
                '4:3' => [
                    'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.4_3',
                    'value' => 4 / 3
                ]
            ],
        ],
        'desktop' => [
            'title' => 'Desktop',
            'allowedAspectRatios' => [
                '16:9' => [
                    'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.16_9',
                    'value' => 16 / 9
                ]
            ],
        ]
    ],
];

I guess I need to configure it for table tt_content somehow, but conditionally in respect to the content of the column tx_fed_fcefile, which will be something like Vendor.Extname:ContentElementName.html in case of the row being a Fluid content element record.

Is there maybe any built-in way to solve this, or does someone have an idea how to approach this task?

Typo3 9.5.13
plugin: 1.3.0
The plugin creates enlarged images when the srcset values are larger than the width of the original image. The same happens when I use the width or maxWidth parameter. I would expect that if the width of the original is exceeded, the original or image with the width / maxWidth parameter should be returned. In installtool I have processor_allowUpscaling disabled.

After releasing the new version to TER, the install procedure should be tested, especially if there are problems with the MD5 hash.

there are no examples how to use sms_responsive_images in typoscript in FILES: renderObj < tx_smsresponsiveimages wont work, please add!

Hi,
I used this extension with my website but it's not working in internet explore properly. Becuase Img tag doesn't contain the Src attribute that s the reason. It's only work with srcset and internet explore doesn't support with srcset. for example:

There's an issue while rendering the images only with srcset/picture attribute in IE11.
https://caniuse.com/#feat=srcset
https://caniuse.com/#feat=picture

The page isn't loading the pictures because of the incompatibility of srcset/picture. Is there a fallback built in the extension or rather how is it possible to say TYPO3 to render a fallback image?

Currently, the ImageViewHelper only partially supports the c and m suffixes for manually specified height and width.

One possible solution could be to convert the specified values to a crop area object.

Hi Folks,

after the update on v2.0.1 the sms viewhelper fires errors if you try to render core or extbase Filereference Objects. In 1.3 it works fine.

Uncaught TYPO3 Exception: #1517766588: You must either specify a string src or a File object. | TYPO3Fluid\Fluid\Core\Exception thrown in file /xxx/typo3conf/ext/sms_responsive_images/Classes/ViewHelpers/ImageViewHelper.php in line 76.

Hello,

Thanks for this plugin, which works perfectly with Typo3 8.7 here! Unfortunately, it doesn't seem to work with Typo3 9.1 anymore.

It complains about this->objectManager to be null. I have replaced this call by a new ObjectManager instance, but there are still errors.

In case I can provide more information, please let me know.

In the manual, shouldn't it say "max-width: 800px" in the manual, where you talk about using the sizes-parameter for the first time (in the text above 4th code block)?

Chapter "What does it do?"

With the sizes attribute, one can specify how big the image will be in different 
screen sizes (as defined by the responsive design of the website). In the 
example, **the image would be at most 800 pixels wide**, so the 1000 pixels 
image would never be loaded (except on high dpi screens):

<img
   src="fallback.jpg"
   srcset="
      [email protected] 400w,
      [email protected] 600w,
      [email protected] 800w,
      [email protected] 1000w
   "
   sizes="(**min-width: 800px**) 800px, 100vw" // <-- max-width?
   alt="alternative text"
/>

So far it seems there is no f:uri.image replacement.

Might be useful to also provide a VH to generate responsive background images with the needed breakpoint CSS.

Images can be cropped to fit a certain aspect ratio. To display a placeholder image with a correct aspect ratio, the crop area should be used. Currently the original size is used. This helps to improve Cumulative Layout Shift.

<f:image src="{resources.0.url}" treatIdAsReference="false" /> works but not with the sms:image VH as the image parameter is registered as object.