Forums

Auto Nav with images

Permalink
Is there any way to associate an image with an auto nav link so it appears next to or above the link and so the image becomes the link as well as the text.
artisancreative
 
jbx replied on at Permalink Reply
jbx
Absolutely - 2 ways...

For both methods you will need to create a custom template for the autonav. So if you're currently using the default autonav, then create the following folder structure:
/blocks/autonav/templates/. Then copy /concrete/blocks/autonav/view.php to blocks/autonav/templates/image_nav.php. This is the file you will be editing now.

1st) create an image in your theme folder with the same name as the page handle. You can then add that image to your autonav by doing: 
<img src="<?php echo $this->getThemePath() . '/img/' . $_c->vObj->cvHandle . '.jpg' ?> />

** Not 100% sure you can do $this->getThemePath() from a block template. Try it and let me know if you get an error...

2nd) add an image attribute to your page with a handle like 'pageIcon' and when you create a new page or edit an existing one, you can select an image for the page. Then in your autonav template you should be able to do this: 
<?php $img = $_c->getCollectionAttributeValue('pageIcon');
$src = $img->getRelativePath(); ?>
<img src="<?php echo $src ?>" />


Hope that helps

Jon
artisancreative replied on at Permalink Reply
artisancreative
brilliant, thank you for the fast detailed answer, I'll give it a go :)
jbx replied on at Permalink Reply
jbx
No problem - let me know how you get on...

Jon
artisancreative replied on at Permalink Reply
artisancreative
Hi, I tried the second method and it just came up with an error.

But the page design has now changed tho I think the new style still needs to make use of a similar method.

take a look atwww.www.artisan-creative.co.uk/kohler...

The navigation on the left is auto nav but each item needs to be associated with its own custom colour, which I would also like to carry through to the page when you click on the link. At the moment I've just added a background image to display the colours for the navigation, but I guess the proper way would be to add an attribute to each page which controls the colour? I've never had a chance to learn much about this side of C5 so am at a bit of a loss.
barkingtuna replied on at Permalink Reply
barkingtuna
Hello,

I found your old comment here and had a question. I've followed all steps leading up to 1)... "You can then add that image to your autonav by doing:" and then some code. Where exactly do you put that line of code? Do you drop it into the newly made blocks/autonav/templates/image_nav.php file, and if so, where exactly? Or, do drop that into the pagetype template file where the autonav block is? Am I making sense? I am just learning more advanced PHP but I can follow instructions.

The same goes for option 2. What autonav template file are you referencing and where in that file do we drop that code if we want to try the page attribute route in option 2?