rolandtoth / markupsrcset Goto Github PK

I just installed you updated module, but unfortunately it does not work, because I get a fatal error:
<b>Fatal error</b>: Uncaught Error: Call to undefined function ProcessWire\stringToArray() in .../site/modules/MarkupSrcSet/MarkupSrcSet.module:123

Btw, i really welcome your api changes!

It would be nice if there would be a way get the $img->srcsetUrls array in the same order as defined in the $img->srcset('900,*2,/2') call.

Another suggestion would be to use 'smallest' and 'largest' instead of 'first'/'last'.
I forked your repo and implemented my suggestions here:
phlppschrr@71d30bc

Background to this request is, I want to use lazysizes like described here:
https://github.com/aFarkas/lazysizes#modern-transparent-srcset-pattern where it is recommended that the first image candidate in data-srcset matches the src fallback image.

With these changes I could do it like this:

<img
    data-srcset="<?= $img->srcset('900x0,*2,/2') ?>"
    src="<?= $img->srcsetUrls[0] ?>"
    srcset="<?= $config->srcsetFallbackDataUri ?>"
    alt="<?= $img->description ?>"
    data-sizes="auto"
    class="lazyload" />

Hi,

i wanted to use the MarkupSrcSet module but noticed it's output differs from the specification of srcset and sizes.

The w descriptor should specify the width of the image and not a breakpoint. See https://ericportis.com/posts/2014/srcset-sizes/

srcset takes a comma-separated list of URLs for the available versions of the image; each image’s width is specified using the w descriptor. So if you “Save for Web…” at 1024 × 768, mark that source up in srcset as 1024w.

With the implementation right now, the browsers will assume the wrong image dimensions.

I think, the breakpoint setting could be left out and an option for the sizes attribute for each preset should be introduced.

this could look like this:

{
    "hero": {
        "srcset": [
              [360, 270], [640, null], [1080, null], [1920, null]
       ],
        "sizes": "(min-width: 36em) 33.3vw, 100vw",
    }
}

So the output would look like this:

<img 
    src="image.360x0.jpg" 
    srcset="image.360x0.jpg 360w, image.640x0.jpg 640w, image.1080x0.jpg 1080w, image.1920x0.jpg 1920w" 
    sizes="(min-width: 36em) 33.3vw, 100vw" 
    alt="">
```

What do you think?

Hello! would it be possible to add example html outputs to your readme?

Moving to PHP 8.x I get a ton of warnings like this:

Warning: ProcessWire\MarkupSrcSet::ProcessWire\{closure}(): Argument #1 ($item) must be passed by reference, value given in /Users/bla/Sites/bla/site/modules/MarkupSrcSet/MarkupSrcSet.module on line 176

Removing the & from L. 174
$currentSize = array_map(function (&$item) use ($multiplier) {
to
$currentSize = array_map(function ($item) use ($multiplier) {

seems to fix it, but I'm not really sure if what I'm doing here (changing from reference to value), has unforseen consequences. However the resulting HTML is identical.