del

In some cases it is crucial to be able to iterate over an array of assets. For instance if you want to retrieve a title or alt tag. As well I mostly need more control over the img tag. For instance to add custom data-attributes for lazy-loading. Is this possible?

My current implementation for responsive images looks something like this.

---
slider:
  - /assets/images/image-1.jpg
  - /assets/images/image-2.jpg
---

{{ assets:slider }}
    <img data-src="{{ glide:url preset="1000" }}" class="swiper-lazy"
        data-srcset="
            {{ glide:url preset="1400" }} 1400w,
            {{ glide:url preset="1200" }} 1200w,
            {{ glide:url preset="1000" }} 1000w,
            {{ glide:url preset="800" }} 800w,
            {{ glide:url preset="600" }} 600w,
            {{ glide:url preset="400" }} 400w"
        sizes="
            (min-width: 1921px) 30vw,
            (min-width: 1800px) 40vw,
            (min-width: 1200px) 50vw,
            (min-width: 940px) 60vw,
            (min-width: 640px) 85vw,
            100vw"
        title="{{ title }}"
        alt="{{ alt }}">
{{ /assets:slider }}

As well I wonder if you could add a settings file for image quality, min and max sizes and the like.

If you select an image with parentheses, it throws the following error:

Method Illuminate\View\View::__toString() must not throw an exception, caught ErrorException: file_get_contents(/home/[webserver]/public_html/img/containers/main/./abstract-ai-art-373543-%281%29.jpg/cc2541df24434bbae9bae97dd2c96867.jpg): failed to open stream: No such file or directory (View: /home/[webserver]/public_html/site/addons/ResponsiveImg/resources/views/img.blade.php)

• Example of using inside arrays
• Quality option
• Data attribute option (once released )

I set up everything according to docs, also serve cached assets directly.
But receiving an error:

FatalErrorException in Parser.php line 789:
Method Illuminate\View\View::__toString() must not throw an exception, caught ErrorException: getimagesize(): Filename cannot be empty (View: /home/vagrant/code/XXXXXXXXXX/site/addons/ResponsiveImg/resources/views/img.blade.php)

The cached image exists and the original file path is screenshots/unnamed.jpg

I followed the instructions on how to use this addon, but can't get it to work. It throws the following error. statamic-2018-09-03.log

Great addon! Though it doesn't seem to work for PNG images (since it gets transformed to JPGs in the output), is that a bug or just not supported (yet)?

We use transparent PNGs massively on our site, so the addon will only be usable when this is supported.

Thanks in advance!

This would be an awesome tool to use for rendering background images. More than happy to look into what would be required if you're happy for a PR.

So this is what i see, any idea's whats wrong?

Is it possible to somehow use this plugin with the picture tag for art direction? My current implementation looks like this:

<picture>
   <source media="(min-width: 940px)"
      srcset="
         {{ glide:url preset="2500x1000" }} 2500w,
         {{ glide:url preset="2000x800" }} 2000w,
         {{ glide:url preset="1800x720" }} 1800w,
         {{ glide:url preset="1600x640" }} 1600w,
         {{ glide:url preset="1400x560" }} 1400w,
         {{ glide:url preset="1200x480" }} 1200w,
         {{ glide:url preset="1000x400" }} 1000w"
      sizes="100vw">
  <source media="(min-width: 0px)"
      srcset="
         {{ glide:url preset="1600x1600" }} 1600w,
         {{ glide:url preset="1000x1000" }} 1000w,
         {{ glide:url preset="800x800" }} 800w,
         {{ glide:url preset="600x600" }} 600w,
         {{ glide:url preset="400x400" }} 400w"
      sizes="100vw">
  <img src="{{ glide:url preset="1800x1000" }}" title="{{ title }}" alt="{{ alt }}">
</picture>

This defines two different art directions of the same image. The mobile source starting at 0px has a different aspect ratio than the source starting at 940px. The images provided in srcset are cropped to the appropriate aspect ratio and size using Glide. This is to eliminate unnecessary picture excess to optimize file size.

