Pulling a featured image through to in a menu from a page (not blog post)

[ADuff]

I'm trying to build a simple page which uses a menu to display a list of links. The pages these links go to have featured images, is there any way to get the featured image to appear in the menu?

I'm also open to not using a menu, and just build a custom module, but as far as I can see I can only pull a featured image through from a blog post rather than a regular page? Or have I got that wrong?

[FabianRichter · Accepted solution]

Hi!

You can access the featured image by fetching the page ID from the menu.
Imagine, you got a simple menu with just one layer, no children etc. All menus have an ID, of course. You could then simply get the menu by this ID and iterate through its nodes. By displaying the node inside your loop, you'll see an object for each node, containing things like "url" and also "pageId" (don't know why it's camelcase here). By handing this ID over to the content_by_id function you'll get the featured image. Try the following code:

{% for node in menu(<your menu ID>) %}
  {{ content_by_id(node.pageId).featured_image }}
{% endfor %}

 Just remember, you can call this content_by_id function only 10 times per page. It would definitely make sense to use the content_by_ids function instead. Here you pass your IDs at once and get an array back with the data.

The code for this would look somehow like this (tried it and it works):

{# collect the IDs from your menu #}
{% set ids = [] %}
{% for node in menu(<your menu ID>) %}
    {% do ids.append(node.pageId) %}
{% endfor %}

{# get page data form IDs #}
{% set contents = content_by_ids(ids) %}
{% for content in contents %}
    <a href="{{ content.url }}">{{ content.title }}</a>
    <img src="{{ content.featured_image}}">
{% endfor %}

Let me know, if that helped!
Fabian

[ADuff]

Hey Fabian,

Works like a charm. Never thought to call the page ID to then call the featured image. 

{% set default_node = menu(module.menu_field) %}
{% for child in default_node.children %}
<div class="product-list-wrapper">
<a href="{{ child.url }}" title="{{ child.pageTitle }}">
<img src="{{ content_by_id(child.pageId).featured_image }}" alt="{{ child.pageTitle }}" />
</a>
<a href="{{ child.url }}" title="{{ child.pageTitle }}">{{ child.pageTitle }}</a>
</div>
{% endfor %}

Works perfectly. Thanks for your help. 

[Stephanie-OG]

Hi there!

You should be able to use the HubL tag like you would for a blog post. 

{{ content.featured_image }}

It seemed to work for me even though it's listed under blog in the documentation.

A helpful way to see what variables are available on a page is to click on the sprocket icon at the top and go to "Developer Info", there you can find the path you'll need to get some info, in this case:

"content": {
  ...
  "featured_image": "https://www.website.com/featured-image",
  ...
}

---

Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

[ADuff]

Hi Stephanie,

Looks like it won't pull through using the menu function. I'll try pulling the child pages through instead of using a menu and see if I can get it work in that way.

[dennisedson]

@Stephanie-OG !!!!

Welcome home!!! We missed you!