Download the PHP package umanit/twig-image-extension without Composer

On this page you can find all versions of the php package umanit/twig-image-extension. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of umanit/twig-image-extension

Informations about the package twig-image-extension

UmanIT - Twig Image Extension

This Twig extension facilitates the integration of responsive images markup in Twig templates.

It uses LiipImagineBundle and its filters to generate HTML markup with all you need to handle responsive images.

It also provides a JavaScript module to automatically instantiate yall.js on rendered images.

Installation

Use the package manager composer to install the extension.

Load the bundle into your Symfony project.

(Optional) Install bundle assets if you want to use the javascript module for yall.js:

Configuration

Some functions render HTML markup with the ability to use lazy loading on images. It's possible to customize the classes used with the 3 options class_selector, placeholder_class_selector and blur_class_selector.

⚠ If you customize classes, you cannot use the javascript module and CSS that rely on them anymore

Fallback images

By default, if the image path given in functions calls is null, empty or points to a missing file on the server, an exception is thrown. You have two options to avoid this:

twig_image_extension.allow_fallback

If the path given points to a missing file, a default image will be rendered instead. The default images are available in four sizes:

If a default image needs to be rendered, the size will be guessed using the given Liip filter:

twig_image_extension.use_liip_default_image

This parameter will only be used as a backup if allow_fallback is set to false and requires you to use the default image mecanism of Liip ( see Liip configuration)

⚠ If neither twig_image_extension.allow_fallback nor twig_image_extension.use_liip_default_image are set to true and the image isn't found on the server, an exception will be thrown!

Usage

The following Twig functions are available in your templates.

  1. umanit_image_figure_lazy_load
  2. umanit_image_figure
  3. umanit_image_picture_lazy_load
  4. umanit_image_picture
  5. umanit_image_img
  6. umanit_image_srcset
  7. (Optional) Javascript module to instantiate yall.js
  8. (Optional) Import CSS files for blur effect on yall.js lazy images

When a LiipImagine filter is used, the extension will read its configuration and automatically guess the right width or height to apply in the markup. If it's not possible, the extension will try to get the original image dimensions instead. In both case, the result is saved in cache to avoid multiple process for the same image.

When the used function is for lazy load, lazy and lazy-placeholder classes are used but can be customized as explained in the Configuration part.

width and height attributes are added in the <img /> tag, based on the size calculated by the src filter (except for downscale and upscale filters, which fallback to the original image size). By doing this, sudden layout shifts are avoided for a better user experience.

To use htmlAlt, the css file umanit-alt-text.css must be loaded. It hides the div used to display the html alt content.

umanit_image_figure_lazy_load

Generates a figure tag with an img inside and his noscript version. The lazy, lazy-placeholder and lazy-blur classes are add to facilitate the integration with yall.js for example.

Parameters

Name Explanation
path Path to the image, used to generated the browser path with LiipImagine
srcFilter Name of the LiipImagine filter used to generate the path for data-src
placeholderFilter Name of the LiipImagine filter used to generate the path for src
srcsetFilters A list of LiipImagine filters used to generate the data-srcset
alt The text to put in the alt attribute of the img
imgClass Classes to add on the img
sizes Value of the sizes attribute (100vw if not defined)
figureClass Classes to add on the figure
figcaptionText Text of the figcaption (if nothing is passed, no figcaption will be rendered)
figcaptionClass Classes to add on the figcaption
imgImportance Importance of the image (see this link for more information)
figureDataAttributes Raw string passed to add data-attributes on the figure
imgDataAttributes Raw string passed to add data-attributes on the img
htmlAlt The html to put in a div referenced by the aria-describedby of the img. If given a non-empty value, the alt attribute vill be empty.

Example

Click to show ##### Without htmlAlt HTML generated: ##### With htmlAlt HTML generated The id used for `aria-describedby` is a random dynamically generated value.

umanit_image_figure

Generates a figure tag with an img inside.

Parameters

