TC
Twill CMSHuy Tớn

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?
No description
P
pauldwight•45d 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.
P
pauldwight•45d 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
HT
Huy Tớn•44d 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)
HT
Huy Tớn•44d 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
No description
No description
No description
No description
No description
P
pauldwight•44d ago
The crops are generated when it is requested rather than on upload
HT
Huy Tớn•44d ago
Can I know the requested mean, when I hit "Update", and save the page, there is no cropped image will be created 😅
P
pauldwight•44d 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
HT
Huy Tớn•44d 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?
P
pauldwight•44d 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
K
kallefrombosnia•44d 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])
HT
Huy Tớn•43d ago
thank you so much
Want results from more Discord servers?
Add your server
More Posts
How to display image from InlineRepeaterI want to dispaly the image from InlineRepeater. Please help me how to do it.how to upgrade twil 1.2.1 to latest versionhow to upgrade twil 1.2.1 to latest version twill cmsMulti-Select from Dynamic ValuesI created Location Model. And each location has multiple tags. I want to share tags across differeHow should I migrate from Legacy Settings to V3 Settings?I am having trouble accessing the setting goroup I created. When do php artisan route:list, settingCannot use connectedTo: Cannot unpack array with string keysHi I am having issues getting connectedTo to work in my Block. I have Twill 3.1.0 installed, but whasynchronous request in selectGood afternoon, I have two select fields. The thing is that when selecting the first select field, IUpgraded from Twill 2.13 to 3.2, frontend error when saving a module that uses 'editInModal' => trueI upgraded from Twill 2.13 to 3.2. When saving a module that is created/edited via a modal (using $iUpgraded from Twill 2.13 to 3.2, raw HTML links visible in browserHi, I upgraded from Twill 2.13 to 3.2. I am now seeing raw HTML edit links in my "Projecttags" browHow to use Conditional Fields in ControllerI want to add a Author select fields when shared_by === user ` $form->add( Radios::maBlock editor preview Vite issue?Hey all, I'm getting this when I preview a page module block editor in the admin:Upgrading from 2.0 to 3.0 -Block Editor $groups issueHello! I'm getting a strange error (see picture). I've tried clearing all caches. It only happens onInline Repeater get's overridden by another InlineRepeater with the same name in another block.The code in first image get's overriden by the code in the second image in admin panel. Normally, whTable custom columnHello! I created module Product and relationship with module Category. I would like to display categMulti select selected issueIn twill3 I created 2 CRUD, ImportedItem and ItemTypes. I used Multiselect for selecting ItemTypes. Upgrading from 2.0 to 3.0 - routing issuesHello! I'm currently updating twill to 3.0 from 2.0, and I'm having some issues with routes. I'm getDisabled defaults in controller based on user RoleGroupI want to disable, create, edit or delete actions according to user RoleGroup or there is another waDrag and drop issueHello, any idea how to achive DnD working on modules list. Problem is in that when you go below limiFile library 404 errorHello, I'm encountering issues with the file library. When I upload a file, such as a .txt file, it'InlineRepeater deleting data on related Model entriesI'm using an InlineRepeater to add relations with pivot data between two Repositories. The relations"astrotomic/laravel-translatable" n+1 queriesI've got a package issue which is composer required by twill. 800+ queries on a model only getting