Download the PHP package fronty/responsive-images without Composer
On this page you can find all versions of the php package fronty/responsive-images. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download fronty/responsive-images
More information about fronty/responsive-images
Files in fronty/responsive-images
Package responsive-images
Short Description Library that will make working with images in your responsive Wordpress template a breeze.
License MIT
Informations about the package responsive-images
RESPONSIVE IMAGES FOR WORDPRESS
Library that will make working with images in your responsive Wordpress template a breeze.
What's in the box:
- Generates \<img> tags with precise
srcset
andsizes
attributes for images from WP Media Library. - Generates \<img> tags wrapped in aspect-ratio preserving wrapper for both WP Media images and theme images. Great to prevent CLS with lazyloaded images.
- Clean API to define responsive image sizes in either mobile-first (min-width) or desktop-first (max-width) manner.
- Helper to define images sizes based on taken colums in Bootstrap grid for each breakpoint.
- Replace responsive image in Gutenberg image block.
- Generates sanitized and minified \<svg> code, which can be safely inlined to HTML.
Code
Output
Thanks a lot to Adam Laita and his post about image optimization (in Czech only). It was the original inspiration for this library.
Instalation
Option 1: with Composer
Recommended way to install the library is using Composer:
Include composer's autoload in functions.php
:
Option 2: without Composer
- Download source code of the library and unzip it into your theme directory.
- Require files manually in
functions.php
WP Plugins
-
Install Fly Dynamic Image Resizer and activate it on local development version. You can use this on production as well, but you would miss the speed of CDN.
- On production version install, activate and configure Auto Cloudinary, which will automatically upload all your images to Cloudinary using it's fetch API.
This library decides whether to use Fly Dynamic Image Resizer or Auto Cloudinary plugin, but make sure only one of these plugins is activated at a time. If none of these plugins is activated, library will fall back to default Wordpress attachment getter wp_get_attachment_image_src()
with size given as array.
The library can work with SVGs as well. To support SVGs in WP Media Library, install SVG Support.
With this, you are ready to instantiate all classes described below directly in your template files. However to optimize your images and code as much as possible, there are more steps suggested.
Working with image sizes
To work with responsive images, we first has to prepare one or more image sizes for various breakpoints. Image sizes can be defined using following classes:
Fronty\ResponsiveImages\Sizes\ImageSize
is representation of image dimensions and transformations. This class alone is used for non-responsive images, where only one size is required.Fronty\ResponsiveImages\Sizes\ImageSizeList
is representation of group of ImageSize objects and is used for responsive images, where different size is required for each breakpoint.Fronty\ResponsiveImages\Sizes\BootstrapSizes
is helper class to generate ImageSizeList according to specified container width and grid columns.
See detailed documentation of these objects.
Working with images
Library includes two main classes for work with images:
Fronty\ResponsiveImages\UploadImage
for images uploaded by user in WP Media GalleryFronty\ResponsiveImages\ThemeImage
for images located inside your theme directory (logos, backgrounds, etc.)
See detailed documentation of these objects.
WP filters
Both ThemeImage and UploadImage objects allows you to change some of their outputs using WP filter mechanism.
See list of all filters available.
Dependencies
Nette\Utils
The code depends on lightweight utility classes from Nette\Utils, especially following classes:
- HTML elements for img HTML tags handling
- Strings for safe UTF-8 strings manipulation
- ArratHash for smart array-like object
Other dependencies
- enshrined/svg-sanitize: Remove ids and classes of uploded SVGs before they are inlined to template.
- paquettg/php-html-parser Replace responsive image tag in Gutenberg image block.
@todo
- nemazat src v lazyloadingu, misto toho dat placeholder (doplnit do konfigurace)
- UploadImage