1

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: enter image description here

Frontend Preview: enter image description here

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: enter image description here

Frontend Preview: enter image description here

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!

Improve this question
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.

Improve this answer
2
  • Thanks @andrew.welch, I understand, but it makes no sense for me... If I change the Featured Image from Article 2 (which was the same as Article 1 has) to something else then everything is working fine again. I'm using vagrant for my local dev - correct me if I'm wrong, but is this not the "best solution" to simulate the live server? – noxify May 13 '18 at 20:27
  • Yeah Vagrant is a good local dev solution; I use it myself via Homestead -- but you need to make sure the server config is correct. – andrew.welch May 14 '18 at 2:07
1

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:

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 %}
Improve this answer
2
  • So it's good you found a work-around, but something still is not right with your server setup. It shouldn't be throwing a 404 when trying to hit the controller. Check out Nginx Craft assuming you're using Nginx. Also for image, I wrote a plugin called ImageOptimize that you may find useful. – andrew.welch May 14 '18 at 2:09
  • Hi, your image plugin seems to be the perfect solution, because it includes also the srcset functionality by default and also the placeholder for lazy load.... i've added the repo to my watch list. For now i will continue with the imager plugin - but thanks a lot for your help. – noxify May 14 '18 at 19:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.