Image

We will explain how to upload, optimize, and crop images for your website using the ImageComponent. By doing this, you can achieve faster loading times and enhance the user experience. Use the following syntax to upload and display an image:

{!! $model->image('picture')->getPicture() !!}

The getPicture() method automatically optimizes the image for various screen sizes. Add styling with style and class attributes:

{!! $model->image('picture')->getPicture(style: 'width: 100%', class: 'rounded-lg') !!}

For accessibility and SEO, include an alt attribute:

{!! $model->image('picture')->getPicture(alt: 'A beautiful picture') !!}

You can use another component's value for the alt attribute:

{!! $model->image('picture')->getPicture(alt: $model->title) !!}

For better performance and higher Google PageSpeed scores, use ->widthPx(1200) to generate multiple sizes:

• Original: the uploaded size.
• 2400 px (big2x): for Retina displays.
• 1200 px (standard): optimized for desktops.
• 1280 px: for iPhones.
• 640 px (mobile): for smaller screens.
• 640 px (miniature): Used for preview purposes.

This resizing uses the Catmull-Rom encoder, ensuring high-quality images that resemble the original with minimal loss of quality.

{!! $model->image('picture')->widthPx(1200)->getPicture() !!}

To achieve better designs, allow users to crop images. Centering automatically might cut important areas of an image. The ->crop() method lets users define the aspect ratio.

{!! $model->image('picture')->crop(3, 4)->getPicture() !!}

In this example, the image width will be 1.5 times the height.

You can also specify the height and width of the image. For instance, combining ->widthPx(1200) with ->crop(1200, 800) will ensure the image is resized to 1200px by 800px.

{!! $model->image('picture')->widthPx(1200)->crop(1200, 800)->getPicture() !!}

The ->get() method returns an array with all relevant image data.

$model->image('picture')->widthPx(1200)->crop(1200, 800)->get();

This returns:

[
  'original' => '/model/homepage/hero/image/table_5000.original.jpeg',
  'crop' => ['x' => 0, 'y' => 0, 'width' => 1200, 'height' => 800],
  'sources' => [
      [
          'name' => '/model/homepage/hero/image/table_5000.jpeg',
          'size' => ['height' => 1200, 'width' => 800],
          'media' => 'standard',
      ],
      // Other sources...
  ],
];