Image
Middleman contains some placeholder image shortcuts to use during quick blocking out.
- lorem.image( '300x400' )
- lorem.image( '300x400', :background_color => '333', :color => 'fff' )
- lorem.image( '300x400', :random_color => true)
- lorem.image( '300x400', :text => 'blah')
Default image
= codeBlender "image", "atom", { src: loremPixel() }
<figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://lorempixel.com/200/200/nature/" alt="Image" class="image__img" itemprop="contentUrl" />
</figure>
Caption image
= codeBlender "image", "atom", { src: loremPixel(), extraClass: "img-thumbnail", caption: "HERE" }
<figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://lorempixel.com/200/200/nature/" alt="Image" class="image__img img-thumbnail" itemprop="contentUrl" />
<figcaption class='image__caption' itemprop='caption'>HERE</figcaption>
</figure>
Angular image
= codeBlender "image", "atom", { ng: { src: loremPixel() } }
<figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img alt='Image' class='image__img' itemprop='contentUrl' ng-src='http://lorempixel.com/200/200/nature/'>
</figure>
Thumbnail image
= codeBlender "image", "atom", { src: loremPixel(), extraClass: "img-thumbnail" }
<figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://lorempixel.com/200/200/nature/" alt="Image" class="image__img img-thumbnail" itemprop="contentUrl" />
</figure>
Circle image
= codeBlender "image", "atom", { src: loremPixel(), extraClass: "img-circle" }
<figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://lorempixel.com/200/200/nature/" alt="Image" class="image__img img-circle" itemprop="contentUrl" />
</figure>
Rounded image
= codeBlender "image", "atom", { src: loremPixel( "200/200", "Rounded", "abstract" ), extraClass: "img-rounded" }
<figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://lorempixel.com/200/200/abstract/Rounded" alt="Image" class="image__img img-rounded" itemprop="contentUrl" />
</figure>
Resources Useful websites and tutorials
| Title | URL |
|---|---|
| Bootstrap Images | http://getbootstrap.com/css/#images |
| Responsive Images | http://getbootstrap.com/css/#images-responsive |
| PlaceHoldIt | http://placehold.it/ |
| Lorem Pixel | http://lorempixel.com/ |
| Middleman Helpers | https://middlemanapp.com/basics/helper_methods/ |
Tasks
| Task | Date |
|---|---|
| Add a Responsive image example | |
| Include details on the micro format and use of figure in this partial | |
| Sort out the image Tag here | |
| Allow for the caption to be at the top or the bottom | |
| Allow for the removal of the rounded corners on the thumbnail i.e. image--notRounded | |
| Need to sort out the image caption design - over just using a thumbnail |