If ref image is deleted show this

hilaryaq · 2019-06-27 17:01:41

Hi everyone!

I have a site that displays stock which I want to say if an image has been deleted but is still referenced at article level, I can output a placeholder image.
Because the article image does have a value which references a deleted image, it won’t obey if_article_image as to the CMS it does have an article image (the id is there), but the behaviour is great in this scenario as instead of outputting a broken image nothing is output which is good.

Is there anyway to output a placeholder in this case please? Thank you for any help!

colak · 2019-06-27 18:47:40

Would this be of help?

etc · 2019-06-27 19:20:51

Some kind of redirection of missing .png, .jpg, ... requests should be possible too.

Edit: or, if the image has been deleted via txp interface:

<txp:if_article_image>
    <txp:evaluate>
        <txp:article_image />
    <txp:else />
        <!-- placeholder image -->
    </txp:evaluate>
</txp:if_article_image>

jakob · 2019-06-27 19:45:00

Two-three other possible approaches that don’t require a txp-based solution:

using js to catch img errors
using css to style the img tag
and another stackoverflow thread with further suggestions.

hilaryaq · 2019-06-28 08:13:18

Thanks for all the great advice guys! So it looks like I can’t plugin with a jquery solution which would be really handy, because Textpattern instead of outputting a dead link seems to output nothing in the case the referenced image id doesn’t exist.. which is good and what Txp should do instead of putting out a broken image but leaves me unable to plugin to anything I think :/

I’m going to try the evaluate code now and go through the other links if anything hits I’ll let you know, thanks for being so helpful. :)

hilaryaq · 2019-06-28 08:51:30

Evaluate works! Thanks Oleg!

And everyone else these links are so useful. Posting my code below in case anyone comes across this thread. Handy way to show a placeholder if an image has been deleted via txp but the id is still referenced at article level. Uses rich snippet data.

<txp:if_article_image>
<txp:evaluate>
<txp:images limit="1" wraptag="" break="">
<figure class="left" itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<a href="<txp:permlink />" itemprop="url mainEntityOfPage">
<img itemprop="image" src="<txp:image_url thumbnail="1" />" alt="<txp:title />" />
</a>
<meta itemprop="width" content="<txp:image_info type='w' wraptag='' class='' break='' />">
<meta itemprop="height" content="<txp:image_info type='h' wraptag='' class='' break='' />">
<meta itemprop="url" content="<txp:image_url thumbnail="0" />">
</figure>
</txp:images>
<txp:else />
<figure class="left" itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<a href="<txp:permlink />" itemprop="url mainEntityOfPage">
<txp:thumbnail id="placeholderimgID" />
</a>
</figure>
</txp:evaluate>
</txp:if_article_image>

Last edited by hilaryaq (2019-06-28 08:52:04)

jakob · 2019-06-28 08:51:56

You should try Oleg’s suggestion using txp:evaluate first. That should catch instances where a tag provides no output when the id is not found by Textpattern.

The other way you could provoke a broken image tag is to construct your img src manually: e.g. if you are using the article image field to hold the image ID, you could do:

<img src="/images/<txp:custom_field name="article_image" />.jpg" />

The use of <txp:custom_field name="article_image" /> will output the field contents without checking against what’s actually in the Textpattern database. Then you could use a js/css approach. You won’t be able to access the alt content though if an image doesn’t exist.

Another idea: Going back to the variant where Textpattern provides no output if the image is no longer in the database, you could use a css-based approach:

wrap your image output in a container, e.g. a div without any other contained items.
Make use of the CSS empty selector to provide a placeholder image as a CSS background image for all containers without an img tag.

EDIT: Ah right, you found it worked :-) while I was posting.

hilaryaq · 2019-06-28 09:23:08

Hi Jacob thanks so much for taking the time, those are great solutions too and very usable for other instances! Indeed evaluate worked perfectly :)

Lovely not to have to use a plugin to solve it too.

colak · 2019-06-28 09:24:28

hilaryaq wrote #318585:

Evaluate works! Thanks Oleg!

And everyone else these links are so useful. Posting my code below in case anyone comes across this thread. Handy way to show a placeholder if an image has been deleted via txp but the id is still referenced at article level. Uses rich snippet data.

<txp:if_article_image>...

It’ll be good if the code is also on txp.tips. Would you consider submitting it there?

hilaryaq · 2019-06-28 17:16:17

colak wrote #318588:

It’ll be good if the code is also on txp.tips. Would you consider submitting it there?

I would love to how would I go about that?

Full code below including the ‘if there’s no article image listed’ at article level. This is adaptable whether an article list or single article, I’m also using it on a gallery set up where I reference image id’s in a custom field. Great bit of code. :)

<txp:if_article_image>
<txp:evaluate>
<txp:images limit="1" wraptag="" break="">
<figure class="left" itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<a href="<txp:permlink />" itemprop="url mainEntityOfPage">
<img itemprop="image" src="<txp:image_url thumbnail="1" />" alt="<txp:title />" />
</a>
<meta itemprop="width" content="<txp:image_info type='w' wraptag='' class='' break='' />">
<meta itemprop="height" content="<txp:image_info type='h' wraptag='' class='' break='' />">
<meta itemprop="url" content="<txp:image_url thumbnail="0" />">
</figure>
</txp:images>
<txp:else />
<figure class="left" itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<a href="<txp:permlink />" itemprop="url mainEntityOfPage">
<txp:thumbnail id="placeholderID" />
</a>
</figure>
</txp:evaluate>
<txp:else />
<figure class="left" itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<a href="<txp:permlink />" itemprop="url mainEntityOfPage">
<txp:thumbnail id="placeholderID" />
</a>
</figure>
</txp:if_article_image>

Last edited by hilaryaq (2019-06-28 18:11:36)

colak · 2019-06-28 21:02:56

hilaryaq wrote #318594:

I would love to how would I go about that?

here:)

hilaryaq · 2019-06-28 23:11:26

colak wrote #318595:

here:)

Done! Thanks Yiannis!

I must submit some other snippets I have too that could be useful for people. :)

Textpattern CMS

Textpattern CMS support forum

#1 2019-06-27 17:01:41