Adding thumbnail image to dropdown bootstrap menu
4 posts by 2 authors in: Forums > CMS Builder
Last Post: January 26, 2017 (RSS)
By JeffC - January 24, 2017
Below is the working code for a dropdown Bootstrap menu. Please could someone help me include an img tag so that each of the child category items have a thumb, but not the parent categories?
Any help gratefully received.
<!-- default navbar -->
<div class="container containerNav maxWidth">
<div class="row marginBottom hidden-xs">
<div class="col-xs-12 text-center">
<h1>Company Name</h1>
</div>
</div>
<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>☰ 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; ?></a>
<?php echo $category['_listItemEnd']; ?>
<?php endforeach; ?>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
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>☰ 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>
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/