Download the PHP package infernalmedia/responsive-image-craft without Composer

Add static responsive images to your Laravel project

Introducing ResponsiveImageCraft, a powerful Laravel package that empowers you to effortlessly generate responsive images in various desired static formats through a simple command line interface. This package equips you with a versatile component to effortlessly display these responsive images on your web pages. Additionally, you'll find a collection of SCSS mixins to effortlessly generate the necessary code when using the images as background-images, ensuring a seamless integration into your projects.

With ResponsiveImageCraft, you can now efficiently manage and serve responsive images, enhancing your website's performance and user experience across various devices. Embrace the ease and flexibility of ResponsiveImageCraft as it takes care of the heavy lifting for you, delivering stunning visuals without the hassle. So why wait? Elevate your image handling capabilities today with ResponsiveImageCraft.

Installation

You can install the package via composer:

You can publish the config file with:

This is the contents of the published config file:

Optionally, you can publish the scss helper. The scss needs sass:^1.57 to run correctly.

Usage

Images generations

After configuring, the source and targets, run:

Optionally you can define the source

Responsive Image Component

Here is a basic working configuration

Will generate the following html

The following attributes are available for customization

• $alt
  The alternative text for the image. Learn more
• $skipPictureTag
  A flag to skip the picture tag and only render the img tag.
• $src
  The image relative path.
• $height
  The height of the original image. Learn more

• $width
  The width of the original image Learn more. The width value will define de maximum available image width, following the generated ones.

• $asyncDecoding
  Enable async decoding of the image. This can improve page load performance by decoding images in the background. Learn more
• $lazy
  Enable lazy loading of the image. When set to true, the image will load only when it's visible in the viewport. Learn more
• $containerClass
  CSS class to add to the wrapping top <div>. You can apply custom styling using this class.
• $imgAttributes
  Additional html attributes to be added to the img tag. e.g.:"class=img-class data-attribute=attribute"

Here is complete example:

Will generate the following html

Using responsive image with Sass (and ViteJs)

Configuration

Set your vite.config.js to give env variables to your scss

Responsive Image SCSS Mixins and Styles

The Responsive Image SCSS module provides useful mixins and styles for creating responsive background images and managing media queries.

Mixin usage

Use the responsive-background-image-from-existing-css-var mixin to generate responsive background images from existing CSS vars generated by the laravel facade ResponsiveImageCraft::getCssVariables():

Or use the responsive-background-image mixin to generate responsive background images

Be careful, the extensions list order will define the browser preference.

Other useful functions are available in /scss/_assets-url-helper.scss

Testing

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Guillaume Ernst
• All Contributors

License

The MIT License (MIT). Please see License File for more information.