umanit / twig-image-extension Goto Github PK

View Code? Open in Web Editor NEW

10.0 7.0 5.0 167 KB

An extension to facilitate the integration of responsive images' markup in Twig templates.

PHP 95.85% JavaScript 2.05% CSS 2.09%

twig-templates lazy-loading responsive-images twig-extension twig-functions

twig-image-extension's People

Contributors

Stargazers

Watchers

Forkers

linkrb juliecottu cadot-info solenegk generalecauchemar

twig-image-extension's Issues

Fallback - Add original image and height attribute

To avoid the Cumulative Layout Shift we should add the image and height attribute.

When we use the thumbnail it's ok. We take the height define in the filter

            filters:
                # use and setup the "thumbnail" filter
                thumbnail:
                    # set the thumbnail size to "32x32" pixels
                    size: [32, 32]

But with the relative filter we can't determinate the height of the image.

        big_filter:
            filters:
                relative_resize:
                    widen: 735

If we have only one dimension. We need to push the height and width of the original image
With that the browser manages to determine the ratio of the image.

An idea -> with the data_root and the path of the image we can retrieve the width and height.

getimagesize($this->data_root.$path)[3];

Add default image to fallback

Liip image bundle has a fallback for the images

https://symfony.com/bundles/LiipImagineBundle/current/configuration.html
default_image

When the path of the image it should use the default_image.

    umanit_image_figure(
      image.path,   // <-  I'm Emtpy = take the fallback 
      'small_thumbnail',
      ['thumbnail', 'large_thumbnail'],
      'image alt',
      'img img--cover img--zoom',
      '(min-width: 768px) 33.3vw, 100vw',
      'class-figure',
      'Figcaption text',
      'class-figcaption',
    )

Fallback - change the width and height attribute

Recently we add the original width and height of the image.
But it's not ideal.
Sometimes the original size of the image is very big and the user who deactivates the stylesheet seen a big image.

The width and the height should take the size of the filter passed to the src attribute

Example :

umanit_image_figure_lazy_load(
      image.path,
      'small_thumbnail',         <- take the width and the height generated by this filter
      'tiny_thumbnail',
      ['thumbnail', 'large_thumbnail'],
      'image alt',
      'img img--cover img--zoom',
      '(min-width: 768px) 33.3vw, 100vw',
      'class-figure',
      'Figcaption text',
      'class-figcaption',
    )

  umanit_image_picture_lazy_load(
    image.path,
    'small_thumbnail',     <- take the width and height generated by this filter
    'tiny_thumbnail',
    ['thumbnail', 'large_thumbnail'],
    {
      (image.path): {
        'media': '(min-width: 768px)',
        'sizes': '(min-width: 1400px) 25vw, 50vw',
        'filters': ['thumbnail', 'large_thumbnail']
      },
      (image2.path): ['thumbnail', 'large_thumbnail']
    },
    'alt img',
    'img img-fluid',
    'class-picture'
  )

Add option for the original size of the image

We should be able to pass an option to put the original size in the sizes attribute.

Example :

umanit_image_figure_lazy_load(
      image.path,
      'small_thumbnail',         
      'tiny_thumbnail',
      ['thumbnail', 'large_thumbnail'],
      'image alt',
      'img img--cover img--zoom',
      'original',    <-    pass the original size
      'class-figure',
      'Figcaption text',
      'class-figcaption',
      'low'  
    )

When the 'original' size is requested we should insert the following pattern :

sizes= "(max-width: [image width]) 100vw, [image width]"

We also need to implement security for a maximum size (When a customer uploads an image that is too big for example).

umanit_twig_image:
    use_liip_default_image: false
    class_selector: lazy
    placeholder_class_selector: lazy-placeholder
    blur_class_selector: lazy-blur
    max_size: 1600px

If an image is requested with a larger width the pattern become :

sizes= "(max-width: [image parameter max width]) 100vw, [image parameter max width]"

Add option to pass data-attribute

Add an argument to the function in order to pass data-attribute

Example :

    umanit_image_figure_lazy_load(
      image.path,
      'small_thumbnail',
      'tiny_thumbnail',
      ['thumbnail', 'large_thumbnail'],
      'image alt',
      'img img--cover img--zoom',
      '(min-width: 768px) 33.3vw, 100vw',
      'class-figure',
      'Figcaption text',
      'class-figcaption',
      'data-fadein-target="image"'
    )

Add option to pass priority hint

Google add a new attribute to give an order of ressources downloaded.

We should add a new attribute (again :/ ) on functions

umanit_image_figure_lazy_load(
      image.path,
      'small_thumbnail',         <- take the width and the height generated by this filter
      'tiny_thumbnail',
      ['thumbnail', 'large_thumbnail'],
      'image alt',
      'img img--cover img--zoom',
      '(min-width: 768px) 33.3vw, 100vw',
      'class-figure',
      'Figcaption text',
      'class-figcaption',
      'low'    <- can pass 'low' or 'high' here
    )

umanit / twig-image-extension Goto Github PK

twig-image-extension's People

Contributors

Stargazers

Watchers

Forkers

twig-image-extension's Issues

Fallback - Add original image and height attribute

Add default image to fallback

Fallback - change the width and height attribute

Add option for the original size of the image

Add option to pass data-attribute

Add option to pass priority hint

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs