Forums

Display Image/file Attribute in Autonav template

Permalink 2 users found helpful
I have created a custom page attribute for a page type. I would the image/file attribute to display in an autonav block.

I figured out where the custom attribute would be defined, I just don't know how to code the php.

echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">{{IMAGE/FILE ATTRIBUTE PHP HERE}}' . $ni->name . '</a>';


I just don't know what code would go in there, and anywhere else if needed on the standeard autonav block. I have been ripping through the forums for days and there is no solution for this. I am not seeing anything in Jordan Levs autonav block that answers this question.

Any help would be greatly appreciated!
jlines41
 
jordanlev replied on at Permalink Best Answer Reply
jordanlev
First get the image from the attribute, then you probably want to generate a thumbnail (smaller size) for it, then you want to output the html image tag for it. Here is some example code (you can put this code just above the "echo <a href=..." line you pasted in your question):
$img = $ni->cObj->getAttribute('your_attribute_handle');
if ($img) {
  $thumb = $ih->getThumbnail($img, 200, 100, false); //<--set thumbnail width/height here, and change FALSE to TRUE if you want the thumbnail cropped
  echo '<img src="' . $thumb->src . '" width="' . $thumb->width . '" height="' . $thumb->height . '" alt="" />';
}

ALSO: Put this line near the top of the template file (somewhere OUTSIDE the "foreach" loop, because you only want it to get called once per template, not over and over again inside the loop):
$ih = Loader::helper('image');


Hope that helps!

-Jordan
jlines41 replied on at Permalink Reply
jlines41
Let my start of by saying that it is an honor to have The Legend himself answer my post!!

Needless to say, Jordan's solution above works perfect.

Thanks a ton Jordan. I will be writing a how-to for this so future programers can easily tackle this. I will be sure to give you much deserved credit on the php!

Sincerely,
Jim
jlines41 replied on at Permalink Reply
jlines41
Hi Jordan,

Is there a way to get the image inside of the: <a href="#">image in here</a>

Right now the html output looks like

<li class=""><img src="/files/cache/ca5bc74b6d846486cb2f11e7ac948e0b_f15.png" width="155" height="97" alt="" /><a href="/index.php/link/" target="_self" class="">link text</a></li>


Is there a way to get the image inside of the link tags?
jordanlev replied on at Permalink Reply
jordanlev
You just need to move the code around so it outputs the markup in the way you want. If you can't figure it out to your liking, can you post your template file so I can show you what it could look like?
jlines41 replied on at Permalink Reply
jlines41
To get the image inside the <a> tag, follow Jordans solution above.

delete the

echo '<img src="' . $thumb->src . '" width="' . $thumb->width . '" height="' . $thumb->height . '" alt="" />';
}


Insert this (part of what you just deleted) 

<img src="' . $thumb->src . '" width="' . $thumb->width . '" height="' . $thumb->height . '" alt="" />


inside of (look where it says HERE below)

echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">HERE' . $ni->name . '</a>';
jlines41 replied on at Permalink Reply
jlines41
So basically, the whole step 2 of the standard auto nav view.php looks like this

echo '<ul class="nav">'; //opens the top-level menu
foreach ($navItems as $ni) {
   echo '<li class="' . $ni->classes . '">'; //opens a nav item
$img = $ni->cObj->getAttribute('YOUR_HANDLE_HERE');
if ($img) {
  $thumb = $ih->getThumbnail($img, 200, 100, false); //<--set thumbnail width/height here, and change FALSE to TRUE if you want the thumbnail cropped
}
echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '"><img src="' . $thumb->src . '" width="' . $thumb->width . '" height="' . $thumb->height . '" alt="" />' . $ni->name . '</a>';
   if ($ni->hasSubmenu) {
      echo '<ul>'; //opens a dropdown sub-menu
   } else {
      echo '</li>'; //closes a nav item
      echo str_repeat('</ul></li>', $ni->subDepth); //closes dropdown sub-menu(s) and their top-level nav item(s)
   }
}
Viewing 15 lines of 16 lines. View entire code block.
jordanlev replied on at Permalink Reply
jordanlev
Glad you were able to figure this out -- congrats!

One caveat about your code though: as long as you know that every page in the nav will have the attribute provided, then it's fine. But if there's a page where a user didn't set that attribute, then you'll get an error. To avoid this, you can extend the "if" statement so if the attribute exists you get the thumbnail AND output the link with the image, but if the attribute doesn't exist then just display the link text without an image (just like it is in the default template before you modified it). Here is your code with this addition in it:

echo '<ul class="nav">'; //opens the top-level menu
foreach ($navItems as $ni) {
   echo '<li class="' . $ni->classes . '">'; //opens a nav item
   $img = $ni->cObj->getAttribute('YOUR_HANDLE_HERE');
   if ($img) {
      $thumb = $ih->getThumbnail($img, 200, 100, false); //<--set thumbnail width/height here, and change FALSE to TRUE if you want the thumbnail cropped
      echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '"><img src="' . $thumb->src . '" width="' . $thumb->width . '" height="' . $thumb->height . '" alt="" />' . $ni->name . '</a>';
   } else {
      echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $ni->name . '</a>';
   }
   if ($ni->hasSubmenu) {
      echo '<ul>'; //opens a dropdown sub-menu
   } else {
      echo '</li>'; //closes a nav item
      echo str_repeat('</ul></li>', $ni->subDepth); //closes dropdown sub-menu(s) and their top-level nav item(s)
Viewing 15 lines of 18 lines. View entire code block.


-Jordan

--
PS - you might be interested in my new technical blog about Concrete5:http://concrete5tricks.com