Irsah in Designs


Create Featured concrete5 Custom RSS Feed Reader Page




RSS feed readers is probably the last thing we want to do when finishing out a website for a client. Weather tt's listed on the requirement list or not, we, the designers must also incorparate in webpages we build, including social bookmarks and social feed sections.

concrete5 has already the ability to provide RSS feed links, with various blocks ranging from the RSS Dipslayer block, the Pagelist block and even several add-ons ie, Feed Reader Package add-on, available in Marketplace.

Let's take the pagelist block as our working block of the day and create a full feature RSS Feed Reader for your concrete5 website project, just like the one seen/viewed in Feed Burner by Google and others.

 

Customize PageList Block to Render Full Page Output.

If you have several custom templates made for the pagelist block, than probably you can skip several steps.

1. Grab the pagelist view.php file in your_domain/concrete/blocks/page_list/view.php , make a copy > download to your personal computer for editing.

2. Open the downloaded pagelist view.php file and find the following codebelow;;

/* The HTML from here through "endforeach" is repeated for every item in the list... */ ?>
<!--Paste code starts here-->
<h3 class="ccm-page-list-title">
<a href="<?php echo $url ?>" target="<?php echo $target ?>"><?php echo $title ?></a>
</h3>
<div class="ccm-page-list-description">
<?php echo $description ?>
</div>
<!-- Paste code end here-->
<?php endforeach; ?>
<?php if ($showRss): ?>

Copy code below and paste codes at the indicated paste code area.

 <h3 class="pagelist-feed-title">
<a href="<?php echo $url ?>" target="<?php echo $target ?>"><?php echo $title ?></a>
</h3>
<small>Published on <?php echo $date ?> Written by <strong><?php echo $author ?></strong></small>
<br />
<br />
<div class="pagelist-page">
<?php $a = new Area('Main'); $a->disableControls(); $a->display($page); ?>
</div>
<hr />
<?php endforeach; ?>

Some general desriptions from the new code above;

<?php echo $url ?> - This will render your pages URL
<?php echo $title ?> - This will render you selected page title
<?php echo $date ?> -> This will render the date the page was published
<?php echo $author ?> -> This will render the page author/creator
<?php $a = new Area('Main'); $a->disableControls(); $a->display($page); ?> -> This code will render the 1st block on your published page in the page area name "Main". If your page have different area name, replace "Main" with the area from your page. 

3. Now go to your_concrete5_domain_setup_folders/blocks/pagelist/templates/ > create a new folder and name it as "pagelist_feed" (without quotes).

If you have not created a template before for a pagelist block override than you have to create folders like the sequence above which will look like this : page_list / templates / pagelist_feed / (the view.php file)

4. Upload the page_list view.php file with your favourite FTP program inside the pagelist_feed folder.

5. Options, if you want to style your pagelist_feed, you can also add a view.css file by copying any files with a .css extension > rename that file to view.css > paste the new view.css file into blocks/pagelist/templates/pagelist_feed folder.

6. Some general stylings are included here, and you can refine in the front end later. Copy the below css codes and paste it in your view.css file, simply delete the files contents and override with these new css codes.

.pagelist_feed{display:block;}
h3.pagelist-feed-title{display:block;}
small{font-style:italic;font-size:12px;}
.pagelist-page{display:block;padding:0;margin:0;}

7. Now inside your pagelist_feed folder you will have a view.php file and a view.css file. We're done with our pagelist_feed template and override.

 

Building/Creating RSS Feed Reader Page

1. Go to your concrete5 website > log in > dashboard > full sitemap.

2. Click on Home > add page > select the required page type (preferably with a sidebar) > name that page to "RSS Feed Reader" (without quotes) > add a descriptive description for that page > click make Page.

3. Click and go to the newly built page > and click on edit page > go to main area > add pagelist block > insert required field preferably like below settings.

No. of pages = 10

Page Type = your_blogpost_page_type

Show Pages = display the most recent pages

Pagination = tick (yes)

Display RSS = tick (yes)

RSS Title = (name suitable for your RSS Feed Page)

RSS Description = (briefly describe your feed page functionality)

Others = Not required because it does not render through our customize feed display pagelist blcok.

4. Click save and 10 pages of your recent post will be displayed with relevant descripton .

5. Now click on the rendered block again > choose templates > drop down menu > select "Pagelist Feed".

6. Clcik save and probably you have to wait a while as the pagelist renders 10 pages of your recent articles. The whole entire contents form your first block in the content area you have assigned previously.

7. Click save and pages/articles have been compiled in a single page just like a feed reader with options to subscribe the RSS Feed and pagination to manouver to other pages as well.

This is an example how your pagelist block grabs the blcok from your pages. On the left side is the blck render by the the pagelist block and on the right an area for your social bookmark or feed subscription icon set.

RSS_Feed_Page_Reader_--_Small-BizNext.jpg 

A Feed Reader Page without Bookmarks?

Well that's what the sidebar was buitl for. You can grab the total package social icon add-on in concrete5 marketpace and install in the sidebar area.

You can also add one or two more blocks, like a recent news block, promotion ad etc just to spice up your newly built RSS Feed page.

Remember, please do not include too many blocks, as it will decrease page loading time since that already 10 full rendered pages (including images) is called upon through the customized pagelist block. Add two more should be enough.

So there you go, a fully functional RSS Feed page with the 10 most recennt articles to display, complete with images just like viewing the particular page itself. And we have also the options to subscribe and bookmark the Feed page too.

Style the page to required, add an RSS logo, or probably design your own logo with an RSS icon, just to add the icing on the cake. If you're building a project for your client, probably he/she would be happy that their website have a cool personalized styled RSS Feed page for their clients as well.

One last note, what is RSS Feed with out feets. Copy the link generated by the your small RSS icon, which is  rendered by our lovely customized pagelist block and link it to required page throughout the website.

I also recommend to set the Feed Reader page to (in Page Properties Attributes)  Exclude from Nav, Exclude from Search Results and Exclude form Pagelist, just to hide it from the websites other pagelist block output and also prevent duplicate contents, from search crawlers.

Well that'it. In the next articl;e we will discuss and show you how-to customize xml output page aka feed page which you can link to more elegantly with RSS Feed providers and a beutiful URL slug for your website feed page thanks to Andrew (concrete5 CTO)

Speaking of RSS Feed and Readers, can you still remember when was the last time you've visited an RSS Reader? For me, simply can't remember at all. Seems that social networking  have that cutting edge on various updates, don't you think so? That's one out of the bag.