Problem with data-fred-target and tv's

[davidpede]

I have an element setup like:

<div data-fred-block-class="col-12">
  {% if image %}
    [[!pthumb? &input=`{{ image }}` &options=`w=1260&h=540&zc=1` &toPlaceholder=`img_src`]]
    <img src="[[!+img_src]]" class="img-fluid" data-fred-name="hero_image" data-fred-target="tv_Heroimage" data-fred-editable="false">
  {% else %}
    <img src="https://via.placeholder.com/1260x540/9ed8a5/ffffff?text=7:3 Aspect Ratio" class="img-fluid" width="1260" height="540">
  {% endif %}
</div>

Uses an element setting to select the image, run it through pThumb and save it to a template variable. Works great first time but if we try changing the image via the setting or deleting the setting value the image in the element and the tv value does not change at all.

If we remove this from the img tag: data-fred-name="hero_image" data-fred-target="tv_Heroimage" data-fred-editable="false" then it updates the image in the element correctly but obviously we lose the tv value feature which we need.

Can any advise how best to sort this or if its the wrong approach?

[davidpede]

When I change the image via element setting I'm seeing this in devTools

[matdave]

To be clear, the process you are expecting here is that when you adjust the element settings, it feeds into a placeholder, and then the placeholder sets the TV value?

[davidpede]

@matdave yes so:

• the image element setting value feeds the pthumb input param: &input={{ image }}
• pthumb sets the [[+img_src]] placeholder
• which is used here: <img src="[[!+img_src]]" data-fred-name="hero_image" data-fred-target="tv_Heroimage">

The data-fred-target attr sets the tv correct but first time only. If the the setting is used to change the image selection the tv value and the element itself doesn't update.

[davidpede]

Might be clearer:

[JANogueira]

One up vote for this request. This is something that I also wanted to do.

Same will apply for all type of selections (files and images and fields is a file selector, image selector or directory selector).

Cheers

[theboxer]

Hey @davidpede, The thing you're trying to achieve is currently not possible.

Your example doesn't on the second (and every other try) because you are actually not changing the hero_image value of the element itself. On the first load it's empty, so it uses the value from the element setting you provide, but when you save the page, it stores the value from src to the hero_image element in fred. This value takes always the priority when rendering the element. So when you change the element setting, it'll return the correct HTML with the new image, but the actual element value remains unchanged -> when the element re-renders after the setting change, it'll override the src from remote render with the stored value. (If you're not following, I understand that, I did my best to explain :), feel free to ping me for more details, the rendering is not an easy process to explain, lol).

If I pretend that it's working, I'd still not recommend using it. The pThumb would be triggered on every resource call (unless you'd remove the uncache flag), which is unnecessary, because the image will not change. I'm trying to figure out how to make this possible.