[Resolved] Custom field image in page header

[David]

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

[Tom]

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.

[David]

Hi Tom

I changed the Return format in custom fields to image URL, but still no luck… any other ideas?

Thanks
Dave

[Tom]

I’m still seeing the ID as the URL: https://www.screencast.com/t/CuOLdnOmlvqs

[David]

Any ideas why it’s doing that as I’ve changed the custom field to this…

https://ibb.co/85HHGmQ

[David]

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.

[David]

Thanks David, this did the trick…

[acf field='header_icon']

[David]

Glad to be of help.
Thanks for sharing your solution 🙂

[Author]

Posts