Question: Responsive Images

[ghost]

1. Can I disable the generate of SVG (base64svg, which is saved as the custom property of media) when auto-generating responsive images? I have no use of it and it's wasting space in DB.

2. Is it possible to pass on a custom "alt" attribute and CSS classes to the img tag view generated by {{ $yourModel->getFirstMedia() }}. I can modify the view (responsiveImageWithPlaceholder.blade.php) for the CSS classes but what if I want to selectively use those classes at specific parts of the website?

3. I'm custom generating the responsive images using "FileSizeOptimizedWidthCalculator" class. If the original image size is less than equals to the minimum image size in specified in "finishedCalculating", the library duplicates the image in "responsive-images" folder. Wouldn't it be better to re-use the original image in this case?

4. Is there a way to optimize the generated responsive images using spatie/laravel-image-optimizer?

5. Can I remove the "medialibrary_original" part of (FILENAME___medialibrary_original_480_266.jpg) generated responsive images to make the filename shorter in length? Also is it possible to rename "/responsive-images/" folder to something to a shorter name like "/resp/"?

[freekmurze]

1. You could create your own generator that returns an empty string. Specify the class name in tiny_placeholder_generator in the config file

2. Publishing the view seems like the way to go. You have to add logic yourself to determine when you want to render what, the package can't help you with that.

3. Feel free to send a PR with tests for this

4. There are already being optimized under the hood:

   laravel-medialibrary/src/ResponsiveImages/ResponsiveImageGenerator.php

   Line 89 in 6e5e355

   ->optimize()

Can I remove the "medialibrary_original"

Currently not, feel free to send a tested PR

Also is it possible to rename "/responsive-images/" folder to something to a shorter name like "/resp/"

Yes, using a custom path generator

[ghost]

Thanks a lot @freekmurze for answering.

Regarding query no. 1, I tried returning an empty string from the generator but then it generated an error "The expected tiny jpg at Project\storage\medialibrary/temp\5vPNxXCJFMejq1EmeRRrK0BpEdhdlCik\tiny.jpg does not exist".

[freekmurze]

In that case I'd welcome a fully tested PR that makes the tiny image generators optional 😄

[EricBusch]

@nnvvii

Is it possible to pass on a custom "alt" attribute and CSS classes to the img tag view generated by {{ $yourModel->getFirstMedia() }}. I can modify the view (responsiveImageWithPlaceholder.blade.php) for the CSS classes but what if I want to selectively use those classes at specific parts of the website?

I was wanting to do the same thing. Here's how I handled it in my blade file without publishing any MediaLibrary views.

{!! $model->getFirstMedia('preview')->img('', ['class'=>'shadow', 'alt'=>'Sunset']) !!}

This generates the following HTML:

<img alt="Sunset" 
    srcset="..."
    onload="this.onload=null;this.sizes=Math.ceil(this.getBoundingClientRect().width/window.innerWidth*100)+'vw';" 
    sizes="14vw"     
    src="..." 
    width="1920" 
    class="shadow">

Hope this helps!