CodeBlog.ch

Concrete5 Templates

Posted in Concrete5, PHP by admin on the March 10th, 2009

How to Concrete5 Template

There are several ways to add a picture. You could save all the pictures with the name of the sites and fetch it, using a little php script. What happens, if the user wants to change the page name? Right, it doesn’t work anymore! Because of that, we’re going to use the “page attributes”.

First, we have to create a new attribute where we can select our thumbnail. It’s located in “Pages and Themes” – “Page Types”:

After we created the attribute, we navigate to the page where we want to add a thumbnail. Edit the site and open the “Properties” dialog. Select the newly created fiel in the drop down menu “Custom Fields” and select your thumbnail:

Now it’s time to write some code. We start using the existing page list view. We copy the content of “/concrete/blocks/page_list/view.php” and save it to “/blocks/page_list/templates/thumbnail.php”. The folders probably don’t exist yet, create them.

And here’s the finished template:

<?php 
defined('C5_EXECUTE') or die(_("Access Denied."));
$textHelper = Loader::helper("text"); 
// now that we're in the specialized content file for this block type, 
// we'll include this block type's class, and pass the block to it, and get
// the content
 
if (count($cArray) > 0) { ?>
<div class="ccm-page-list">
 
<?php 
for ($i = 0; $i < count($cArray); $i++ ) {
	$cobj = $cArray[$i]; 
	$title = $cobj->getCollectionName(); ?>
<h3><a href="<?php echo $nh->getLinkToCollection($cobj)?>"><?php echo $title?></a></h3>
<div class="ccm-page-list-description">
<div class="ccm-page-list-thumbnail">
		<img src="<?php echo $cobj->getAttribute('thumbnail')->getFileRelativePath() ?>" alt="<?php echo $title ?>"/></div>
<?php 
	if(!$controller->truncateSummaries){
		echo $cobj->getCollectionDescription();
	}else{
		echo $textHelper->shortText($cobj->getCollectionDescription(),$controller->truncateChars);
	}
	?></div>
<?php   } 
if(!$previewMode && $controller->rss) { 
		$btID = $b->getBlockTypeID();
		$bt = BlockType::getByID($btID);
		$uh = Loader::helper('concrete/urls');
		$rssUrl = $controller->getRssUrl($b);
		?>
<div class="rssIcon">
			<a href="<?php echo $rssUrl?>" target="_blank"><img src="<?php echo $uh->getBlockTypeAssetsURL($bt)?>/rss.png" width="14" height="14" /></a></div>
	<link href="<?php echo $rssUrl?>" rel="alternate" type="application/rss+xml" title="<?php echo $controller->rssTitle?>" />
	<?php  
} 
?></div>
<?php  } ?>

Only the lines 18-20 are new, everything else is identical to the previous file!
The foreach-loop returns a page object, out of which we get read the value of the attribute, using the method “getAttribute”. Our attribute isn’t just a simple text value, we therefore have to call the method “getFileRelativePath” to get the path to the picture.

After we created the template, we have to navigate back to the page where we added our page list block:

Select the custom template and here’s the result:

Fine tuning (Update: 11. März 2009)

We’re already finished, but there are a few nifty functions in concrete5 to optimize our template. We’ve added a little check that makes sure, you don’t get an error, if there’s a page without a thumbnail.

We also added the method “getThumbnail(100,100)” which makes sure, we get a pictures with the dimension of 100×100 pixels or less.

<?php 
defined('C5_EXECUTE') or die(_("Access Denied."));
$textHelper = Loader::helper("text"); 
// now that we're in the specialized content file for this block type, 
// we'll include this block type's class, and pass the block to it, and get
// the content
 
