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

Post 48 of 262

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:

<script type="text/javascript">
  $('#pics').poptrox();
</script>

…and replace those three lines with the code below:

<script type="text/javascript">
$('.poptroxactive').each(function() {
   $(this).poptrox();
});
</script>

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:

.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;}

In the dark version, you also need to add;

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

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.

, , , ,

This article was written by Andreas Viklund

Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.

8 comments:

sonotretailApril 3, 2012 at 01:55Reply

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?

B KrolsMay 18, 2012 at 22:13Reply

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!

DannyAugust 17, 2012 at 06:56Reply

can u attach files of that pls!!! i dont understand that very well

Marleena PontynenSeptember 9, 2012 at 22:28Reply

Hi Andreas!

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.

Marleena PontynenSeptember 10, 2012 at 15:12Reply

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!

RoelMarch 25, 2013 at 10:51Reply

first of all this is awesome, but is there a “simple” way to expand the card with one more page for a “leave a comment”

StilloOctober 21, 2013 at 20:36Reply

First, thank you very much for your great templates. ;-)

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?

Sorry for having bothered you, and thank you again!

NatalyJanuary 6, 2014 at 22:40Reply

How can I add one aditional photo gallery page? (I have two, I want add one more)

Menu