Giter VIP home page Giter VIP logo

srcset_image's Introduction

srcset Image

Provides a field formatter that outputs responsive images utilising the srcset image attribute.

srcset lets you specify different image variants which the browser chooses between based on the screen size. For example, you can specify a large, medium and small variant of a particular image; then, depending on the user's screen size, the browser will automatically load the appropriately-sized image. No more displaying 1000+ pixel images on mobile devices!
You can read more about the srcset and sizes image attributes here: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

This module integrates with Backdrop's image styles to automatically create the image variants you select. Simply upload a full-size image, and the different variants are created automatically. You can also edit the value of the sizes attribute for more fine-grained control.

Installation

  • Install the Preset module.

  • Install this module using the official Backdrop CMS instructions at https://backdropcms.org/guide/modules.

  • Visit the Image Styles configuration page under Administration > Configuration > Media > Image Styles (admin/config/media/image-styles) and create different image styles corresponding to the image variants you want.
    For example, you could create image styles named '1200w', '600w' and '300w' which each include a 'Scale' effect that resizes images to the respective widths.

  • Visit the srcset Image configuration page under Administration > Configuration > Media > srcset Image (admin/config/media/srcset-image) and add an Image Set that references the different image styles you created above.

  • Add an Image field to a content type, configure it, then visit the Manage Display page under Administration > Structure > Content Types > [Content Type Name] > Manage Displays (admin/structure/types/manage/[content-type]/display). Choose a Display Mode to edit, then set the Format of your Image field to 'srcset Image' and configure it to use the Image Set you created above. Optionally edit the Sizes field and specify a link for the image.

Issues

Bugs and Feature requests should be reported in the Issue Queue: https://github.com/backdrop-contrib/srcset_image/issues.

Current Maintainers

Credits

License

This project is GPL v2 software. See the LICENSE.txt file in this directory for complete text.

srcset_image's People

Contributors

argiepiano avatar yorkshire-pudding avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

srcset_image's Issues

Original image is still included as src even if "Include original image" is deselected

I was somewhat surprised to discover that the uploaded image is used for the default image in the srcset. I was expecting to only see those image styles that have been added to the image set.

On the basis that many users upload images with scant regard to image proportions or file size โ€“ for example straight from a stock image library โ€“ the default image could very well be totally inappropriate for use in its raw form on the site.

Therefore can I make a suggestion that one of the image styles in the image set must be set as the default image please?

Lazy Loading?

Would it be possible to have srcset images lazy loaded, seeing as this is now in core?

Image widths do not get applied

Sadly I've had a hard time getting this module to work correctly as the image widths for each srcset url do not get set, there's just a "w" after the url.

I get this error message for each image style in the image set:

Warning: getimagesize(https://link-to-image-style-image): failed to open stream: HTTP request failed! HTTP/1.1 503 Service unavailable in theme_srcset_image_formatter() (line 25 of /public_html/modules/srcset_image/srcset_image.theme.inc).

And I accordingly see errors for each image style in the console:

Failed parsing 'srcset' attribute value since its 'w' descriptor is invalid.
Dropped srcset candidate "<URL>"

The 'solution' is to load each image style url in my browser, clear the site cache and then the module correctly adds the image widths. Obviously not ideal!

What's going on? Is it my server config, folder permissions or something else?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.