populatetools / jekyllpopu Goto Github PK

Jekyll crash course: https://gist.github.com/furilo/68fb9faf5d73e98f1f0c

Clone repo and install

git clone [email protected]:PopulateTools/jekyllpopu.git
cd jekyllpopu
bundle install

By default, an image in a post will take the full width of the column. Options:

Inline image Add the class "inline":

{% img 'articles/160404-main_article-01' class:'inline' %}

Full width image Add the class "full_width":

{% img 'articles/160404-main_article-01' class:'full_width' %}

Add classes f_right and f_left to make the image slideout of the column in either direction.

If you want to show a caption of the image, you can add an attribute title to the img, and a class caption to make it show. If you only add the title, it will function as the normal html title element. Example:

{% img 'articles/00Divorce/160403-wadus-1' class:'full_width caption' title:'Caption of the image' %}

Just include the following code (the system will include the corresponding link for the tweet) between the paragrahs where you want the tweet box to appear as the user scrolls:

Example:

Based of Magnific Popup. Two types:

1. Centered image, meta data below photo: class "popup-gallery"
2. Image on the left, meta data on the right: classes "popup-gallery popup-gallery-full"

The internal markup for listing photos is the same.

<div class="popup-gallery clearfix" id="gallery">

  <div class="item"><a href="URL/TO/IMG" 
    title="Title of the photo"
    subtitle="Description of the photo. ">
      <img src="URL/TO/IMG" >
  </a></div>

  <div class="item"><a href="URL/TO/IMG" 
    title="Title of the photo"
    subtitle="Description of the photo. ">
      <img src="URL/TO/IMG" >
  </a></div>

</div>