if (count($cArray) > 0) { ?>
<div class="ccm-page-list">
 
<?php 
for ($i = 0; $i < count($cArray); $i++ ) {
	$cobj = $cArray[$i]; 
	$title = $cobj->getCollectionName(); ?>
<h3><a href="<?php echo $nh->getLinkToCollection($cobj)?>"><?php echo $title?></a></h3>
<div class="ccm-page-list-description">
	<?php if($cobj->getAttribute('thumbnail')): ?>
<div class="ccm-page-list-thumbnail">
		<img src="<?php echo $cobj->getAttribute('thumbnail')->getThumbnail(100,100)->src ?>" alt="<?php echo $title ?>"/></div>
<?php endif; ?>
	<?php 
	if(!$controller->truncateSummaries){
		echo $cobj->getCollectionDescription();
	}else{
		echo $textHelper->shortText($cobj->getCollectionDescription(),$controller->truncateChars);
	}
	?></div>
<?php   } 
if(!$previewMode && $controller->rss) { 
		$btID = $b->getBlockTypeID();
		$bt = BlockType::getByID($btID);
		$uh = Loader::helper('concrete/urls');
		$rssUrl = $controller->getRssUrl($b);
		?>
<div class="rssIcon">
			<a href="<?php echo $rssUrl?>" target="_blank"><img src="<?php echo $uh->getBlockTypeAssetsURL($bt)?>/rss.png" width="14" height="14" /></a></div>
	<link href="<?php echo $rssUrl?>" rel="alternate" type="application/rss+xml" title="<?php echo $controller->rssTitle?>" />
	<?php  
} 
?></div>
<?php  } ?>

Concrete5.3 (Update: 24th April 2009)

Due to changes in the file API, the template above doesn’t work with the latest version of Concrete5 anymore. This template generates a thumbnail on the fly to, and works with Concrete 5.3:

<?php 
defined('C5_EXECUTE') or die(_("Access Denied."));
$textHelper = Loader::helper("text"); 
$imgHelper = Loader::helper('image'); 
// now that we're in the specialized content file for this block type, 
// we'll include this block type's class, and pass the block to it, and get
// the content
 
if (count($cArray) > 0) { ?>
<div class="ccm-page-list">
 
<?php 
for ($i = 0; $i < count($cArray); $i++ ) {
	$cobj = $cArray[$i]; 
	$title = $cobj->getCollectionName(); ?>
<h3><a href="<?php echo $nh->getLinkToCollection($cobj)?>"><?php echo $title?></a></h3>
<div class="ccm-page-list-description">
	<?php if($cobj->getAttribute('thumbnail')): ?>
<div class="ccm-page-list-thumbnail">
		<img src="<?php echo $imgHelper->getThumbnail($cobj->getAttribute('thumbnail'), 75, 75)->src ?>" alt="<?php echo $title ?>"/></div>
 
<?php endif; ?>
	<?php 
	if(!$controller->truncateSummaries){
		echo $cobj->getCollectionDescription();
	}else{
		echo $textHelper->shortText($cobj->getCollectionDescription(),$controller->truncateChars);
	}
	?></div>
<?php   } 
if(!$previewMode && $controller->rss) { 
		$btID = $b->getBlockTypeID();
		$bt = BlockType::getByID($btID);
		$uh = Loader::helper('concrete/urls');
		$rssUrl = $controller->getRssUrl($b);
		?>
<div class="rssIcon">
			<a href="<?php echo $rssUrl?>" target="_blank"><img src="<?php echo $uh->getBlockTypeAssetsURL($bt)?>/rss.png" width="14" height="14" /></a></div>
	<link href="<?php echo $rssUrl?>" rel="alternate" type="application/rss+xml" title="<?php echo $controller->rssTitle?>" />
	<?php  
} 
?></div>
<?php  } ?>

Pages: 1 2

16 Comments

16 Responses to 'Concrete5 Templates'

Subscribe to comments with RSS or TrackBack to 'Concrete5 Templates'.

Remo said,

on April 24th, 2009 at 19:25:19

The code in this tutorial doesn’t work with 5.3 anymore because of some API changes. I’ll update it as soon as possible. Until then, this might help:

http://www.concrete5.org/community/forums/usage/thumbnails_in_5_3
Peter said,

on May 26th, 2009 at 19:50:07

Hey, this is an awesome addition to the page list block, just what I was looking for. One question though, is there any way to force a square thumbnail to be generated instead of a proportionate one?
Remo Laubacher said,

on May 26th, 2009 at 20:42:53

Hey Peter,

as far as I know, there’s not easy “out of the box” solution to this. As a matter of fact we just talked about a similar issue at work today.

We ended up creating our thumbnails using Photoshop due to a simple reason – we never knew which part of the picture the important one is, without looking at it. Otherwise I would have built it already..

But it’s not a difficult thing to add another “thumbnail” method that also crops the picture by removing an equal part from the left and right or from the top and bottom…

