search

spatie / statamic-responsive-images

Responsive images for Statamic 3
MIT License
99 stars 29 forks source link

no output of srcset code on live server #131

Closed jmartsch closed 1 year ago

jmartsch commented 2 years ago

The addon fails to output the srcset code and only outputs the img tag on live server (https://dotnetic.de/blog) . It works in my local dev environment. PHP: 8.0.x statamic-responsive-images: 2.11.2 Statamic: 3.3.9 and 3.3.10 What could be the cause? I am getting no exceptions.

I am using a regular file field for this and this code:

{{ teaser_image }}
 {{ responsive:teaser_image glide:height="400" ratio="16/9" alt="{title}" class="w-full" placeholder="false"}}
{{ /teaser_image }}

Output on live server image

output on local dev environment image

rustypaul commented 2 years ago

I get this issue on all environments!

Looking in the plugin code it looks like the antlers template is no longer referencing the srcset correctly? I'm probably wrong and we've probably fixed it incorrectly. Note that we're not using the fieldset, we're just calling the {{ responsive:asset }} tag on a standard Statamic asset field.

We fixed it in our test environment by changing the /views/vendor/responsive-images/responsiveImage.antlers.html file from this

<picture>
        {{ if srcSetWebp }}<source type="image/webp" srcset="{{ srcSetWebp }}" />{{ /if }}
        <source srcset="{{ srcSet }}" />
    <img
        {{ attributeString }}
        src="{{ src }}"
        width="{{ width }}"
        {{ if height }}height="{{ height }}"{{ /if }}
    >
</picture>

to this

<picture>
    {{ sources }}
        {{ if srcSetWebp }}<source type="image/webp" srcset="{{ srcSetWebp }}" />{{ /if }}
        <source srcset="{{ srcSet }}" />
    {{ /sources }}
    <img
        {{ attributeString }}
        src="{{ src }}"
        width="{{ width }}"
        {{ if height }}height="{{ height }}"{{ /if }}
    >
</picture>
jmartsch commented 2 years ago

I tried so many things to fix this problem. What fixed it in the end was deleting the /vendor/spatie/statamic-responsive-images folder on my live server and re-uploading it. I don't know why this happened, maybe some old files that were present were used. I am using rsync to upload my local changes to the live server, while I am doing this, old or deleted files on the target are not removed. Maybe this is an issue?

rustypaul commented 2 years ago

I wonder if the files I edited are old legacy views that haven't cleared properly on update?

Do any of the devs know?

rustypaul commented 2 years ago

Well, I deleted the files in the /views/vendor/spatie/statamic-responsive-images folder completely and it all works swimmingly for me now. I'd upgraded from a version from about 2 years ago originally, so I suspect at some point running composer update didn't remove those files. I'm not sure how they got there, don't think it was me!

ncla commented 2 years ago

There is important distinction that needs to be made.

The contents of ./vendor/ directory in project root should not be edited ever (unless you know what you are doing), the dependencies should be managed through Composer.

If we are talking about ./resources/views/vendor/responsive-images directory, then yes an outdated .blade.php template can cause issues. This package is continuously updated. These files should appear only there if you have decided to run php artisan vendor:publish so that you can customize the Blade template to change the HTML output of the responsive tag. If you do not plan to customize the template, you should not publish it and just delete the directory. If this directory does not exist in your project, it will simply fall back to the default template specified within the addon itself. If you do plan to customize it, then you should stay up to date with this package changes and update accordingly.

I'd upgraded from a version from about 2 years ago originally, so I suspect at some point running composer update didn't remove those files. I'm not sure how they got there, don't think it was me!

Ya, 2 years is a lot, that probably explains it in your case. You can see all the changes that have been made to the responsiveImage.blade.php file here: https://github.com/spatie/statamic-responsive-images/commits/main/resources/views/responsiveImage.blade.php