Get the latest Laravel/PHP jobs, events and curated articles straight to your inbox, once a week
Source: matthewdaly.co.uk
Dynamic image handling with Glide and GraphQLCategory: Laravel, Laravel, PHP, PHP, api, api, nodejs, nodejs
Published by Matthew Daly at 21st August 2021 4:20 pm For instance, if you need a particular image at both a thumbnail size and a full-screen size, it means you have the flexibility to request it at the correct size for any one part of the page. This can potentially save bandwidth since you never have to request a larger image than you technically need and scale it down with HTML attributes or CSS, nor do you have to take steps to generate thumbnails separately before they're needed.
For that reason, it's considered good practice to set a maximum image size, and sign all requests so that you can be sure they're authorized by your application.
In this example, we fetch it at two different sizes: Then, when rendering a component, you could use the and elements to show different versions based on media queries, as in this example of a simple React component used to render individual instances of Item: This enables us to serve responsive images that are appropriately sized for the current screen resolution.
For that reason, it's considered good practice to set a maximum image size, and sign all requests so that you can be sure they're authorized by your application.
In this example, we fetch it at two different sizes: Then, when rendering a component, you could use the and elements to show different versions based on media queries, as in this example of a simple React component used to render individual instances of Item: This enables us to serve responsive images that are appropriately sized for the current screen resolution.
Newsletter
ToastMail
Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future.
Community Partners
Laravel/PHP Careers