Forum

Thread tagged as: Question

List and detail page, include whole list on detail page

Hi,

how can I include the whole list (not just the item filtered by it´s slug) on the detail page in this example: https://solutions.grabaperch.com/architecture/how-do-i-create-list-detail-pages

The list is working fine, and the detail page is also working. But on the detail page I would like to also show the whole list under the item with details, so that the user easy can continue to browse all items.

Any idea?
Lamin Kivelä

Lamin Kivelä 1 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Yes, you can just copy the code you're using for the listing into the detail page too.
Lamin Kivelä

Lamin Kivelä 1 points

6 years ago

Thank you, but when doing so the detail page only shows the list item with the same slug as the item currently showing on the detail page.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Can you show me the code you're using? Otherwise I can only make guesses!
Lamin Kivelä

Lamin Kivelä 1 points

6 years ago

Here is the code!

portfolio_detail.html

<div class="col-md-6">
<img class="img-responsive" src="<perch:content id="image" type="image" label="Image" density="2" quality="30" sharpen="2" />" />
</div>

<div class="col-md-6">
<h3><perch:content id="title" type="text" label="Portfolio item title" required="true" title="true" /></h3>
<perch:content id="desc" type="textarea" label="Description" textile="true" editor="markitup" /> 
</div>

<div class="col-sm-6 col-md-4"> 
<div class="thumbnail">
<img src="<perch:content id="image" type="image" />" />

<div class="caption">
<h3><a href="?s=<perch:content id="slug" type="slug" />">
<perch:content id="title" type="text" />
</a>
</h3>
<perch:content id="desc" type="textarea" /> 
</div>                                 
</div> 
</div>

<perch:content id="slug" for="title" type="slug" suppress="true" />
<perch:content id="image" type="image" label="Image" width="100" height="100" crop="true" suppress="true" />

portfolio_listing.html

<div class="col-sm-6 col-md-4"> 
<div class="thumbnail">
<img src="<perch:content id="image" type="image" />" />

<div class="caption">
<h3><a href="?s=<perch:content id="slug" type="slug" />">
<perch:content id="title" type="text" />
</a>
</h3>
<perch:content id="desc" type="textarea" /> 
</div>                                 
</div> 
</div>

Portfolio page

<?php include('perch/runtime.php'); ?>
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Xpandedreality</title>

<!-- CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/jumbotron-narrow.css" rel="stylesheet" type="text/css">
<!-- Custom styles for xpandedreality -->
<link href="css/xpandedreality.css" rel="stylesheet" type="text/css">

</head>
<body>

<div class="container">
<div class="header" data-pg-collapsed>
<ul class="nav nav-pills pull-right">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<h3 class="text-muted">Project name</h3>
</div>
<?php perch_content('Jumbotron'); ?>

<div class="row marketing">
<div class="col-lg-6">
<h2>Portfolio</h2>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
</div>
</div>
<div class="row">
<?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>
<div id="footer">
<p class="text-muted">Place sticky footer content here.</p>
</div>                              
</div>         
<!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="perch/core/assets/js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/salvattore.min.js" type="text/javascript"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

</body>
</html>
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Ok, so this is the business end:

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',
    )); 

}

so add the listing code to the detail mode:

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,
    )); 

    // listing
    perch_content_custom('Portfolio', array(
         'template' => 'portfolio_listing.html',
    ));

} else {

    // List mode
    perch_content_custom('Portfolio', array(
         'template' => 'portfolio_listing.html',
    )); 

}
Lamin Kivelä

Lamin Kivelä 1 points

6 years ago

Thank you! I´m now slowly beginning to understand where the logic is, and what the templates does:)
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

No problem!