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:

<ul id="pics">

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

<ul class="poptroxactive">

2. Copy and paste the portfolio section code

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

<li id="portfolio" class="section">

…and ending with:

</li>

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:

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:

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

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

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

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:

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.

9 comments:

reading through the tutorial was very helpful. when adding multiple images, do you recommend hosting with a cdn service or on local server? if the hosting is with a cdn, how does (if any) it affect the above mentioned code?

I’m enormously grateful for your site, templates and tutorials. After weeks of trying to find out whether I would indeed be able to build my own website, it has taken me only a couple of hours to make a great looking draft. I’ve used the This is me dark-template. When adding images to the portfolio though, the images (which are vertical in my case) always pop up too large, which causes the rows to overlap. I’ve downsized the thumbnails to 74 pixels in height and the larger images to 744 pixels, but that doesn’t help. How can I adjust this? Thanks again for all the help!

I would first like to thank you for being so very generous with your CSS templates. The last time I had to do our website it took me 2 months and at the end I had an enormous amount of pages to update. Thanks to your really stylish template It has taken me 2 days which is great as I don’t have so much time to do it with me being busy promoting my business and making things.

So our new website is up, thanks to you. I was a bit greedy with the gallery pages, I tried making 4 and was happy to see that I got it to work nicely… on my computer. The popup window does not seem to be functioning on the online version. But I cannot understand why it should work on one but not the other, even the browser I use is the same. The only variation I can think of is the server.

Before I started on this project I did not know what CSS was. I have learned a bit, but not enough to figure this one out. I would appreciate greatly if you could have a look at it for me.

Also my partner suggested that the popup image viewing function could have little arrows allowing you to navigate straight to the next or previous image.

Once again Thank You. Your designs where the most pleasing stylistically that I could find, that is why I wanted to use them.

Never try and work something out after 10 hours of staring at the screen at 12.30 am. I woke up this morning and had it figured out. In my haste to upload the site online I forgot to upload some files. Problem solved and our website looks fabulous!

I would like to ask you a question about your implementation of Poptrox in these templates “This is me”: how can I make the popup box larger for image with high resolution, as large as the browser window, with the possibility to scroll down if needed?