How to Create a Gallery or Portfolio to your Blog?

There may be time you need to add a gallery or portfolio to your blog to showcase some of your works. If you are using wordpress, you can add a gallery easily to your page or post by using its media features.

The only disadvantage of this method is that when you click on the individual thumbnail of the images, it will open up a new window showing the image in it. Imagine if you have many images, it will open up many new windows and become cumbersome when you want to view all of them. There should be a better way to display it, for example, let the gallery run like a slideshow.


Lightbox Plus Plugin
Fortunately, wordpress offers a plugin called Lightbox to streamline this function but it does not allow too much customization so I’ve chosen Lightbox Plus instead. It gives you a wide range of choices so you can customize easily without the need to tweak the CSS. Simply click on the individual fields on how you want to display your gallery or portfolio.

Install Lightbox Plus Plugin
You can download the Lightbox Plus plugin from here. Once you downloaded, install it as a plugin and activate to use. At the wordpress admin dashboard, you will see the Lightbox Plus plugin is now available under the left hand panel “Appearance” category.

Before you edit the Lightbox Plus setting, you need to create your gallery or portfolio first. Follow the below steps to add a gallery to your blog.

1. Go to your new page or post and click on “Add Media” icon to insert images.
2. Click on the tab “From Computer”.
3. Click on “Select Files” button to select a series of images to import. (Hold on the “Ctrl” key so you can select several images to be imported at the same time).
4. Click on “Save all changes” to save.
5. Under “Gallery Settings”, click on “Image File” beside “Link thumbnails to” if you want to display images as a pop-up otherwise all images when view will be displayed just like an ordinary blog page.
6. If you wish to display your gallery more than 3 columns, you can change it at “Gallery columns” otherwise leave it at default of 3.
7. Click on “insert gallery” to finish.

Once you have added a gallery or portfolio, you are now ready to edit how it is going to be displayed.

1. At the wordpress admin dashboard, click on “Appearance” and then “Lightbox Plus”.
2. Under the “General setting” of Lightbox plus, the default setting for “Lightbox Plus Style is “Shadowed”.
3. You can change it to “Dark” if you want your gallery to pop up while the rest of the screen is dim.
4. Click on “Save settings >>” button to save.
5. If you want your gallery/portfolio to run like a slideshow, you can do so under the “Slideshow Settings”. Click on the tab, it will open up a list of options to customize.
6. Check on “Slideshow” and “Auto-Start Slideshow”, once they are checked, the gallery will run automatically when it is clicked.
7. Click on “Save settings >>” button to save.
8. Last, and the most important, under "Other Settings", check the box besides "Use For WP Gallery:" otherwise your lightbox effect will not work for your gallery.
9. Now go and try out your gallery or portfolio, it should run automatically when you click on any images.

Add Border to Your Images

If you like to add a border around your images so that it can stimulate the effect of a photograph look, you can do so by following the steps below.

1. Go to wordpress admin dashboard, click on “Editor” under “Appearance”.
2. This will bring out the “Edit Themes” screen.
3. On your right hand side, click on “stylesheet (style.css)” under “Style”.
4. You need to create some css code here so make sure the stylesheet is editable.
5. If it is editable, there will be a bluish green “Update File” button below the stylesheet else you need to change the permission setting for this file to “777” using FTP software.
6. Now, paste the below css code to the stylesheet and click on “Update File” to save.

<
.portfolio img {
   padding:3px;
   border:1px solid #021a40;
}

7. You must apply the css class to your gallery/portfolio to take effect.
8. Go to the page or post you have created the gallery/portfolio before and paste in the following code in the “HTML” tab.

<
Graphic Design
[gallery link="file" columns="4"]

9. Click on “Update” to save and your images should have border around it now.

If you have further questions on Lightbox Plus, you can check it out at the FAQ page at Wordpress site.

Note:
If you notice a light beige box at the end of the Lightbox plus setting, try not to click on the "Reset/Reinitialize Lightbox Plus" as it will clear away all your settings. If you need to click on it, make sure you redo all your settings otherwise your Lightbox will not work.