Twill CMS•9mo ago

Save images in multple sizes for responsive?

Hi Support Team, I would like to ask if Twill can store the images in multiple size for desktop, mobile? And what is the purpose of the Mobile crop?

11 Replies

pauldwight•9mo ago

Hi @Huy Tớn Yes you can define whatever crops you want for an image. I generally use this where we want to use the same image for Desktop or Mobile but don't want to load the larger image on smaller screen sizes. Crops can be defined in the Model

public $mediasParams = [
    'openingImage' => [
        'desktop' => [
            [
                'name' => 'Desktop',
                'ratio' => 16 / 9,
            ],
        ],
    ],
];

public $mediasParams = [
    'openingImage' => [
        'desktop' => [
            [
                'name' => 'Desktop',
                'ratio' => 16 / 9,
            ],
        ],
    ],
];

Then it's up to you how you want to render or make use of this in your frontend. This is a good article on options for responsive images - https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/

Chris Coyier

CSS-Tricks

A Guide to the Responsive Images Syntax in HTML | CSS-Tricks

This guide is about the HTML syntax for responsive images (and a little bit of CSS for good measure). We'll go over srcset and , plus a whole bunch of things to consider to help you get the best performance and design control from your images.

pauldwight•9mo ago

You can also check out the Twill Image package (https://github.com/area17/twill-image) for art-directed images

GitHub

GitHub - area17/twill-image: Twill Image is a package designed to w...

Twill Image is a package designed to work with Twill. It leverages Twill image processing with modern lazy-loading techniques and art-directed responsive images. - area17/twill-image

Huy TớnOP•9mo ago

ok thanks @pauldwight I will have a look Hi @pauldwight Can we have multiple sizes of images that be uploaded for devices For example, we upload 1 image with 1920x1080px, 3 images will be stored for 3 devices: desktop (1920x1080px), tablet (768x480px), mobile (320x480px)

Huy TớnOP•9mo ago

I have added the config to the model And tried to save it in the admin But it does not save a separate cropped image It just stores the 2 dimensions (desktop and mobile) with the same original image ID 699

pauldwight•9mo ago

The crops are generated when it is requested rather than on upload

Huy TớnOP•9mo ago

Can I know the requested mean, when I hit "Update", and save the page, there is no cropped image will be created 😅

pauldwight•9mo ago

Sorry - there is 1 image uploaded, the original, the defined crops will then be saved in the db table (as you can see). Your frontend then requests the crop you want e.g.

php $image->image('opening_banner','mobile')

php $image->image('opening_banner','mobile')

This image url contains the crop details and gets passed to the Image Rendering Service - default will be Glide and returns the cropped image

Huy TớnOP•9mo ago

When I tried $homepage->image('opening_banner', 'mobile'), it returned the original image URL, is that correct? How we can get a cropped image URL instead? With Image Rendering Service - Glide?

pauldwight•9mo ago

The returned url should include params. e.g. http://domaintest/img/uuid-for-image/image-file-name.jpg?fm=jpg&q=80&fit=max&crop=500%2C500%2C0%2C0 Glide is just an on-demand image manipulation library. It has requirements like GD library

kallefrombosnia•9mo ago

Crops defined on your Model will be used, but in the aspect ratio. If you really want a custom w and h, you can do something like this

// default crop - full image aspect r
$homepage->image('opening_banner', 'default', ['w' => 1000, 'h' => 500])

// default crop - full image aspect r
$homepage->image('opening_banner', 'default', ['w' => 1000, 'h' => 500])

Huy TớnOP•9mo ago

thank you so much

Gaming

Programming

Save images in multple sizes for responsive?