Ava Johnson

11 posts

Images in grid

You can use Foundation 5

You can use a couple of Zurb Foundation HTML elements writing in Ghost markdown editor. Here are some links to Zurb Foundation docs. Remember to remove all whitespaces and breaklines from your html blocks when you writing in Ghost markdown editor.

Check Zurb Foundation documentation: http://foundation.zurb.com/docs/

Example - two cols grid:

Custom article with cover

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis officia necessitatibus, corrupti sapiente dolores! Nemo a consequatur facere, aliquid ea labore quos voluptate et autem impedit maiores ut, deserunt voluptatibus in, officia voluptatem dolores ullam. Expedita accusantium reiciendis inventore neque, doloremque fugit optio fuga harum ex! Maxime officiis temporibus aliquam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Demo post

Omg more demo posts

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis officia necessitatibus, corrupti sapiente dolores! Nemo a consequatur facere, aliquid ea labore quos voluptate et autem impedit maiores ut, deserunt voluptatibus in, officia voluptatem dolores ullam. Expedita accusantium reiciendis inventore neque, doloremque fugit optio fuga harum ex! Maxime officiis temporibus aliquam.

Lorem ipsum dolor sit amet, consectetur

One more demo post

This is only preview

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis officia necessitatibus, corrupti sapiente dolores! Nemo a consequatur facere, aliquid ea labore quos voluptate et autem impedit maiores ut, deserunt voluptatibus in, officia voluptatem dolores ullam. Expedita accusantium reiciendis inventore neque, doloremque fugit optio fuga harum ex! Maxime officiis temporibus aliquam.

Lorem ipsum dolor sit amet, consectetur

Embeding Video

Video embeding

Simply embed code in your Ghost markdown editor. Put it in <div class="flex-video">[..your iframe goes here]</div>

Flex video class is very important because it makes video responsive.

Kittens everywhere

Demo post

This is another demo post

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis officia necessitatibus, corrupti sapiente dolores! Nemo a consequatur facere, aliquid ea labore quos voluptate et autem impedit maiores ut, deserunt voluptatibus in, officia voluptatem dolores ullam. Expedita accusantium reiciendis inventore neque, doloremque fugit optio fuga harum ex! Maxime officiis temporibus aliquam.

cat

Demo header

Lorem

Image gallery

Image carousel gallery

Artee theme uses Owl Carousel : http://owlgraphic.com/owlcarousel/

General usage in Artee theme:

<div class="artee-gallery">  
 <div class="item">
  <a href="/content/images/2014/Jan/1.jpg" class="artee-image-popup">
   <img src="/content/images/2014/Jan/1.jpg" alt="">
  </a>
 </div>
 ...
</div>  

Example:

Spooke eye

Image Popup Example

If you want Lightbox on image click simply add 'artee-image-popup' in your <a href=""> link. Like it is shown.

Artee uses Magnific Popup

You can use Magnific Popup everywere you want. So if you want place Magnific Popup in (for example) any link you can write this html code:
<a href="path/to/image.

Ghost lady

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis officia necessitatibus, corrupti sapiente dolores! Nemo a consequatur facere, aliquid ea labore quos voluptate et autem impedit maiores ut, deserunt voluptatibus in, officia voluptatem dolores ullam. Expedita accusantium reiciendis inventore neque, doloremque fugit optio fuga harum ex! Maxime officiis temporibus aliquam.

ghost-lady

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis officia

Twenty Twenty

Visual diff tool

In Artee Theme we use the Twenty Twenty plugin by Zurb: http://zurb.com/playground/twentytwenty It is realy awesome. You can use it if you need to highlight the differences between two images? This is some kind of a visual diff tool.

Usage is very simple. Just place your two images in the div container with