Pullfolio.com Themes Howto

This repository provides information of how Pullfolio custom themes work. After upgrading to a trial or purchasing a pro subscription, you will be able to clone one of the provided themes and modify from there. You have complete control of the look and feel of your Pullfolio site by customizing the theme files.

Overview on theme directory structure

[theme name]
   |__ assets
   |__ layouts
   |__ templates

The assets folder contains your CSS stylesheets:

• style.css - this is loaded for all browsers, and should contain most of the CSS for your theme
• ie.css - this is loaded for all versions of Internet Explorer
• ie6.css - this is loaded for IE6 and lower

The layouts folder contains 3 partials:

• _footer.liquid - this is the footer of your site
• _header.liquid - header
• _sidebar.liquid - sidebar, this is empty in most of the default Pullfolio themes

The templates folder contains templates for your site:

• index.liquid - this is the index page of your pullfolio site (i.e., when you hit http://yoursite.com), if this file doesn't exist, we will render your main portfolio
• about.liquid - this is the information displayed in the About page (http://yoursite.com/about)
• contact.liquid - this should contain contact info, the @contact_form instance variable contains a default contact form for you to receive email inquiries
• portfolios.liquid - this is rendered at http://yoursite.com/portfolios, if you want to have a page that display all (or a selection of) your portfolios, if you create one, you should add a link to this in _header.liquid
• portfoilio.liquid - this is the most important file in a theme, it is used to display a portfolio

Variables you have access to in a theme

In all pages, you have access to the follow variables:

• portfolio - current or default portfolio

  • name - name of portfolio
  • artist_statement
  • photos - array of photos
  • friendly_id - url format of this portfolio

• user

  • login, email, site_title, site_description, agent, bio, phone, blog, friendly_id, custom_domain
  • has_blog?, has_agent?, has_phone? - returns true if you have entered blog, agent, and phone, respectively in account info

• photos - essentially the same as portfolio.photos, you would typically use a for loop to list all of them in portfolio.liquid, each of these photos contains:

  • title - title of image
  • description - photo description
  • _photopageurl - this is the URL to the Flickr photopage, to satisfy Flickr's guidelines, you must include a link back to Flickr when you display any image off of Flickr
  • url_square, url_thumbnail, url_small, url_medium, url_original - URLs to different sizes of the image
  • url_large - provides URL to the large size image if available, otherwise, it returns URL to the medium

• in contact.liquid, you have access to:

  • @contact_form - if you display this instance variable it will include a email contact form, you can style it with CSS if you so desire

• in about.liquid, you have access to:

  • @buddy_icon - this is the URI of your Flickr buddy icon

Available Liquid filters

• display_galleriffic(portfolio) - display gallerrific code block for a given portfolio, you invoke this by

  { portfolio | display_galleriffic }

• asset_url(asset) - this provides a URI to something in the assets folder

• link_to_page, link_to_portfolio - provides links to page or portfolio, see _header.liquid for how to use them

Example Themes

signature-on-black

This is the code of our Signature on Black theme, it uses our helpers (aka Liquid filters) to provide optimized performance by utilizing MemCached.

signature-on-black-without-filters

This is the same signature-on-black theme with a re-written portfolio.liquid to show how to go through the photos of the portfolio to generate the HTML block:

<div id="thumbs">
  <ul class="thumbs noscript">
    {% for photo in photos %}
      <li>
        <a class="thumb" href="{{ photo.url_large }}" title="{{ photo.title }}">
          <img src="{{ photo.url_square }}" alt="{{ photo.title }}" />
        </a>
        <div class="caption">
          <div class="flickr-link">
            <a href="{{ photo.photopage_url }}" target="_blank" title="Go to Flickr page of this photo">Flickr link</a>
          </div>
          <div class="title">{{ portfolio.name }} : {{ photo.title )}}</div>
        </div>
      </li>
    {% endfor %}
  </ul>
</div>

Download

You can download these theme examples in either zip or tar formats:

You can also clone the project with Git by running: $ git clone git://github.com/ayn/pullfolio-theme-howto

You can also view the source code on GitHub.

Useful links

• Liquid Templating Language - you can learn all about Liquid here
• jQUery
• jQuery UI
• Galleriffic

Contributors

• Raymond Law
• Andrew Ng

© 2009 Pullfolio.com, themes examples are released under the MIT license