Responsive Images for Statamic 3.
This Addon provides responsive images inspired by the Spatie Medialibrary Package.
Require it using Composer.
composer require victorycto/nexus-statamic-responsive-images
Publish the config file:
php artisan vendor:publish --tag="responsive-images-config"
Responsive Images will generate responsive versions of the images whenever a new asset is uploaded. These presets are determined by this package and not by your own Glide presets.
We generally recommend setting statamic.assets.image_manipulation.cache
to false
so only images actually requested by a browser are generated. The first time the conversion is loaded will be slow, but Glide still has an internal cache that it will serve from the next time. This saves a lot on server resources and storage requirements.
Pass an image to the nexusresponsive
tag.
{{ nexusresponsive:image_field }}
@nexusresponsive( {{ image_field }})
This will render an image tag with the default srcsets. The tag uses JS to define the value of the sizes attribute. This way the browser will always download the correct image.
You can make sure images are a certain ratio by passing a ratio
parameter, either as a string 16/10
or as a float 1.6
.
{{ nexusresponsive:image_field ratio="16/9" }}
@nexusresponsive( {{ image_field }}, ['ratio'=>"16/9"] )
By default, responsive images generates a small base64 encoded placeholder to show while your image loads. If you want to disable this you can pass placeholder="false"
to the tag.
{{ nexusresponsive:image_field placeholder="false" }}
@nexusresponsive( {{ image_field }}, ['placeholder'=>false] )
By default, responsive images generates webp variants in addition to jpg or png versions of your image, these are usually smaller. If you want to disable this functionality you can pass webp="false"
to your tag.
{{ nexusresponsive:image_field webp="false" }}
@nexusresponsive( {{ image_field }}, ['webp'=>false] )
You can still pass any parameters from the Glide tag that you would want to, just make sure to prefix them with glide:
.
Passing glide:width
will consider the width as a max width, which can prevent unnecessary large images from being generated.
{{ nexusresponsive:image_field glide:blur="20" glide:width="1600" }}
@nexusresponsive( {{ image_field }}, ['glide'=>['blur'=>"20", 'width'=>"1600"]] )
If you want to add additional attributes (for example a title attribute) to your image, you can add them as parameters to the tag, any attributes will be added to the image.
{{ nexusresponsive:image_field alt="{title}" class="my-class" }}
@nexusresponsive( {{ image_field }}, ['alt'=>"{title}", 'class'=>"my-class"] )
If you want to customize the generated html, you can publish the views using
php artisan vendor:publish
and choosing VictoryCTO\NexusResponsiveImages\ServiceProvider