Using labels to create a Portfolio in your Blogger
From Bloggerhacks
Contents |
Version
1.0
Platform
New Version of Blogger
Author
Elainne Barros
Homepage
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.
