Advanced Theme Development: Part Two

Working with page attributes

Now, we meant to include our images in this page list template. We can achieve this by using a custom page attribute. Since we’re dealing with the page object, we can attach an attribute to the individual pages, so we’ll attach a custom image/file attribute. Let’s call it “thumbnail”. 

When we go to the sitemap, and visit one of our featured pages, we can apply our thumbnail attribute, and it will give us a file picker we can use to pick a file from the file manager to associate with this page. You can even extend the page search in the dashboard to show the associated images. 

If you look in the page list template itself, you’ll see comments that will help us to get these image attributes under “HOW TO USE IMAGE ATTRIBUTES”. So the first step is to uncomment out the image helper at the top, which looks like this: 

$ih = Loader::helper(‘image’);

Now let’s copy these lines of commented code out of the commented area and make it live above with a few modifications: 

$img = $page->getAttribute(‘thumbnail’); 
$thumb - $ih->getThumbnail($img, 300, 150, true);

You can see we have modified the 2nd and 3rd arguments to feed it our width and height requirements, respectively, and supplying “true” for the fourth argument sets autocropping of the thumbnail on. The first argument is the image object itself. Next we can grab the output code from the comment section and put it into our output, which looks like so (along with the rest of the code): 

<h2><?php echo $title ?></h2>
<div class=”imgholder”><img src=”<?php echo $thumb->src ?>” width=”<?php echo $thumb->width ?” height=”<?php echo $thumb->height ?>” " alt="" /></div>
<p><?php echo $description ?></p>
<p class=”readmore”><a href = “<?php echo $url ?>”>Continue Reading &raquo;</a></p>

Now, when we view our page list on our site, you’ll see the images! If we create a new page with an image attribute and a is_featured attribute, it will show up here, and the older page will drop off (though it still exists, naturally). The page list will honor permissions as well, which is handy. If you remove the is_featured attribute from one of these pages, they will drop out. 

If we wanted to set this area to only allow the page list block to be added to it, we would need to turn on advanced permissions and edit the area. Prior to 5.6, you would enable these through a config value in config/site.php, but you can enable them in the dashboard as of 5.6. Then you can lock down what types of block types you can use in a given area. 

As a side note, there are ways to use blocks to modify page attributes to keep things a little more wysiwig (what you see is what you get) and less “behind the scenes”. The tags block is a good example of this. 

Another side note: You can set a default template to a specific block area using the setCustomTemplate area model function. That function takes the block handle and the template name as arguments. 

In order to stay wysywig, you can also add a hidden area on each page that is only visible in edit mode where you would add a thumbnail image, and then grab that image via the page list block template. This way, you wouldn’t need to save it as an attribute. If you are interested in doing this, check out the blox_index_thumbnail.php template file for the page list, as it does exactly this. 

If we wanted to change the color of our homepage featured content area based on an attribute value, we can definitely do that. We will create a new page text attribute called “color”. Then let’s add that to the home page. Let’s give it a value of “white” for now. Now let’s go to the css and remove the background color for this div. Then, let’s add some code to our home page type make the color of the div switch on the fly:

<div class=”fl_right” style=”background-color: <?php echo $color ?></div>

Then at the top of our page type, let’s add some code to grab the attribute value:

$color = $c->getAttribute(‘color’);
if(!$color) {
	$color = ‘#FDC609’;

This will get the current page's value for that attribute, and if it doesn’t exist (or isn’t set), will set it back to the default yellow we previously had set before all this attribute sorcery. 

Now we can add any color hex value or word-based color that resolves as a CSS color, like “white,” and it will be applied to this div’s background. There is also a color picker attribute type we can install.

Recent Discussions on this Topic

Keep Theme Styles from Interfering with concrete5

Can someone please explain this to me, as I have a few sites that I have built where the theme does interfere with the Concrete5 Interface. ----------------------- From C5 Documentation: Keep Theme Styles from Interfering with concrete5 When c…

how to call the controller from theme header

Hi, I am developing web application by using the concrete5, First i try to implement multilingual in single pages, its work sample i attached my screen shots image. pfa. Now i want to this in my theme, how to do this. experts help me. than…

Package attribute

For a new theme I want to have a pagelist install with it which shows up thumbnails of pages, I have this all sorted but I have no idea how to install the 'thumbnail' attribute with my theme, I have looked at other packages but cant find any examples wher…

Location of Installed Themes

I have been searching for an answer to where installed themes get placed after being downloaded and installed from the dashboard. What is the directory? I am trying to design a theme from the skeleton theme: "Stripped" by Steven Braun at …

Custom Maintenance Mode in v5.7

Another day another C5 question.. I have followed 5.7 guidance on customising system single pages (link below) and have had no issues... that is until I got to the maintenance page. The article kind if implies this should follow the same process but I …