Name Explanation
path Path to the image, used to generated the browser path with LiipImagine
srcFilter Name of the LiipImagine filter used to generate the path for src
srcsetFilters A list of LiipImagine filters used to generate the srcset
alt The text to put in the alt attribute of the img
imgClass Classes to add on the img
sizes Value of the sizes attribute (100vw if not defined)
figureClass Classes to add on the figure
figcaptionText Text of the figcaption (if nothing is passed, no figcaption will be rendered
figcaptionClass Classes to add on the figcaption
imgImportance Importance of the image (see this link for more information)
figureDataAttributes Raw string passed to add data-attributes on the figure
imgDataAttributes Raw string passed to add data-attributes on the img
htmlAlt The html to put in a div referenced by the aria-describedby of the img. If given a non-empty value, the alt attribute vill be empty.

Example

Click to show ##### Without htmlAlt HTML generated: ##### With htmlAlt HTML generated The id used for `aria-describedby` is a random dynamically generated value.

umanit_image_picture_lazy_load

Generates a picture tag with an img inside and X source. Each source can have a media and sizes attribute if needed. The lazy and lazy-placeholder classes are add to facilitate the integration with yall.js for example.

Parameters

Name Explanation
path Path to the image, used to generate the browser path with LiipImagine
srcFilter Name of the LiipImagine filter used to generate the path for data-src
placeholderFilter Name of the LiipImagine filter used to generate the path for src
srcsetFilters A list of LiipImagine filters used to generate the data-srcset
sources A list of LiipImagine filters used to generate the sources tags. The key of the array is the path to the image and the value can be a list of filters name or, if you need to define a media or sizes attribute on the source, an array with filters and media and/or sizes key.
alt The text to put in the alt attribute of the img
imgClass Classes to add on the img
pictureClass Classes to add on the picture
imgImportance Importance of the image (see this link for more information)
pictureDataAttributes Raw string passed to add data-attributes on the picture
imgDataAttributes Raw string passed to add data-attributes on the img
htmlAlt The html to put in a div referenced by the aria-describedby of the img. If given a non-empty value, the alt attribute vill be empty.

Example

Click to show ##### Without htmlAlt HTML generated ##### With htmlAlt HTML generated The id used for `aria-describedby` is a random dynamically generated value.

umanit_image_picture

Generates a picture tag with an img inside and X source. Each source can have a media and sizes attribute if needed.

Parameters

Name Explanation
path Path to the image, used to generate the browser path with LiipImagine
srcFilter Name of the LiipImagine filter used to generate the path for src
srcsetFilters A list of LiipImagine filters used to generate the srcset
sources A list of LiipImagine filters used to generate the sources tags. The key of the array is the path to the image and the value can be a list of filters name or, if you need to define a media or sizes attribute on the source, an array with filters and media and/or sizes key. alt The text to put in the alt attribute of the img
imgClass Classes to add on the img
pictureClass Classes to add on the picture
imgImportance Importance of the image (see this link for more information)
pictureDataAttributes Raw string passed to add data-attributes on the picture
imgDataAttributes Raw string passed to add data-attributes on the img
htmlAlt The html to put in a div referenced by the aria-describedby of the img. If given a non-empty value, the alt attribute vill be empty.

Example

Click to show ##### Without htmlAlt HTML generated ##### With htmlAlt HTML generated

umanit_image_img

Generates an img tag.

Parameters

Name Explanation
path Path to the image, used to generate the browser path with LiipImagine
srcFilter Name of the LiipImagine filter used to generate the path for src
srcsetFilters A list of LiipImagine filters used to generate the srcset
alt The text to put in the alt attribute of the img
imgClass Classes to add on the img
sizes Value of the sizes attribute (100vw if not defined)
importance Importance of the image (see this link for more information)
imgDataAttributes Raw string passed to add data-attributes on the img

Example

Click to show HTML generated:

umanit_image_srcset

Generates the content of a srcset attribute if you wan to use it in your own markup.

Parameters

Name Explanation
path Path to the image, used to generate the browser path with LiipImagine
filters A list of LiipImagine filters used to generate the srcset

Example

Click to show HTML generated

(Optional) Javascript module to instantiate yall.js

If you want to use yall.js to manage the lazy load of your images, the bundle provides a javascript module that can be called in your application.

yall.js needs to be installed manually: yarn add yall-js

Then you need to import the module and instantiate it by passing the yall library. An optional argument loadEventCallback is available if you want to add more customization. It will be called in the load event of yall.js.

(Optional) Import CSS files for blur effect on yall.js lazy images

You can import the CSS file for adding a blur effect on lazy images.

Example in webpack

⚠ For a best usage for the users without javascript you should add a no-js class on the html element

Finally, add this one line <script> before any <link> or <style> elements in the document <head>

See https://github.com/malchata/yall.js/#what-about-users-without-javascript for more details.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

All versions of twig-image-extension with dependencies

PHP Build Version
Package Version
Requires php Version ^7.4|^8.0
ext-mbstring Version *
liip/imagine-bundle Version ^2.3
twig/twig Version ^2.12|^3.0
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package umanit/twig-image-extension contains the following files

Loading the files please wait ....