Forum
Gallery with item details in Bootstrap theme
Hi,
first post and new to Perch. I love it so far, so much easier and more fun than for example Wordpress:) Sorry if this has been asked in another thread, have searched but did not find.
I have a Bootstrap theme with a gallery. Gallery items is contained in a html list and has a thumbnail and a link to a div with more info about the item. How do I use Perch best to let the editor of the site add new portfolio items with a link for each item that display the div with more info? Is it possible to add all in one template in perch, or should I use two templates (one for thumb and one for more info)? And how do I link smartest from each thumb to their own div with more info?
Appreciate all help I can get to look in the right direction for a solution.
Here is that part of the Bootstrap template code:
<div class="grey-section dm-shadow">
<div class="container">
<div class="portfolio clearfix">
<div class="filters">
<a href="#" class="filter-active">All</a>
<a href="#design">Design</a>
<a href="#inspiration">Inspiration</a>
<a href="#photoshop">Photoshop</a>
<a href="#vector">Vector</a>
</div><!-- filters -->
<ul class="list">
<li class="col-lg-3 col-md-3 col-sm-6 col-xs-12 inspiration" data-content="#colio_c1">
<div class="thumb">
<div class="view">
<a class="btn btn-primary button colio-link" href="#">View Project</a>
</div>
<img src="demos/portfolio_01.jpg" alt="">
</div>
<h4><a class="colio-link" href="#">Artjunks Vector Object</a></h4>
<p><i class="fa fa-folder-open-o"></i> <a href="#" title=""> Design</a>, <a href="#" title="">Inspiration</a></p>
</li>
<li class="col-lg-3 col-md-3 col-sm-6 col-xs-12 design" data-content="#colio_c1">
<div class="thumb">
<div class="view">
<a class="btn btn-primary button colio-link" href="#">View Project</a>
</div>
<img src="demos/portfolio_02.jpg" alt="">
</div>
<h4><a class="colio-link" href="#">Dry head design</a></h4>
<p><i class="fa fa-folder-open-o"></i> <a href="#" title=""> Design</a>, <a href="#" title="">Inspiration</a></p>
</li>
<li class="col-lg-3 col-md-3 col-sm-6 col-xs-12 vector" data-content="#colio_c1">
<div class="thumb">
<div class="view">
<a class="btn btn-primary button colio-link" href="#">View Project</a>
</div>
<img src="demos/portfolio_03.jpg" alt="">
</div>
<h4><a class="colio-link" href="#">Bicyclists objects</a></h4>
<p><i class="fa fa-folder-open-o"></i> <a href="#" title=""> Vector</a></p>
</li>
<li class="col-lg-3 col-md-3 col-sm-6 col-xs-12 inspiration" data-content="#colio_c1">
<div class="thumb">
<div class="view">
<a class="btn btn-primary button colio-link" href="#">View Project</a>
</div>
<img src="demos/portfolio_04.jpg" alt="">
</div>
<h4><a class="colio-link" href="#">Country Music lover</a></h4>
<p><i class="fa fa-folder-open-o"></i> <a href="#" title=""> Vector</a>, <a href="#" title="">Inspiration</a></p>
</li>
<li class="col-lg-3 col-md-3 col-sm-6 col-xs-12 photoshop" data-content="#colio_c1">
<div class="thumb">
<div class="view">
<a class="btn btn-primary button colio-link" href="#">View Project</a>
</div>
<img src="demos/portfolio_05.jpg" alt="">
</div>
<h4><a class="colio-link" href="#">Oldskul Smart Object</a></h4>
<p><i class="fa fa-folder-open-o"></i> <a href="#" title=""> Photoshop</a></p>
</li>
<li class="col-lg-3 col-md-3 col-sm-6 col-xs-12 inspiration" data-content="#colio_c1">
<div class="thumb">
<div class="view">
<a class="btn btn-primary button colio-link" href="#">View Project</a>
</div>
<img src="demos/portfolio_06.jpg" alt="">
</div>
<h4><a class="colio-link" href="#">Time to party</a></h4>
<p><i class="fa fa-folder-open-o"></i> <a href="#" title=""> Vector</a>, <a href="#" title="">Inspiration</a></p>
</li>
<li class="col-lg-3 col-md-3 col-sm-6 col-xs-12 inspiration" data-content="#colio_c1">
<div class="thumb">
<div class="view">
<a class="btn btn-primary button colio-link" href="#">View Project</a>
</div>
<img src="demos/portfolio_07.jpg" alt="">
</div>
<h4><a class="colio-link" href="#">Death Metal Forever</a></h4>
<p><i class="fa fa-folder-open-o"></i> <a href="#" title="">Inspiration</a></p>
</li>
<li class="col-lg-3 col-md-3 col-sm-6 col-xs-12 design" data-content="#colio_c1">
<div class="thumb">
<div class="view">
<a class="btn btn-primary button colio-link" href="#">View Project</a>
</div>
<img src="demos/portfolio_08.jpg" alt="">
</div>
<h4><a class="colio-link" href="#">A Party Man</a></h4>
<p><i class="fa fa-folder-open-o"></i> <a href="#" title=""> Design</a>, <a href="#" title="">Photoshop</a></p>
</li>
<li class="col-lg-3 col-md-3 col-sm-6 col-xs-12 photoshop" data-content="#colio_c1">
<div class="thumb">
<div class="view">
<a class="btn btn-primary button colio-link" href="#">View Project</a>
</div>
<img src="demos/portfolio_09.jpg" alt="">
</div>
<h4><a class="colio-link" href="#">Classic purple smarties</a></h4>
<p><i class="fa fa-folder-open-o"></i> <a href="#" title=""> Photoshop</a></p>
</li>
<li class="col-lg-3 col-md-3 col-sm-6 col-xs-12 inspiration" data-content="#colio_c1">
<div class="thumb">
<div class="view">
<a class="btn btn-primary button colio-link" href="#">View Project</a>
</div>
<img src="demos/portfolio_10.jpg" alt="">
</div>
<h4><a class="colio-link" href="#">Blue endustries</a></h4>
<p><i class="fa fa-folder-open-o"></i> <a href="#" title=""> Vector</a>, <a href="#" title="">Inspiration</a></p>
</li>
<li class="col-lg-3 col-md-3 col-sm-6 col-xs-12 inspiration" data-content="#colio_c1">
<div class="thumb">
<div class="view">
<a class="btn btn-primary button colio-link" href="#">View Project</a>
</div>
<img src="demos/portfolio_11.jpg" alt="">
</div>
<h4><a class="colio-link" href="#">Happy Day objects</a></h4>
<p><i class="fa fa-folder-open-o"></i> <a href="#" title="">Inspiration</a></p>
</li>
<li class="col-lg-3 col-md-3 col-sm-6 col-xs-12 design" data-content="#colio_c1">
<div class="thumb">
<div class="view">
<a class="btn btn-primary button colio-link" href="#">View Project</a>
</div>
<img src="demos/portfolio_12.jpg" alt="">
</div>
<h4><a class="colio-link" href="#">An amazing car vector</a></h4>
<p><i class="fa fa-folder-open-o"></i> <a href="#" title=""> Design</a>, <a href="#" title="">Photoshop</a></p>
</li>
</ul><!-- list -->
</div><!-- portfolio -->
<div id="colio_c1" class="colio-content">
<div class="main">
<h3>Single Portfolio Item</h3>
<p> Maecenas justo nibh, pulvinar non diam vitae, aliquet tincidunt arcu. Proin elementum bibendum vehicula. Sed rutrum at dui dictum tempus. Nunc a mauris nec velit pulvinar rhoncus ac non felis. Fusce dignissim egestas sem at sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum dui est, pharetra et sapien faucibus, sodales ornare erat. </p>
<blockquote>Proin sed ante a elit mattis viverra. Proin varius volutpat nunc sed accumsan. Aenean eget semper risus.</blockquote>
<a class="visit-link" href="https://codecanyon.net">Visit Site</a>
</div><!-- main -->
<div class="side">
<ul class="feed">
<li>
<a class="fancybox" href="demos/portfolio_01.jpg">
<img class="img-responsive" src="demos/portfolio_01.jpg" alt="">
</a>
</li>
<li>
<a class="fancybox" href="demos/portfolio_02.jpg">
<img class="img-responsive" src="demos/portfolio_02.jpg" alt="">
</a>
</li>
<li>
<a class="fancybox" href="demos/portfolio_03.jpg">
<img class="img-responsive" src="demos/portfolio_03.jpg" alt="">
</a>
</li>
<li>
<a class="fancybox" href="demos/portfolio_04.jpg">
<img class="img-responsive" src="demos/portfolio_04.jpg" alt="">
</a>
</li>
<li>
<a class="fancybox" href="demos/portfolio_05.jpg">
<img class="img-responsive" src="demos/portfolio_05.jpg" alt="">
</a>
</li>
<li>
<a class="fancybox" href="demos/portfolio_06.jpg">
<img class="img-responsive" src="demos/portfolio_06.jpg" alt="">
</a>
</li>
</ul>
</div><!-- side -->
</div><!-- colio-content # colio_c1 -->
</div><!-- end container -->
There's a couple of resources to look at.
https://docs.grabaperch.com/video/v/gallery-a-simple-portfolio/
https://docs.grabaperch.com/video/v/portfolio-with-categories/
Thank you! Did found thoose before, but thught they where about the gallery plugin only. Taking a look:)