Adding thumbnail image to dropdown bootstrap menu

4 posts by 2 authors in: Forums > CMS Builder
Last Post: January 26, 2017   (RSS)

By ross - January 25, 2017

Hi there

Thanks for posting.

What you'll need is some "if logic" to determine if the category being displayed is a child or not.

The way I'd do that is with $category['depth'] like this:

<?php if( $category['depth'] > 0): ?> IMAGE CODE GOES HERE <?php endif ?>

See how the code is only going to run of the category "depth" is greater than 0? 

The next step is to add in your image code where you see "IMAGE CODE GOES HERE".

Once you have that, you just need to add it to your existing code block that you posted.

Does that make sense?

Give it a shot and post back your code after you get as far as you can.

Thanks.

-----------------------------------------------------------
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com

Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/

By JeffC - January 26, 2017

Nailed it, thanks Ross

Below is the complete code for anyone else who may need it.

This code pulls the first image from the field 'photo_gallery' and displays it as a thumbnail image in the dropdown menu:

<div class="navbar navbar-default" role="navigation"> 
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span>&#9776; Menu</button>
<span class="navbar-brand visible-xs-block"><?php echo htmlspecialchars($website_config['website_name']) ?>
</div> 
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<?php foreach($categories as $category): ?>
<?php echo $category['_listItemStart']; ?>      
<a href="<?php echo $category['_link']; ?> "  <?php if($category['_hasChild'] && $category['depth'] == '0'): ?>class="dropdown-toggle" data-toggle="dropdown"<?php endif; ?>  >
<?php echo $category['name']; ?> <?php if($category['_hasChild'] && $category['depth'] == '0'): ?><span class="caret"></span><?php endif; ?>

<?php if( $category['depth'] > 0): ?>
<?php $uploadCount = 0; ?>
<?php foreach ($category['photo_gallery'] as $upload): ?>
<?php $uploadCount++ ;?>
<?php if ($uploadCount == 1): // first image ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" class="thumbnail" width="100%" alt="<?php echo htmlspecialchars($upload['info3']) ?>" />
<?php endif ?>
<?php endforeach ?> 
<?php endif ?>
</a>
<?php echo $category['_listItemEnd']; ?>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>

Jeff

By ross - January 26, 2017

Hi Jeff

Great :)

One thing you could look at is condensing a bit of the code if you like. This is not a requirement; it's just a suggestion on how to use less code.

Instead of initializing, then incrementing and finally checking a $counter variable to see if you are on the first image, you can actually do it in one line:

if (!@$counter++) { continue; }

This would go right after the "foreach" loop displaying you image like this:

<?php foreach ($category['photo_gallery'] as $upload): ?>
<?php if (!@$counter++) { continue; } ?>

And then you can remove these four lines:

<?php $uploadCount = 0; ?>

<?php $uploadCount++ ;?>

<?php if ($uploadCount == 1):?>

<?php endif ?> 

Give that a shot if you like and let me know how you make out.

Thanks!

-----------------------------------------------------------
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com

Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/