How to use an asset as featured image in different entries

Question

I have currently the problem, that I can't use the same asset in different entries as featured image.

Craft Pro Version: 3.0.9

My setup is the following:

Volumes:

• Local, Base URL: @web/uploads, Type: Local, File Path: @webroot/uploads

Created Fields:

• Featured Image, Type: Asset, Limit: 1, Volume: Local

Created Section:

• Articles, Type Channel, Added Featured Image to the post type

---

Now I have uploaded some dummy images. (e.g. Image 1, Image 2, Image 3) After this I have created some article entries.

• Article 1 - Image 1
• Article 2 - Image 2
• Article 3 - Image 3

Backend Preview:

Frontend Preview:

When I change the Article 1 - Featured Image from Image 1 to Image 2 it looks good in the backend but not in the frontend.

Backend Preview:

Frontend Preview:

The frontend snippet to show the entries is the following:

{% set latestArticles = craft.entries({section: 'articles', limit: 6}).orderBy('id desc').all() %}

<div class="container">

    <div class="row card-columns">

    {% for entry in latestArticles %}

        {% set asset = entry.featuredImage.one() %}

        <div class="col-md-4">
            <div class="card mb-4 box-shadow">
                <img class="card-img-top" src="{{ asset.getUrl('thumb') }}"  alt="{{ entry.title }}" style="height: 225px; width: 100%; display: block;" data-holder-rendered="true">
                <div class="card-body">
                    <h5 class="card-title">{{ entry.title }}</h5>
                    <p class="card-text">
                        {{ entry.teaser|length > 200 ? entry.teaser|striptags|slice(0, 200) ~ '...' : entry.teaser|striptags }}
                    </p>
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                            <a href="{{ entry.url }}" class="btn btn-sm btn-outline-secondary">Read more...</a>
                        </div>
                        <small class="text-muted">9 mins</small>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
    </div>
</div>

The question is now the following:

• Is it an user handling?! :D
• Is it not possible to assign one image to multiple entries?
• Is there any workaround? (please don't tell me, to upload the image again ;) )

Thanks!

Answer 1

You can assign an image to as many entries as you like; what's happening is for some reason, Craft appears to be unable to generate the appropriate image transform. It's very likely some kind of local dev environment setup issue.

For whatever reason, it's unable to access the AssetsController to generate the transformed image on the frontend, as seen in that 404 url.

Answer 2

With the new hints from Andrew (thanks!), I found a good workaround for me based on this answer: https://craftcms.stackexchange.com/a/21205/8348

Installing the following plugin:

• https://github.com/aelvan/Imager-Craft

The updated Frontend Snippet is the following:

{% for entry in latestArticles %}

        {% set asset = entry.featuredImage.one() %}

        {% set transformedImage = craft.imager.transformImage(asset.url, {height: 225}) %}

        <div class="col-md-4">
            <div class="card mb-4 box-shadow">
                <img class="card-img-top" src="{{ transformedImage.getUrl() }}"  alt="{{ entry.title }}" style="height: 225px; width: 100%; display: block;" data-holder-rendered="true">
                <div class="card-body">
                    <h5 class="card-title">{{ entry.title }}</h5>
                    <p class="card-text">
                        {{ entry.teaser|length > 200 ? entry.teaser|striptags|slice(0, 200) ~ '...' : entry.teaser|striptags }}
                    </p>
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                            <a href="{{ entry.url }}" class="btn btn-sm btn-outline-secondary">Read more...</a>
                        </div>
                        <small class="text-muted">9 mins</small>
                    </div>
                </div>
            </div>
        </div>
{% endfor %}