There's two issues I see here. Number one being the ability to crop the images using Glide. This is related to issue #7 and pull request #11.

Issue number two is to make it possible to use the picture tag instead of the img tag. Maybe this can be done in a simple way with a parameter which disables the output of the full img tag and only outputs the srcset and sizes. And for the fallback img outside of source, you can manually define a fallback.

Something like this:

<picture>
   <source media="(min-width: 940px)"
       {{ responsive_img:image img-tag="false" glide="{'w':2500,'h':1000,'fit':'crop_focal'}" }}>
  <source media="(min-width: 0px)"
       {{ responsive_img:image img-tag="false" glide="{'w':1600,'h':1600,'fit':'crop_focal'}" }}>
  <img src="{{ glide:url preset="1800x1000" }}" title="{{ title }}" alt="{{ alt }}">
</picture>

How does this sound? Is this something that's doable?

I'm trying to display an image from a bard field with the following code:

{{ responsive_img:image }}

Serve Cached Images directly is enabled and when opening the page it does generate the images in the right folder. I still get the following error.

Method Illuminate\View\View::__toString() must not throw an exception, caught ErrorException: file_get_contents(/work/blog/https://myblog.test/img/containers/main/./office-view.jpg/0798d4bb7bb33faeb1795ccd290e88f4.jpg): failed to open stream: No such file or directory (View: /work/blog/site/addons/ResponsiveImg/resources/views/img.blade.php)

As highlighted, somehow the domain name https://myblog.test get's added in between the path which i think could be the error. I don't know why this happens. Am I missing something? I'm running the page locally on Laravel Valet

Hi.
Im trying to use ResponsiveIMG but im having a issue, i cant get to load the assets that are choose when we edit the page on the backoffice.
This is my responsive code
{{ responsive_img:image_bundleitem }}

I can load the image normally with the img tag
and if i place for example this on top of the template file

---
banner: /assets/services/destaquefatkiller.jpg
---

{{ responsive_img:banner }}

and if i use then this on the code it works

Can someone help me please

Wrong version in meta.yaml version: 1.1.3 instead of version: 1.1.4

Maybe I'm missing something, but I've got a project that has a container size of 1152px.

I've then split that into 3 columns, each 394px wide. I'm seeing the Responsive Image plugin set a sizes attribute of 53vw. Maybe my understanding of viewport width is off, but isn't that too much?

I'm loading an image that is 1333px wide, for a column that is less than 400px wide.

Thanks for the hard work, great addon!

Hi,

Great add on, thank you!

Is there a way we can use this with theme images?

Thanks

I just updated the plugin to the latest version and didn't pay attention, that my colleagues manually adjusted this line

like this

- $default = ['fm' => 'jpg', 'q' => $this->quality];
+ $default = ['q' => $this->quality];

this first resulted in a very slow page, as dozens of images were regenerated and afterwards I had a lot of images with white backgrounds instead of transparency.

I think it would make sense to either remove that default setting or make it configurable in a config file which is not overwritten on update.

Add global settings for certain options:

• data-attr
• max-width (once released)
• scaling-rate (once released)

I have a site configured to use an S3 bucket to manage assets. Serving cached images directly works just fine with a standard glide tag, but for some reason, the responsive_img tag doesn't generate anything. No markup whatsoever. Is this a known issue with S3-based assets?

It would be amazing to have access to the glide parameters. The most common use in my case would be to set the width and height of a picture and use the Statamic focal point feature.

As well it would be amazing to have presets (similar to the glide presets) where you could set everything from width, crop, quality, scaling-rate etc.

This addon requires image_manipulation_cached: true. Because the cache gets generated the first time an image is viewed, it is possible to run into a server timeout. Especially if you have a lot of new images on a page. There should be a way to generate the assets cache in advance. With Glide you can just call php please assets:generate-presets.