Including a Page link in the Top Categories Navigation Set

[lesliekirk]

Including a Page link in the Top Categories Navigation Set is the easy part. How do I also get an image to display with it? The categories all can have a Custom Category Field to include the image path. How do I fudge the "system" to also have an image for the linked page?

[Matt Zimmermann]

Hi Leslie,

You may have to create the "page" as a category, create a new page that has the content you want, and set the "page" category to use the new page as the layout.

[Bruce - PhosphorMedia]

Including a Page link in the Top Categories Navigation Set is the easy part. How do I also get an image to display with it? The categories all can have a Custom Category Field to include the image path. How do I fudge the "system" to also have an image for the linked page?

Do the navigation set still not have a category code or ID in the navigations array?

[lesliekirk]

Do the navigation set still not have a category code or ID in the navigations array?

I don't think a Page link would have a category code but it might have an ID...

[Bruce - PhosphorMedia]

ok, confused. You mentioned Custom Category images so I assumed the link was to a category. If the link is to a page you would need another approach, depending on the number of pages you are looking to create a image link, you might need something like this (pseudo code)

ASSIGN PageImage_A to /this/path/filename
ASSIGN PageImage_B to /this/path/filename
ASSIGN PageImage_C to /this/path/filename
ASSIGN PageImage_D to /this/path/filename

and then in the loop

IF page_url EQ 'xxxx'
EVAL PageImage_A
ELSEIF page_url EQ 'yyyy'
EVAL PageImage_B

You of course could just straigh eval the image path, but the above method would make management/updating slightly easier and less prone to breaking things.

[charmandhammer]

I'm glad I'm not the only one having trouble with this ;) Here's the info from the top categories navigation set... the alt nav item name shows not the image.. so where does or should it pull the image from? Shouldn't it pull from the cat title image or cat tree image? one of those?

<mvt:if expr="NOT ISNULL l.settings:readytheme:navigationitems">
<section class="o-layout t-featured-categories t-defer-object" data-defer>
<h4 class="o-layout__item u-width-12 c-heading-charlie u-text-bold u-text-center x-product-list__heading t-featured-categories__heading">Top Categories</h4>
<mvt:foreach iterator="navigationitem" array="readytheme:navigationitems">
<mvt:item name="customfields" param="Read_Category_Code(l.settings:navigationite m:link_dest, 'top_category_image', l.settings:navigationitem:top_category_image)" />
<div class="o-layout__item u-width-6 u-width-3--m u-text-center x-product-list__item">
<a class="u-block u-color-black x-product-list__link" href="&mvte:navigationitem:url;" target="&mvte:navigationitem:link_targ;">
<figure class="x-product-list__figure">
<picture>
<img class="x-product-list__image" data-src="&mvte:navigationitem:top_category_image;" src="" alt="&mvte:navigationitem:name;">
</picture>
<figcaption class="x-product-list__figure-caption">
<span class="x-product-list__name">&mvte:navigationitem:name;</span>
</figcaption>
</figure>
</a>
</div>
</mvt:foreach>
</section>
<br>
<!-- end t-featured-categories -->
</mvt:if>

[Matt Zimmermann]

charmandhammer - The categories you are using for this section should have an image uploaded to the "Top Category Image" custom field for it to show.

[charmandhammer]

That Works! Thank you.