Collections-based projects

_config.yml

@@ -24,3 +24,6 @@ per_page: 20
 paginate_path: "/page:num/"
 markdown: kramdown
 gems: [jekyll-paginate, jekyll-gist]
+collections:
+  projects:
+    output: true

_includes/project_tags_collection.html

@@ -0,0 +1,25 @@
+{% if site.enableTags ==  true %} 
+	<div id="tag-filter" class="col-md-12 col-xs-12 tag-group">
+		<span class="label tag-filter tag-cloud all">Reset</span>
+        {% assign tagarray = site.tagarray %}
+        {% for project in site.projects %}
+            {% for tag in project.tags %}
+                {% assign tagarray = tagarray | push: tag %}
+            {% endfor %}
+        {% endfor %}
+
+        {% assign tags = tagarray[1] %}
+        {% for item in tagarray %}
+            {% assign tagDown = item | downcase %}
+            {% assign tagComp = tags | downcase %}
+            {% unless tagComp contains tagDown %}
+                {% capture tags %}{{ tags }}|{{ item }}{% endcapture %}
+            {% endunless %}
+        {% endfor %}
+
+        {% assign taglist = tags | split: '|' | sort %}
+        {% for tag in taglist %}
+            <span class="label tag-filter tag-cloud" data-tag="{{ tag | downcase }}">{{ tag }}</span>
+        {% endfor %}
+	</div>
+{% endif %}

_layouts/project_collection.html

@@ -0,0 +1,46 @@
+---
+layout: default
+---
+<article class="post">
+
+  <div class="post-content">
+    {{ content }}
+
+    <div class="projects row">
+    {% include project_tags_collection.html %}
+    {% for i in site.projects %}
+    <div class="project-item col-md-4 col-sm-6 col-xs-12" data-tags='{{ i.tags | jsonify | downcase }}'>
+    	<div class="well project-outer">
+    		<div class="project-inner">
+    			<a href="/static/projects/{{ i.image }}" class="thickbox">
+    			<div class="project-img bordered" style="background-image: url('/static/projects/{{ i.image }}');"></div>
+                </a>
+                {% if i.url %} <a href="{{ site.baseurl }}/{{ i.url }}"> {% endif %}
+    			<h3 class="project-headlines">{{ i.title }}</h3>
+    			{% if i.url %} </a> {% endif %}
+    			<div class="project-content">
+    				<div class="tag-holder">
+    				{% if i.tags %} 
+    					{% for j in i.tags %}
+    					<span class="label tags tag-filter" data-tag="{{ j | downcase }}">{{ j }}</span>
+    					{% endfor %}
+    				{% endif %}
+    				</div>
+
+    			</div>
+    			<div class="project-footer"> 
+    				{% if i.url %} 
+    				<a href="{{ i.url }}" class="btn btn-info btn-raised btn-sm project-link">View</a>
+    				{% endif %}
+    				<span class="project-timeline">{{ i.date }}</span>
+    			</div>
+    		</div>
+    	</div>
+    </div>
+    {% cycle '', '', '<div class="clearfix visible-lg-block visible-md-block"></div>' %}
+    {% cycle '', '<div class="clearfix visible-sm-block"></div>' %}
+    {% endfor %}
+    </div>
+  </div>
+
+</article>

_projects/myproject.markdown

@@ -0,0 +1,30 @@
+---
+layout: post
+title: Test Page
+date:   2015-06-04 13:50:39
+categories: others
+tags: [test, page]
+image: placeholder.jpg
+---
+
+This is a test project page where we can explore how to embedd images in the page. 
+
+## Image example 1
+
+Here, I will embedd image from local assets which goes into `assets` directory in project's `root` directory. Choose a specific image, related to particular post. I chose to name the image `test-page-image-1.jpg`, which I will embedd as:
+
+```markdown
+![my alternate text](/assets/test-page-image-1.jpg);
+``` 
+
+![my alternate text](/assets/test-page-image-1.jpg);
+
+Ofcourse, you can load images from web as well. Just point to image direct URL. For ex, here is one placeholder image:
+
+```markdown
+![my alternate text](http://lorempixel.com/400/200);
+``` 
+
+![my alternate text](http://lorempixel.com/400/200);
+
+One cool thing about this is the fact that images adapt themselves to the screen size of device. Try to resize your browser window and check for yourself, Have fun.

projects-collections.md

@@ -0,0 +1,7 @@
+---
+layout: project_collection
+title: Collection-based projects
+permalink: /projects-collections/
+---
+
+Projects that are composed of pages in the website, rather than linking to external sites, so that all metadata is in one place.