Rendering media | laravel-medialibrary | Spatie

 SPATIE

  Laravel Media Library
========================

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Laravel-medialibrary](https://spatie.be/docs/laravel-medialibrary/v8)  Advanced-usage  Rendering media

 Version   v11   v10   v9   v8   v7   v6   v5   v4   v3

 Other versions for crawler [v11](https://spatie.be/docs/laravel-medialibrary/v11) [v10](https://spatie.be/docs/laravel-medialibrary/v10) [v9](https://spatie.be/docs/laravel-medialibrary/v9) [v8](https://spatie.be/docs/laravel-medialibrary/v8) [v7](https://spatie.be/docs/laravel-medialibrary/v7) [v6](https://spatie.be/docs/laravel-medialibrary/v6) [v5](https://spatie.be/docs/laravel-medialibrary/v5) [v4](https://spatie.be/docs/laravel-medialibrary/v4) [v3](https://spatie.be/docs/laravel-medialibrary/v3)

- [ Introduction ](https://spatie.be/docs/laravel-medialibrary/v8/introduction)
- [ Support us ](https://spatie.be/docs/laravel-medialibrary/v8/support-us)
- [ Requirements ](https://spatie.be/docs/laravel-medialibrary/v8/requirements)
- [ Installation & setup ](https://spatie.be/docs/laravel-medialibrary/v8/installation-setup)
- [ Questions and issues ](https://spatie.be/docs/laravel-medialibrary/v8/questions-issues)
- [ Changelog ](https://spatie.be/docs/laravel-medialibrary/v8/changelog)
- [ About us ](https://spatie.be/docs/laravel-medialibrary/v8/about-us)

Basic usage
-----------

- [ Preparing your model ](https://spatie.be/docs/laravel-medialibrary/v8/basic-usage/preparing-your-model)
- [ Associating files ](https://spatie.be/docs/laravel-medialibrary/v8/basic-usage/associating-files)
- [ Retrieving media ](https://spatie.be/docs/laravel-medialibrary/v8/basic-usage/retrieving-media)

Working with media collections
------------------------------

- [ Simple media collections ](https://spatie.be/docs/laravel-medialibrary/v8/working-with-media-collections/simple-media-collections)
- [ Defining media collections ](https://spatie.be/docs/laravel-medialibrary/v8/working-with-media-collections/defining-media-collections)

Converting images
-----------------

- [ Defining conversions ](https://spatie.be/docs/laravel-medialibrary/v8/converting-images/defining-conversions)
- [ Retrieving converted images ](https://spatie.be/docs/laravel-medialibrary/v8/converting-images/retrieving-converted-images)
- [ Optimizing converted images ](https://spatie.be/docs/laravel-medialibrary/v8/converting-images/optimizing-converted-images)
- [ Naming conversion files ](https://spatie.be/docs/laravel-medialibrary/v8/converting-images/naming-conversion-files)
- [ Regenerating images ](https://spatie.be/docs/laravel-medialibrary/v8/converting-images/regenerating-images)

Responsive images
-----------------

- [ Getting started with responsive images ](https://spatie.be/docs/laravel-medialibrary/v8/responsive-images/getting-started-with-responsive-images)
- [ Using your own width calculator ](https://spatie.be/docs/laravel-medialibrary/v8/responsive-images/using-your-own-width-calculator)
- [ Customizing the rendered html ](https://spatie.be/docs/laravel-medialibrary/v8/responsive-images/customizing-the-rendered-html)
- [ Generating your own tiny placeholder ](https://spatie.be/docs/laravel-medialibrary/v8/responsive-images/generating-your-own-tiny-placeholder)
- [ Responsive images demo ](https://spatie.be/docs/laravel-medialibrary/v8/responsive-images/demo)

Downloading media
-----------------

- [ Downloading a single file ](https://spatie.be/docs/laravel-medialibrary/v8/downloading-media/downloading-a-single-file)
- [ Downloading multiple files ](https://spatie.be/docs/laravel-medialibrary/v8/downloading-media/downloading-multiple-files)

Converting other file types
---------------------------

- [ Using image generators ](https://spatie.be/docs/laravel-medialibrary/v8/converting-other-file-types/using-image-generators)
- [ Creating a custom image generator ](https://spatie.be/docs/laravel-medialibrary/v8/converting-other-file-types/creating-a-custom-image-generator)

Advanced usage
--------------

- [ Working with multiple filesystems ](https://spatie.be/docs/laravel-medialibrary/v8/advanced-usage/working-with-multiple-filesystems)
- [ Using custom properties ](https://spatie.be/docs/laravel-medialibrary/v8/advanced-usage/using-custom-properties)
- [ Storing media specific manipulations ](https://spatie.be/docs/laravel-medialibrary/v8/advanced-usage/storing-media-specific-manipulations)
- [ Using your own model ](https://spatie.be/docs/laravel-medialibrary/v8/advanced-usage/using-your-own-model)
- [ Rendering media ](https://spatie.be/docs/laravel-medialibrary/v8/advanced-usage/rendering-media)
- [ Using a custom directory structure ](https://spatie.be/docs/laravel-medialibrary/v8/advanced-usage/using-a-custom-directory-structure)
- [ Ordering media ](https://spatie.be/docs/laravel-medialibrary/v8/advanced-usage/ordering-media)
- [ Using a custom media downloader ](https://spatie.be/docs/laravel-medialibrary/v8/advanced-usage/using-a-custom-media-downloader)
- [ Moving media ](https://spatie.be/docs/laravel-medialibrary/v8/advanced-usage/moving-media)
- [ Consuming events ](https://spatie.be/docs/laravel-medialibrary/v8/advanced-usage/consuming-events)
- [ Generating custom urls ](https://spatie.be/docs/laravel-medialibrary/v8/advanced-usage/generating-custom-urls)
- [ Overriding default filesystem behavior ](https://spatie.be/docs/laravel-medialibrary/v8/advanced-usage/overriding-the-default-filesystem-behaviour)

API
---

- [ Adding files ](https://spatie.be/docs/laravel-medialibrary/v8/api/adding-files)
- [ Defining conversions ](https://spatie.be/docs/laravel-medialibrary/v8/api/defining-conversions)

      You are viewing the documentation for **an older version** of this package. You can check the version you are using with the following command:

 `                                    composer show spatie/laravel-medialibrary                                                                                                                                                                                                                                    `

Rendering media
===============

###  On this page

1. [ Customizing the views ](#content-customizing-the-views)

If your `$media` instance concerns an image, you can render it directly in a Blade view.

```
Here is the original image: {{ $media }}
```

This will output an `img` tag with a `src` attribute that contains an url to the media.

You can also render an `img` to a conversion.

```
Here is the converted image: {{ $media->conversion('thumb') }}
```

You can also use this shorthand:

```
Here is the converted image: {{ $media('thumb') }}
```

You can extra attributes by calling `attributes`.

```
Here is the image with some attributes: {{ $media->img()->attributes(['class' => 'my-class']) }}
```

If you want [defer loading offscreen images](https://css-tricks.com/native-lazy-loading/) you can use the `lazy` function.

```
Lazy loading this one: {{ $media()->lazy() }}
```

Customizing the views
-----------------------------------------------------------------------------------------------------------------------

You can customize the rendered output even further by publishing the `views` with:

```
php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="views"
```

The following files will be published in the `resources/views/vendor/media-library` directory:

- `image.blade.php`: will be used to render media without responsive images
- `responsiveImage.blade.php`: will be used to render media with responsive images without a tiny placeholder
- `responsiveImageWithPlaceholder.blade.php`: will be used to render media with responsive images including a tiny placeholder.

You may modify these published views to your heart's content.