Archived topic
Custom field image in page header
7 replies · Started by David on February 14, 2020
Hello
I'm trying to add a icon image that is upload via a page in to a page header template, but not having much luck - the icon image needs to go the the right of the text and this is what I currently have...
<div id="header-block">
<div class="grid-container">
<div class="grid-60 tablet-grid-60 mobile-grid-100 header-left center-vertical">
<h1>{{custom_field.page_header}}</h1>
</div>
<div class="grid-40 tablet-grid-40 mobile-grid-100 header-right center-vertical">
<img class="h-icon" src="{{custom_field.header_icon}}" />
</div>
</div>
</div>The custom filed tag works fine for the text on the right, but not for the image. Any ideas what I need to do...
http://185.20.51.60/~rapidpersonnelco/clients/
Thanks
Dave
Hi there,
It looks like your icon custom field is returning a number - probably the ID of the image? It needs to return the URL of the image itself to work.
Hi Tom
I changed the Return format in custom fields to image URL, but still no luck... any other ideas?
Thanks
Dave
I'm still seeing the ID as the URL: https://www.screencast.com/t/CuOLdnOmlvqs
Any ideas why it's doing that as I've changed the custom field to this...
This may explain - ACF stores the ID not the URL:
https://support.advancedcustomfields.com/forums/topic/image-url-returns-id-and-not-a-string/
Perhaps take look at the ACF shortcodes for the the_field() function.
Thanks David, this did the trick...
[acf field='header_icon']
Glad to be of help.
Thanks for sharing your solution :)
