Images in logged out version are the same across similar elements

Summary

I have an element “Content With Image” that is used several times on a page, when viewed in the Fred editor the image is correct in each one. When logged out, the image is the one used in the final component on the page.

I’ve tried caching and uncaching the pthumb snippet, i have remote set to true, and I am rebuilding and clearing cache after each change to see if it is fixed.

Step to reproduce

<section>
    <div class="container">
        <div class="row">
            <span data-fred-render="false"><code class="text-dark">Instructions for Content With Divider: </code>Click the text below to update. To edit link, open the element settings</span>
            <div class="col-lg-7">
                <h2 data-sal="slide-right" data-fred-name="title">Lorem ipsum</h2>
                <div data-sal="slide-right" data-sal-delay="100" data-fred-name="text" data-fred-rte="true">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit repellendus alias sequi provident sapiente temporibus officia earum cupiditate id totam expedita porro pariatur fugit dolorem numquam repudiandae nostrum ullam!</p>
                </div>
            </div>
            <div class="col-lg-auto mx-auto">
                <div class="vr h-100 d-none d-lg-block"></div>
                <hr class="d-lg-none"/>
            </div>
            <div class="col-lg-4" data-sal="slide-left">
                [[pthumb?
                    &input=`{{ src }}`
                    &toPlaceholder=`img`
                    &options=`w=500&f=webp`
                ]] 
                <img src="[[+img]]" width="[[+img.width]]" height="[[+img.height]]" loading="lazy" decoding="async" alt="" aria-hidden="true" class="img-fluid w-100 rounded" />
            </div>
        </div>
    </div>
</section>
{
  "remote": true,
  "settings": [
    {
      "name": "src",
      "type": "image",
      "value": "https://placehold.co/700x700",
      "label": "Image"
    }
  ]
}

Environment

MODX 3.1.1-pl, Fred 3.1.5

My guess is that this is an issue with the MODX parser.
The parser replaces all occurrences of the same tag on a page with the same value.

My coworker just noticed that too -_-

Do you need to use a placeholder?

This works for me:

<img src="[[pthumb? &input={{ bild }} &options=aoe=1&w=900&h=600&dpi=72&q=85&f=png&zc=c]]" alt="{{ alt }}">

I think for some reason that wasn’t working, I’d have to check with my coworker. For now we’re just going to us the image directly.

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.