Show custom field content in a loop

Hello, I have created a custom field called “alternative”. It’s content is an image name. I want to show the image in post loop (like an alternative featured image) but I did not see how to do this in documentation.

Hi Jean-Michel, this page in the docs should clear things up for you. Let me know if that answers things or if you’ve got questions after reading that page :slight_smile:

https://docs.loopsandlogic.com/122/how-to-display-a-custom-field-that-contains-an-image?category_id=8

Thanks for your quick answer. I’ve read this - and tried to understand - before asking but a second read was necessary. I’m not sure I understand clearly.
The custom field is named alternative_image. It’s content is an image name (as test.jpg). I’ve tried this code

 <Loop type=post count=6>
  <Field title />
    <a href="{Field url}"><Field title /></a>
  <Field alternative_image />
  <If not last>, </If>
</Loop>

but it does not render the image name.

OK, it works in single template but not in an index loop.

Did you create the alternative_image field with ACF? And if so, could you clarify the field type? I know that in an ACF image field, the data that’s stored in the actual field on a post is just the ID of an attachment that exists separately from the post over in the media library. So if you were working with an ACF image field, <Field alternative_image /> would just output something like 1234 or whatever the ID number of your image is. That’s why the docs suggest that you’d need to pass that ID to an attachment loop if you wanted to get any other data about the image (such as its content, URL, or filename).

Could you clarify what actually gets output when you write <Field alternative_image /> in different contexts? Also, is that the only field that isn’t working on your index template? I assume that’s what you mean by index loop.

The field contains only the name of the file (so a text like example.jpg) - and it’s a regular custom field, not an ACF.
I’m working on a FSE theme and if <Field alternative_image /> works in single template, it won’t work in the loop in index template.

what do you mean by regular custom field? Is it a text field? An image field? There are many types of custom fields.

I know only one type of regular custom field and it’s text - Assign custom fields – WordPress.org Documentation

I guess you use a regular WordPress custom field which i think is a simple text field, not typed.

If so, i guess you could enter the image URL in the custom field as the value, and use the output in a HTML image markup in the L&L template, something like that:

<img src="{Field alternative_image}" />

Hi Jean-Michel,

I also store alternative images using a custom field. You can call the custom field ‘alternative_image’ using the Field tag as suggested by @avanti.

I’ve modified my own loop to look for your ‘alternative_image’ field and use this if available. If the ‘alternative_image’ field does not exist, it will use the default post image.

This template includes some extra stuff which might be useful. :slight_smile:

NB. This loop will look for the alternative image in the root folder of your website:
https://your-website.com/alt_image.jpg

<Loop type="post" count="6">
    <!--Posts Item-->
    <div class="posts-item">
        <!--Check for alt post image-->
        <If field="alternative_image" exists>
            <div class="posts-image">
                <a href="{Field url}" target="_self">
                    <img src="{Field alternative_image}" /></a>
            </div>
            <Else />
            <!--Revert to default post image-->
            <div class="posts-image">
                <a href="{Field url}" target="_self">
                    <Field image /></a>
            </div>
        </If>
        <!--Posts Content-->
        <div class="posts-content">
            <!--Posts Title-->
            <h1 class="posts-title">
                <a href="{Field url}" target="_self">
                    <Field title /></a>
            </h1>
            <!--Posts Excerpt-->
            <div class="posts-excerpt">
                <p>
                    <Field excerpt auto="true" words="30" />
                </p>
            </div>
            <!--Posts Button-->
            <a href="{Field url}" target="_self">
                <button class="posts-button">
                    <span>
                        Read more</span>
                </button>
            </a>
        </div>
    </div>
</Loop>
1 Like

Thanks a lot. But there are already hundred of posts with this custom field and I will have to update through the database all field content to change file name to proper URL.
The big problem, for the moment, is that the content does not show in a loop in index template in a FSE theme. So if text does not show, I suppose that an URL won’t show.

Thanks a lot for the code. I will have the use for it. But, as I said, the problem is that the content does not show in a loop in index template in a FSE theme. So if text does not show, I suppose that an URL won’t show.

I don’t see how the image URL could be found by the template if it’s not provided in the field value…
You should have used a complete custom fields tool that handles the image type and is able to link the image file to its media post and return the correct data in the template.

Maybe it’s still recoverable IF the media library doesn’t use date folders, by searching-replacing images in the DB for this custom field (add the URL by code) but it might be tricky.

If your L&L template doesn’t return anything in the frontend, that’s another problem, probably settings not working somewhere.

I missed that point but that might be a bug that needs to be fixed by Tangible.

Have you tried adding the template using different methods? E.g. Tangible Template Block, Shortcode Block or HTML Block with Shortcode?

I’m not sure what insertion options exist for FSE themes but there might be a workaround if it’s a bug.

I’ve tried Tangible block. It works with the single template in FSE theme, so I suppose it’s a bug.

Templates can also be added with Shortcodes so I would try that as it may bypass whatever is causing your issue.

https://docs.loopsandlogic.com/82/template?category_id=62#shortcode

I just made a try. Same issue with shortcode.

FSE right now has some major flaws that require complex workarounds. Issues are open on their github but it’s unclear if/when they will be fixed. It unfortunately requires a lot of work to get things to behave as expected in that context, so it’s very possible this is a “bug” in the sense that flaws in WP core will require us to write more extensive workarounds here. I see we already have half a dozen new improvements to these workarounds committed in the development branch so this may already be solved in the next version. That being said I’ll be sure to see if we can replicate the issue and squash it in an upcoming version if those changes don’t do it.

1 Like

Thanks, I will wait for the next version.

WordPress should not be rushing out buggy code for features that are already well supported by numerous plugins. That’s not good for WordPress in general and there’s tons of existing functionality they could be improving instead.

Seems like they are worried about competition from Squarespace and Wix etc. but they are paid services and not as amazing as they claim to be. :man_shrugging:t2:

1 Like