How to add a portfolio?


There are two types of portfolio available. The first one is the simple one, where each item opens a larger version of the preview. The second one is a little bit more complex where each item works as a category which opens a small gallery. You can add some caption to your works, even with some HTML markup like links and paragraphs. If you use some HTML within your caption please don't forget to alternate the single quotes and double quotes on the HTML attributes.

Simple portfolio

<div class="portfolio-item-preview-wrapper">
	<a href="[Path to the large image]" data-lightbox="[Category]" data-title="[Image Caption]" class="js-portfolio-zoom"></a>
	<img src="img/placeholder-square.png" class="portfolio-placeholder" alt="Square Placeholder">
	<img src="[Path to the preview image]" class="portfolio-item-preview js-portfolio-preview" alt="">
	<div class="portfolio-hover">
		<h4 class="portfolio-title">[Work Title]</h4>
		<p class="portfolio-category">[Work Category]</p>
	</div>
</div>

Gallery portfolio

<div class="portfolio-item-preview-wrapper">
	<a href="[Path to the large image]" data-lightbox="[Category]" data-title="[Image Caption]" class="js-portfolio-zoom"></a>
	<div class="portfolio-gallery">
		<a href="[Path to second large image]" data-lightbox="[Category]" data-title="[Image Caption]" class="js-portfolio-zoom"></a>
		<a href="[Path to third large image]" data-lightbox="[Category]" data-title="[Image Caption]" class="js-portfolio-zoom"></a>
	</div>
	<img src="img/placeholder-square.png" class="portfolio-placeholder" alt="Square Placeholder">
	<img src="[Path to the preview image]" class="portfolio-item-preview js-portfolio-preview" alt="">
	<div class="portfolio-hover">
		<h4 class="portfolio-title">[Work Title]</h4>
		<p class="portfolio-category">[Work Category]</p>
	</div>
</div>

Last update:
2015-10-01 17:31
Author:
Cristina Cavruc
Revision:
1.1
Average rating:0 (0 Votes)