Mar 13 2012

How to add multiple image sections to “This is me” v1.0

To add support for more than one gallery section in the “This is me” and “This is me (dark)” templates, there are a few things that need to be done in the HTML and CSS code. The following step-by-step tutorial works for both the light and the dark version of the “This is me” template.

Please note that the changes described below has been included in v1.1 of the templates, so this tutorial is only interesting to those of you who have already built (or started building) websites with version 1.0 of the two templates.

1. Locate the unsorted list (ul) that lists the image thumbnails

The ul element should look like this:

[html] <ul id="pics">
[/html]

…and replace the id=”pics” with class=”poptroxactive” to make it look like this:

[html] <ul class="poptroxactive">
[/html]

2. Copy and paste the portfolio section code

Copy all code for the entire list item (li) that contains the gallery/portfolio, starting with:

[html] <li id="portfolio" class="section">
[/html]

…and ending with:

[html] </li>
[/html]

Then paste the copied code directly after the closing of the list item, below the section that you just copied. Rename the ID of the second gallery/portfolio section from id=”portfolio” to id=”portfolio2″. ID:s must be unique, unlike classes which can be re-used. This is the reason why id=”pics” was replaced by class=”poptroxactive” earlier.

3. Replace the JavaScript

Then scroll down to the bottom of the HTML code and locate the code that triggers the Poptrox javascript. It should look like this:

[html] <script type="text/javascript">
$(‘#pics’).poptrox();
</script>
[/html]

…and replace those three lines with the code below:

[html] <script type="text/javascript">
$(‘.poptroxactive’).each(function() {
$(this).poptrox();
});
</script>
[/html]

This is what enables the Poptrox jQuery plugin to work on more than one gallery section. Instead of triggering Poptrox for the ul with id=”pics” (which again could only be used once, and therefore only one gallery page can be used in v1.0 of the template), the script is now triggered by the class=”poptroxactive” which you added to both ul elements earlier. That class can be used on any number of gallery thumbnail lists, but in this example I am only adding a second one.

4. Create the internal navigation links

Add a text paragraph in each of the sections, directly below the ending of the ul element that contains the thumbnails. In the first section, the paragraph should look like this:

[html] <p class="portfoliomore">
<a href="#portfolio2">Next page</a>
</p>
[/html]

…and in the second section it should look like this:

[html] <p class="portfoliomore">
<a href="#portfolio">Previous page</a>
</p>
[/html]

This creates links between the sections, so that visitors on the site can navigate to the second gallery page and then back to the first one. Of course, link texts can be whatever you think works best. Just make sure that the link href matches the ID of the section you want the link to lead to. The class .portfoliomore can be styled in the CSS if you want to change the way that the links look, or their positions.

5. Edit the CSS (this-is-me.css or this-is-me-dark.css)

Since the thumbnail gallery layout styles were written for the id=”pics”, they need to be changed so that the styles are triggered by the class=”poptroxactive” instead. To do this, simply replace all occurances of “#pics” in the stylesheet into “.poptroxactive”, like this:

[css] .poptroxactive{list-style:none;margin:0 auto;padding:0;width:100%;}
.poptroxactive li{float:left;height:110px;margin:0 30px 8px 0;}
.poptroxactive li img{border:3px solid #fff;box-shadow:1px 1px 0px #aaa;cursor:pointer;width:100px;}
[/css]

In the dark version, you also need to add;

[css] body.inverted .poptroxactive li img {border:3px solid #111;box-shadow:0px 0px 2px #000;}
[/css]

6. Add more images

Finally, add more images in the second gallery section (the one with id=”portfolio2″) – and then save the document to preview the result in your web browser! If you have followed this tutorial step-by-step, the gallery/portfolio section should now look the same as the new version 1.1 of the template.

If something would not work, or if you have ideas or requests for further modifications, post a comment to this post.