Forum
Portfolio items not showing based on slug
In my portfolio I´m using the solution with a page that shows either a list of items, or if there is a slug, the detail page for an item [original code:] (https://solutions.grabaperch.com/architecture/how-do-i-create-list-detail-pages)
After putting the code in the template I´m using, I get the list to work. But the detail page shows only the latest added item, and I can´t se any slug in the address field in the browser.
Can someone here see if there is something wrong with the link code in the list template maybe?
<a class="btn btn-primary button colio-link" href="?s=<perch:content id="slug" type="slug" />">
<perch:content id="viewmore" type="text" />
This is my php portfolio page:
<?php include('perch/runtime.php');?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test</title>
</head>
<body>
<?php
perch_content_create('Portfolio', array(
'template' => 'portfolio_detail.html',
'multiple' => true,
'edit-mode' => 'listdetail',
));
if (perch_get('s')) {
// Detail mode
perch_content_custom('Portfolio', array(
'template' => 'portfolio_detail.html',
'filter' => 'slug',
'match' => 'eq',
'value' => perch_get('s'),
'count' => 1,
));
} else {
// List mode
perch_content_custom('Portfolio', array(
'template' => 'portfolio_listing.html',
));
}
?>
</div><!-- colio-content # colio_c1 -->
</div><!-- end container -->
</div><!-- end grey-section -->
<!-- Main Scripts-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/retina-1.1.0.js"></script>
<script src="js/custom.js"></script>
<!-- Portfolio & Lightbox Scripts-->
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/jquery.colio.min.js"></script>
<script src="fancybox/jquery.fancybox.js"></script>
<script>
(function($) {
"use strict";
$(document).ready(function(){
// "scrollTop" plugin
$.scrollUp();
// "colio" plugin
$('.portfolio .list').colio({
id: 'demo_1',
theme: 'black',
placement: 'inside',
hiddenItems: '.isotope-hidden',
onContent: function(content){
// init "fancybox" plugin
$('.fancybox', content).fancybox();
}
});
// "isotope" plugin
var filter = '*', isotope_run = function(f) {
$('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f}).
trigger('colio','excludeHidden');
};
$('.portfolio .filters a').click(function(){
$(this).addClass('filter-active').siblings().removeClass('filter-active');
var href = $(this).attr('href').substr(1);
filter = href ? '.' + href : '*';
isotope_run(filter);
return false;
});
isotope_run(filter);
});
})(jQuery);
</script>
</body>
</html>
And this is the html list template:
<perch:before>
<ul class="list">
</perch:before>
<li class="col-lg-3 col-md-3 col-sm-6 col-xs-12" data-content="#colio_c1">
<div class="thumb">
<div class="view">
<a class="btn btn-primary button colio-link" href="?s=<perch:content id="slug" type="slug" />">
<perch:content id="viewmore" type="text" />
</a>
</div>
<perch:content id="image" type="image" output="tag" />
</div>
<h4><a class="colio-link" href="?s=<perch:content id="slug" type="slug" />"><perch:content id="title" /></a></h4>
<p><i class="fa fa-folder-open-o"></i> <a href="#" title=""> Design</a>, <a href="#" title="">Inspiration</a></p>
</li>
<perch:after>
</ul><!-- list -->
</div><!-- portfolio -->
<perch:template path="content/portfolio_detail.html" />
</perch:after>
And finally, the html detail template:
<div id="colio_c1" class="colio-content">
<div class="main">
<h3><perch:content id="title" type="text" label="Portfolio item title" required="true" title="true" /></h3>
<p><perch:content id="desc" type="textarea" label="Description" textile="true" editor="markitup" /></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="<perch:content id="image" type="image" output="image" />" >
</a>
</li>
<li>
<a class="fancybox" href="demos/portfolio_02.jpg">
<img class="img-responsive" src="<perch:content id="image" type="image" output="image" />" >
</a>
</li>
<li>
<a class="fancybox" href="demos/portfolio_03.jpg">
<img class="img-responsive" src="<perch:content id="image" type="image" output="image" />" >
</a>
</li>
</ul>
</div><!-- side -->
</div>
<perch:content id="slug" for="title" type="slug" suppress="true" />
<perch:content id="viewmore" type="text" label="View more" suppress="true" />
<perch:content id="image" type="image" label="Image" crop="true" suppress="true" />
Your slug field is missing the
forattribute.Thank you, added "for="title"! Still only showing the latest added item though.
Are you now getting the slug on the URL?
No slug on the URL.
Have you saved the item since fixing your template?
Yes, tried saving the item after change now. No difference.
Will see if I can find something else I have done wrong. Thank you so far!
The slug is displayed in the link, but when klicking on it it does not stay as a part of the address.
Hovering over the first item shows the slug for the first item in the link-address.
Hovering over the second item shows the slug for the second item in the link-address.
Detail-page does not show any slug in the address field in the browser. Only the latest added items details is showing.
That sounds like you have some server-side redirects messing with it. Anything in your
.htaccess?Hi,
sorry for the delay, but have finally got the test files on my hosting space: https://www.xpandedreality.com/
Nothing seems wrong with the .htaccess.
Do you have any redirects?
No redirects (no .htaccess and only the web hosting httpd.conf).
Something is redirecting.
One of the scripts then maybe? I´ll check them out, thank you.
Hey there, did you get your code to work? I seem to have a similar problem, on my page there's no portfolio item showing up. Or only the latest item when I change the filtering method.
https://forum.grabaperch.com/forum/07-21-2015-detaillist-portfolio-blank-page-when-filtering-by-slug
Maybe you have an idea?