Using labels to create a Portfolio in your Blogger

From Bloggerhacks

Contents

Version

1.0

Platform

New Version of Blogger

Author

Elainne Barros

Homepage

http://ideialab.blogspot.com

License

Linkware.

Required Skills

Follow the instructions

Description

This hack will allow you to customize 'Portfolio' Label's page with a unique style: Thumbnail view and Lightbox to see bigger images and hide Portfolio's posts on main page.

Method

1. Inserting Lightbox

01) Go to Lightbox Project Page Lightbox and download the latest version of the script.

02) Follow the instalation instructions: a) Paste the following on your <header></header>:

<script type="text/javascript" src="http://seusite.com/prototype.js"></script> <script type="text/javascript" src="http://seusite.com/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="http://seusite.com/lightbox.js"></script>


b) Then, paste the CSS available on the file with the script in your <style type="text/css"></style> section, also in your <header>.

OBS: You should host the javascripts (prototype, scriptaculous e lightbox) and the images (closelabel, nextlabel e prevlavel) in some host who allows hotlink. Creating a Template for your Portfolio

01) Find this in your code:

<b:section class='main' id='main' maxwidgets='4' showaddelement='yes'> <b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'>

02) Bellow that, paste the following code:

<b:includable id='folio' var='post'> <a expr:name='data:post.id'/> <div class='folio-container'> <!-- thumbanil --> <data:post.body/> <!-- /thumbnail --> </div> </b:includable>


and in your CSS:

/* FOLIO POSTS */

.folio-container img {border: 3px solid #000000; float: left; margin: 2px;}

I customized the template in a way that only the post body (image with link) shows up in the screen, inside a list of images, each one with 3px border. But you can create your own styles.

Customizing Portfolio Label's Page

After making a research on conditionals in Blogger, I found out that the correct element to do this is not available for category's page: the element 'pagetype'. So how are we going to do it? Withe the page's title.

01) In you Blogger painel, go to Model > Edit HTML. Makea a backup of your current template before starting.

02) The, check the box wich says 'Expand widgets model'.

03) Find the following code:

<b:includable id='main' var='top'> <b:include data='top' name='status-message'/>

Right after, replace this:

<b:include data='top' name='status-message'/> <b:loop values='data:posts' var='post'> <b:include data='post' name='post'/> <b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='comments'/> </b:if> </b:loop>


with this:

<b:loop values='data:posts' var='post'> <!-- if it's portfolio page, use folio template --> <b:if cond='data:blog.pageTitle == "YOUR BLOG'S TITLE: Portfolio"'> <b:include data='post' name='folio'/> <!-- if it isn't, use blog template --> <b:else/> <!-- on main page, if it's a portfolio post, hide it --> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.name != "Portfolio"'> <b:include data='post' name='post'/> </b:if> </b:loop> </b:if> <b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='comments'/> </b:if> </b:loop>


04) Change 'YOUR BLOG'S TITLE' on the code with the title of your own blog.

Making Portfolio's entries

01) Go to your 'Dashboard', choose 'New Post'.

02) Write your post's title and in the body, write:

<a href="url_big_image" rel="lightbox[portfolio]" title="My art"><img src="url_thumbnail_image" alt="My art" /></a>


Note the rel attribute, necessary for enabling Lightbox on your entries.

03) Still on this screen, write 'Portfolio' as the labe of your post.

04) And that's it! Now is just go to your Portfolio Label's Page (http://YOURBLOG.blogspot.com/search/label/Portfolio).

Final considerations

1. Can I chage the name of the category 'Portfolio' to any other name? Yes, just change in the code where 'Portfolio' appears.

Sites Using This Hack

Ideialab Ideialab

Personal tools
FreshTags