Code Blender

An atomic Middleman partials library

Thumbnail

  2. Molecule
  3. Thumbnail

Default Just an array of images

Image
Image
Image
Image
Image 
= codeBlender "thumbnail", "molecule", { array: [ { image: { extraClass: "img-responsive", src: loremPixel('300/200') }, thumbnail: {} },
                                     { image: { extraClass: "img-responsive", src: loremPixel('300/200') }, thumbnail: {} },
                                     { image: { extraClass: "img-responsive", src: loremPixel('300/200') }, thumbnail: {} },
                                     { image: { extraClass: "img-responsive", src: loremPixel('300/200') }, thumbnail: {} },
                                     { image: { extraClass: "img-responsive", src: loremPixel('300/200') }, thumbnail: {} } ] }

<div class='row'>
<div class='col-xs-12 col-sm-6 col-md-4'>
<div class='thumbnail'>
<a href="/assets/images/"><figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://lorempixel.com/300/200/nature/" alt="Image" class="image__img img-responsive" itemprop="contentUrl" />
</figure>

</a></div>
</div>
<div class='col-xs-12 col-sm-6 col-md-4'>
<div class='thumbnail'>
<a href="/assets/images/"><figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://lorempixel.com/300/200/nature/" alt="Image" class="image__img img-responsive" itemprop="contentUrl" />
</figure>

</a></div>
</div>
<div class='col-xs-12 col-sm-6 col-md-4'>
<div class='thumbnail'>
<a href="/assets/images/"><figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://lorempixel.com/300/200/nature/" alt="Image" class="image__img img-responsive" itemprop="contentUrl" />
</figure>

</a></div>
</div>
<div class='clearfix'></div>
<div class='col-xs-12 col-sm-6 col-md-4'>
<div class='thumbnail'>
<a href="/assets/images/"><figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://lorempixel.com/300/200/nature/" alt="Image" class="image__img img-responsive" itemprop="contentUrl" />
</figure>

</a></div>
</div>
<div class='col-xs-12 col-sm-6 col-md-4'>
<div class='thumbnail'>
<a href="/assets/images/"><figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://lorempixel.com/300/200/nature/" alt="Image" class="image__img img-responsive" itemprop="contentUrl" />
</figure>

</a></div>
</div>
</div>

Linked Thumbnail Provide an HREF for the image

Image 
= codeBlender "thumbnail", "molecule", { array: [ { image:     { extraClass: "img-responsive", src: loremPixel('300/200') },
                                       thumbnail: { href: "footer/background1.png" } } ] }

<div class='row'>
<div class='col-xs-12 col-sm-6 col-md-4' href='/assets/images/footer/background1.png'>
<div class='thumbnail'>
<a href="/assets/images/"><figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://lorempixel.com/300/200/nature/" alt="Image" class="image__img img-responsive" itemprop="contentUrl" />
</figure>

</a></div>
</div>
</div>

Captioned Thumbnail Push an HTML element into the Tumb array

Image
Caption
= codeBlender "thumbnail", "molecule", { array: [ { image:     { extraClass: "img-responsive", src: loremPixel('300/200') },
                                       thumbnail: { caption: "Caption", href: "HERE" } } ] }

<div class='row'>
<div class='col-xs-12 col-sm-6 col-md-4' href='/assets/images/HERE'>
<div class='thumbnail'>
<a href="/assets/images/"><figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://lorempixel.com/300/200/nature/" alt="Image" class="image__img img-responsive" itemprop="contentUrl" />
</figure>

</a><div class='caption'>Caption</div>
<div class='clearfix'></div>
</div>
</div>
</div>

Zoomix Thumbnail Provide a Gallery

Image 
= codeBlender "thumbnail", "molecule", {  array: [ { image:     { extraClass: "img-responsive", src: loremPixel('300/200') },
                                        thumbnail: { zoomix: true,
                                                     href:   "footer/background1.png",
                                                     data:   { toggle: "lightbox" } } } ] }

<div class='row'>
<div class='col-xs-12 col-sm-6 col-md-4' data-toggle='lightbox' href='/assets/images/footer/background1.png'>
<div class='thumbnail'>
<a href="/assets/images/"><figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://lorempixel.com/300/200/nature/" alt="Image" class="image__img img-responsive" itemprop="contentUrl" />
</figure>

<div class='zoomix'>
<span class='fa fa-search'></span>


</div>
</a></div>
</div>
</div>

Resources Useful websites and tutorials

Title URL
Bootstrap Thumbnail http://getbootstrap.com/components/#thumbnails

Tasks

Task Date
Thumbnail should just include one thumbnail - gallery should sort out the rest
Need to sort out the zoomix
Path to image not working
Needs revisiting as a component so it allows for all the possibilities of usage
Need to link whole image to destination
Add image Ribbon to thumbnail
Options to remove thumbnail border
Provide the ability to show just one thumbnail without the row etc
Put this into BEM
Do I want responsive image to be the default for these