Styling the Page List Block :: Legacy Documentation

Originally posted by pvernaglia at weblicating.com.

The Page List block is easy to modify and style. Page lists can be use for many applications on your concrete5 site. This tutorial will show you how to start styling your page lists.

By default the page List block will display the Page Title (getCollectionName) and descriptions (getCollectionDescription) of pages grouped by page types, site wide or beneath a specified page.

If it does not already exist create a directory blocks/page_list/templates. Copy the file concrete/blocks/page_list/view.php into the new directory and rename it to something appropriate for your installation. With your favorite editor open the new file and look for this block of code:

<?php 
  for ($i = 0; $i < count($cArray); $i++ ) {
    $cobj = $cArray[$i]; 
    $title = $cobj->getCollectionName(); ?>	
    <h3 class="ccm-page-list-title"><a href="
<?php echo $nh->getLinkToCollection($cobj)?>">
<?php echo $title?></a></h3>
    <div class="ccm-page-list-description">
    <?php 
    if(!$controller->truncateSummaries){
      echo $cobj->getCollectionDescription();
    }else{
      echo $textHelper->shorten($cobj->
getCollectionDescription(),$controller->truncateChars);
    }
    ?>
  </div>

A simple start to styling a page list would be to add a div that wraps each item and apply some styling to it. Below we have added a div with a class name pageListItem:

<?php 
  for ($i = 0; $i < count($cArray); $i++ ) {
    $cobj = $cArray[$i]; 
    $title = $cobj->getCollectionName(); ?>
 
  <div class="pageListItem">
 
  <h3 class="ccm-page-list-title"><a href="
<?php echo $nh->getLinkToCollection($cobj)?>">
<?php echo $title?></a></h3>
  <div class="ccm-page-list-description">
    <?php 
      if(!$controller->truncateSummaries){
        echo $cobj->getCollectionDescription();
      }else{
        echo $textHelper->shorten($cobj->
getCollectionDescription(),$controller->truncateChars);
      }
    ?>
</div>
</div>

Add some styling to the new div so items in the Page List are enclosed in boxes:

#page .pageListItem {
  padding: 10px;
  border: 2px solid #8290B3;
  margin-bottom: 10px;
}

Now we add and Image/File attribute to each page called pageListThumbnail, upload a thumbnail image and add some code to display the thumbnail in the Page List, notice we add an if statement to test for the thumbnail file:

<?php 
  for ($i = 0; $i < count($cArray); $i++ ) {
    $cobj = $cArray[$i]; 
    $title = $cobj->getCollectionName(); ?>
    <div class="pageListItem">
 
    <?php
      if($cobj->getAttribute('pageListThumbnail')) { ?>
        <img src="<?php echo ($cobj->
getAttribute('pageListThumbnail')->
getVersion()->getRelativePath());?>">
    <?php } ?>
 
    <h3 class="ccm-page-list-title">
<a href="<?php echo $nh->getLinkToCollection($cobj)?>">
<?php echo $title?></a></h3>
 
    <div class="ccm-page-list-description">
    <?php 
      if(!$controller->truncateSummaries){
        echo $cobj->getCollectionDescription();
      }else{
        echo $textHelper->shorten($cobj->
getCollectionDescription(),$controller->truncateChars);
    }
    ?>
</div>
</div>

Now we apply a little styling to the image. We added a float:left to the pageListItem styling, a floated div will always be the height of its floated contents and since we want to have a border around the contents we need to float the container with the border:

#page .pageListItem {
  float: left;
  padding: 10px;
  border: 2px solid #8290B3;
  margin-bottom: 10px;
}
 
#page .pageListItem img {
  float: left;
  margin-right: 10px;
}

We scaled all our thumbnails to the same size. You could also include the Concrete5 Image Helper to resize an image in a page attribute or to ensure all thumbnails are the same size.

The attribute getCollectionDateAdded will display the date a page was added into your site. Lets add that date to each item displayed in the Page List in a div called pageListDate:

<?php 
  for ($i = 0; $i < count($cArray); $i++ ) {
    $cobj = $cArray[$i]; 
    $title = $cobj->getCollectionName(); ?>
    <div class="pageListItem">
 
    <?php
      if($cobj->getAttribute('pageListThumbnail')) { ?>
        <img src="<?php echo ($cobj->
getAttribute('pageListThumbnail')->
getVersion()->getRelativePath());?>">
    <?php } ?>
 
    <h3 class="ccm-page-list-title">
<a href="<?php echo $nh->getLinkToCollection($cobj)?>">
<?php echo $title?></a></h3>
 
    <div class="pageListDate">
    <?php echo $cobj->getCollectionDateAdded('F j, Y') ?>
    </div>
 
    <div class="ccm-page-list-description">
    <?php 
      if(!$controller->truncateSummaries){
        echo $cobj->getCollectionDescription();
      }else{
        echo $textHelper->shorten($cobj->
getCollectionDescription(),$controller->truncateChars);
    }
    ?>
</div>
</div>

And a little styling for the div:

#page .pageListDate {
  font-size: 11px;
  padding-bottom: 3px;
}

Now you can see by adding a few divs and styles to your Page List block you can quickly change it for your applications.

Download Page List Example