I’ll try to keep my ears open about this function, I’ll try to post it once I found one or once someone wrote one..
CodeBlog.ch » Concrete5 – Formular Layout anpassen said,

on July 14th, 2009 at 12:12:54

[...] know anything about “Custom Templates”, you should probably read this article first: http://www.codeblog.ch/2009/03/concrete5-templates/. In short: Concrete5 allows you to style any block using templates in case you need to change the [...]
Charles Dewey said,

on September 9th, 2009 at 09:53:49

I can’t get this to work on 5.3 despite following your instructions to the letter. Is there an update I’ve spent a lot of time on this?
Remo Laubacher said,

on September 9th, 2009 at 10:02:41

On page 2 there’s a note which shows you the code which I’ve tested with 5.3. If this doens’t work for you – please explain what doesn’t work for you.
Ben said,

on October 19th, 2009 at 12:18:33

Hello Remo

I am trying to add an extra thumbnail to the listings page. I have searched just about everywhere possible with no result. Unfortunately I am limited by my PHP knowledge. Could you help a brother out and point me in the right direction:)

Many regard

Remo Laubacher said,

on October 19th, 2009 at 12:59:33

The tutorial has all the information you need. Just add a new page attribute and duplicate the code which fetches and prints the Attribute.

The new code could look like this:

<?php if($cobj->getAttribute('thumbnail_2')): ?>
  <div class="ccm-page-list-thumbnail_2">
    <img src="<?php echo $imgHelper->getThumbnail($cobj->getAttribute('thumbnail_2'), 75, 75)->src ?>" alt="&lt;?php echo $title ?>"/>
  </div>
<?php endif; ?>

That’s it!

Ben said,

on October 19th, 2009 at 15:22:13

Remo that worked like a charm, you make it seem so easy. Thanks for your help:)
Chyke said,

on November 12th, 2009 at 14:54:22

I’m having a minor problem with this Fix.
I’ve followed the tutorial.

From the point;

“After we created the template, we have to navigate back to the page where we added our page list block:”

I selected “set custom template” which is now called “custom template” in Concrete 5.3.3 and all i get is only one thumbnail which was chosen after selecting a custom field. I’m using the thumbnail.php code found above on;
Concrete5.3 (Update: 24th April 2009)

Can someone please help me. I’m under pressure here.

Regards
Remo Laubacher said,

on November 12th, 2009 at 19:40:41

It’s a bit hard to help you with so little information.

You must select a picture/thumbnail for each page using “properties”. Otherwise it won’t be able to show you anything else but a text.

Just open all the sub pages for which you don’t see a thumbnail and edit them, hit properties, custom fields and add select a thumbnail/file.
CodeBlog.ch » Image Navigation Items said,

on December 14th, 2009 at 10:02:04

[...] If you haven’t worked with custom template you should probably read this tutorial first: http://www.codeblog.ch/2009/03/concrete5-templates/. [...]
David Gee said,

on January 14th, 2010 at 16:30:31

Do you know what code you need to include other custom attributes that are text/selectors etc as we need to be able to filter by attribute. We are developing an accommodation site that needs to filter by accommodation location for example and we need the page-list to determine this when showing the list.

Cheers
Remo Laubacher said,

on January 15th, 2010 at 09:12:28

I’d have to look that up as well. But try this, it should give you a couple of information:

print_r($cobj->getAttribute(‘your_attribute’));
Chyke said,

on March 10th, 2010 at 19:17:37

How can you add a thumbnail using the “getAttribute” to display a thumbnail in the BLOG Add On.

The following piece of code worked before for Blog 1.5.1

setAttributethe(‘thumbnail’)): ?>

<a href="”><img src="getThumbnail($blog_post->getAttribute(‘thumbnail’), 125, 94)->src ?>” class=”left bordered” alt=”getCollectionName() ?>”/>

With the upgrade (Version 1.2.3) this approach doesn’t work.

Please, do you have any ideas as to what I can change?
Remo Laubacher said,

on March 10th, 2010 at 21:56:58

There were some changes in the Concrete5 API, but I don’t see why this should be blog related. But since the Blog addon isn’t free, I can’t help you with it, you should ask the authors of the package for help.

But you did see that I’ve posted different examples on how to output a thumbnail, depending on your c5 version?

The Search

The Associates

The Storage

The Categories

The Meta

Concrete5 Templates

16 Responses to 'Concrete5 Templates'

Leave a Reply