Create Boxed Images

December 24, 2013|

Boxed images are basically images that are in a container and usually will include elements such as content and/or a button. The live demo for Encounters Lite shows what boxed images look like:

en-boxed-images

The Code Snippet

You will have to do some html code here by copying and pasting the code below and then replace the content with your own. You are not required to have the content that this sample has, instead if you have something different, feel free to insert your own. This one is for a 3-column layout, but you can have more simply by changing the class=”span4″ to something else. For example, if you want 4 columns, you would use “span3“. This is based on a 12-column layout which means each column span has to equal 12. So if we have 4 columns, each with a class of span3, then span3 x 4 columns =12 columns.

<div class="row-fluid">
<div class="thumbnails">
<div class="span4">
<div class="thumbnail">
<img alt="image 1" src="Path-to-image.jpg" /><div class="caption">
<h5>Jennifer Lorem <small>Founder</small></h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div>
</div>
</div><div class="span4">
<div class="thumbnail">
<img alt="image 2" src="Path-to-image.jpg" /><div class="caption">
<h5>Jesse Delore <small>Photographer</small></h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div>
</div>
</div><div class="span4">
<div class="thumbnail">
<img alt="image 3" src="Path-to-image.jpg" /><div class="caption">
<h5>Cynthia Nullam <small>Consultant</small></h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
</div>
</div>

Image Thumbnails

Image thumbnails for boxed layouts will depend on how many columns you are doing. For example, if you are doing the 3-column layout, then your images should be 370 pixels in width.

  • 1 column = 1170 pixels
  • 2 columns = 570 pixels
  • 3 columns = 370 pixels
  • 4 columns = 270 pixels

Note: I recommend you create your thumbnails first and then upload them.

 

 

Categories: Setup Tutorials for Encounters Lite

Leave a Reply