Background images in navigation - Don't get individual link attributes

Hello,

I’m struggling at a clients request to have individual images be shown when user mouse overs a navigation link in menu.

The images are drawn from a snippet (produktFotoNavi) that gets file name info via TV named Basistyp.

What I did is entering in link attributes of the pages:



In Wayfinder row template I use:



I wanted wf.attributes to be filled with the individual image based on the individual link attribute and with TV Basistyp that has been set for the linked page.

Wayfinder is called cached, the snippet in the link attribute uncached. I also tried vice versa but had no success.

This doesn’t work - the background image when hovering navigation links is always the same - that of the TV Basistyp of the page I am on (not of the page linked by the link I’m hovering over). The snippet itself does work, returning an image src.

Am I missing some easy point or you think it’s the wrong way?

Thanks if somebody can help!

hi,

well, wayfinder is not exactly designed to play with tv, this is more a ditto job...

now, if i were you i would do this with js...
- naming the image after the alias of the page
- why not, putting the alias in the title but not necessary

then with js, whatever framework you use it’s easy to retreive either the title property or the href (split it with / and get the last part, it’s the alias)
now, the syntax will depend on which framework you use but it’s quite easy to get the right image adding the extension to the alias and put it as a background on mouseover with js

you could even first look for all the images you’ll need and preload them to prevent ie from blinking on mouseover

have swing

Thanks for the hint to the JavaScript solution, that’s a good and possible way.

Only thing, I’m not sure if the aliases would be changed some time by the client i.e. according to SEO strategies, I now put the background image directly in the link attribute, which is working. These are not too much documents as it is kind of category level, not product level which would be more, so it can be handeled.

Thanks in any case for your support!

style="background-image:url([!produktFotoNavi? &basistyp=`[*Basistyp*]`!]);"

I think you just need to replace [tt][*Basistyp*][/tt] by [tt][+Basistyp+][/tt]

Thanks for your idea, but it doesn’t work as well.

Did you try to call the snippet [tt]produktFotoNavi[/tt] cached?