This guide explains how we can use the Composer of Concrete5 to create a fully working News system. Each news will be composed of the following elements: - Title - Publishing date - Short formatted preview text - Thumbnail - Main formatted news text By following this guide, it’s easy to extend this list to include even more elements.
1. Create custom attributes
The custom attributes are necessary for saving non-standard information such as the formatted preview text or the thumbnail.
- Go to “Dashboard → Pages & Themes → Attributes”
- Optional: create a new set called “News” by clicking on “Manage sets” so we can more easily organize our newly created attributes.
- Create an attribute of type “Textarea”:
- Handle: news_description
- Name: News Description
- Set: News
- Input Form: Rich Text - Simple
- Create an attribute of type “Image File”:
- Handle: news_thumbnail
- Name: News Thumbnail
- Set: News
2. Create a new page type
The new page type is a template that serves as a model for future news. Each news will have its own page of this type that will be created from this model.
- Go to “Dashboard → Pages & Themes → Page Types”
- Click on “Add a Page Type”:
- Name: News
- Handle: news (possible to theme with a news.php file in theme folder)
- Default Attributes to Display: News Thumbnail and News Description
3. Create a “news list” page
The “news list” is the page where we will display a list of all our news. Additionally, new news pages will be created as subpages of this page.
- Go to “Dashboard → Full Sitemap”
- Create a new page called “News” with whatever page type you like
4. Enable composer to write news
I followed the guide that I found here to be able to write news using the composer feature of concrete5. The composer allows for the creation of new pages of a certain type without leaving the backend (Dashboard) of concrete5.
- Go to “Dashboard → Page Types”
- Click on “Defaults” for the “News” page type you created
- Enable “Edit” mode
- Create composer-editable page content by repeating the following steps as often as you like:
- Add a new block of type “Content” to your page
- Click on the newly created content block and chose “Composer settings”
- Check “Include block in Composer” checkbox and give the content block a meaningful name
- Leave “Edit” mode and publish your changes
- Go to “Dashboard → Page Types”
- Click on “Composer” for the “News” page type you created:
- Check “Yes, include this page type in Composer.”
- Chose “Always publish below a certain page.” and select the “News” page you 3. created
- Attributes to Display in Composer: News Thumbnail and News Description
- Click Save
- Under “Composer Content Order” you should now see the two custom attributes “News Thumbnail” and “News Description” as well as an entry for each composer-editable content block you created in step 4
- Optional: Re-arrange the order of the “Composer Content Order” by dragging the entries around.
- Click Save
- Test the creation of new “News” pages. Go to “Dashboard → Composer → Write”, fill out all the fields that you created and click on “Publish page”.
5. Display the news in the “news list” page
What good are our newly created news if we can’t display them in a nice list with their thumbnail and the formatted news description? However, this is the most difficult part as you’ll have to create a new block template and even write/modify some PHP code.
- Visit the “news list” page you created earlier.
- Enable “Edit” mode
- Add a block of type “Page List” to your page
- Chose the configuration options that you want but make sure that you select the following:
- pages of type “News” (this is the page type that we created)
- Location in Website: beneath this page
- Pages should appear: with the most recent first
- You should now be able to see a list of news pages you created. However, the thumbnail and the formatted short description are missing. Additionally, you might not like the format of that list. We now have to create a new block template to customise and stylise our news list.
- Create a new “page list” block template by uploading a corresponding PHP (I called mine news_index_thumbnail.php) file to
/blocks/page_list/templates - Click on the page list block and chose “Custom Template”
- Select the template you just uploaded from the list
- Leave “Edit” mode and publish your changes.
The creation of the template PHP file is by far the most difficult step. However, you can have a look at the template files provided in
For the thumbnail to work, we have to extract the image from the custom attribute “news_thumbnail” that we created and display it in the list. The following PHP code will take care of that:
<?php
$newsThumbnailAttribute = $cobj->getAttribute('news_thumbnail');
if (is_object($newsThumbnailAttribute)) {
$imgHelper->outputThumbnail($newsThumbnailAttribute, 120, 120, $title);
}
?>
For the formatted short description to work, we have to extract the formatted text from the custom attribute “news_descriptionl” that we created and display it in the list. The following PHP code will take care of that:
<?php
$newsDescription = $cobj->getAttribute('news_description');
if (!empty($newsDescription)) {
echo $newsDescription;
}
?>