This Jekyll Plugin is used for easily rendering images from the filesystem.
This project relies on Gulp to optimize the images and copy the files to each of their respective directories. Gulp relies on Node, so if you're not familiar with it, go to the Node.js website and figure out how to install it on your system. Once installed, you can install gulp by executing the following on your terminal:
npm install gulp -g
Next navigate into your octopress directory and then put the package.json
file in this repository then execute npm install
. This will install all the dependencies. Once all the dependencies are installed you can also put the gulpfile.js
in your octopress. We'll look at how to use it later.
Copy portfolio.rb
into your plugins
directory.
Next, add the following to your _config.yml
file. Mine looks like this, but you have to modify the paths to match yours:
portfolio_root: /projects
portfolio_path: /media/wern/Files/files/octopress/source/images/pages/projects
portfolio_img_root: /images/pages/projects
The portfolio_root
is the path that points out to your portfolio when you accessed your blog from the browser.
The portfolio_path
is the actual path in your filesystem where the images for your portfolio is stored.
The portfolio_img_root
is the path that points out to where the images for your portfolio are.
Next, add the contents of the Rakefile
in this repository to your Rakefile
. Note that you can modify the portfolio directory, by default its named portfolio
:
portfolio_dir = "portfolio"
This would allow you to easily generate all the files needed to start a new project. You can use it by navigating to the root directory of your Octopress installation:
cd /home/user/octopress
Once you're in there execute the following in the terminal:
rake new_project["awesome-project"]
Simply replace awesome-project
with the name of your project. This will add the following directory in the portfolio directory you specified:
portfolio
- awesome-project
- img
- index.markdown
The index.markdown
file would have some content prefilled, and it looks like this:
---
layout: project
title: "awesome-project"
comments: false
sharing: true
footer: true
published: true
---
As you can see it uses project
as its layout. You can add this layout to Octopress by creating a new file under octopress/source/_layouts
and add the contents of the project.html
file in this repository. This will serve as the base layout for all projects. You can modify the layout if you want.
Next, you can now add the images to the img
directory in your specific project. In our example, the images should be stored in the following path: octopress/portfolio/awesome-project/img
.
Once you have added some images, you can then use the portfolio
liquid tag to output the screenshots for your project. In the example below, zenoir
is the name of the project:
{% portfolio zenoir %}
Once you're done adding all the details for your project, it should look something like this:
---
layout: page
title: "Zenoir"
date: 2013-02-23 07:21
comments: false
sharing: true
footer: true
---
##Project Type
Personal Project
##Project Description
Zenoir Online Classroom is an online learning system which can be used by teachers and students for conducting classes online. It's main feature is the sessions module wherein the teacher can have a discussion with the students using a chat box. This is implemented using Node.js and socket.io to ensure that the messages are distributed in real-time. It has also a distinct way of indicating unread posts by using red stars. There is also an email notification system which sends out emails to the students and teachers whenever a new post is made by a specific user in the classroom.
##Technologies Used
- HTML
- CSS
- JavaScript (jQuery)
- PHP (CodeIgniter)
- MySQL
- jQuery UI
- HTMLKickStart
- PixelCone Fileuploader
##Github Repo
[Zenoir Online Classroom](https://github.com/anchetaWern/Zenoir-Online-Classroom)
##Screenshots
{% portfolio zenoir %}
###Main project page
Next, you can now create the main projects page. This is where you will link all of the projects that you have created. You can create the main project page by creating an index.markdown
on the portfolio directory you specified. The file would contain something like this:
---
layout: page
title: "portfolio"
comments: false
sharing: true
footer: true
---
##Client Projects
###Ebay Store Automator
Allows sellers to automatically update the prices of products which they sell on ebay.
Prices are based on the current price in the Amazon website and a configurable profit setting.
{% img right /images/pages/projects/esa/small-admin.png 'ESA Admin' %}
####Technologies Used
- HTML
- CSS
- JavaScript
- PHP
- Amazon Product Advertising API
- Ebay Trading API
[View More Details](/projects/esa)
##
###Ecom
Ecom is an e-commerce Wordpress plugin that integrates with online services like Amazon, Ebay, Flickr, and Freebase. It also comes with a Wordpress theme which will be used for its product searching functionalities.
{% img right /images/pages/projects/ecom/small-ecom-portal-home.png 'Ecom Portal Theme Homepage' %}
####Technologies Used
- HTML
- CSS
- PHP
- Amazon Product Advertising API
- flickr API
- eBay Finding API
- Freebase
- Wordpress
[View More Details](/projects/ecom)
##
By default it uses the page
layout, if you want to use a different layout just create a new layout on the _layouts
directory of the theme that you're using then just change the value for the layout attribute of your main portfolio page.
So if you're using the slash theme then the layouts directory is in .themes/slash/source/_layouts
.
If you want to customize the CSS of the layout that you created, simply edit scss
files inside the sass/partials
directory
of the theme that you're using.
Once you're done this is how it will look like:
You can always customize the plugin based on the theme that you're using. You can change the HTML structure on the plugin file itself.
Lastly you could add the following style to _article.scss
file
so that the plugin will work out of the box.
.gallery{
width: 100%;
margin-top: 10px;
overflow: hidden;
}
.gallery a{
display: inline-block;
line-height: 1;
overflow: hidden;
}
.gallery img{
width: 290px;
margin: 13px;
margin-bottom: 0px;
border-width: 0 5px;
border: 5px solid #eee;
}
.gallery .gallery-item img{
height: 180px;
}
.gallery-item{
float: left;
width: 320px;
height: 241px;
margin-bottom: 30px;
}
.gallery-item h3 {
text-align: center;
}
Once you're happy with everything, you can now compile the project. Execute the follwing commands in your terminal:
gulp
rake generate
rake preview
Running gulp
might take some time depending on how many projects you have on your portfolio.
If you need an example on how the directory is structured, you can check the source
branch of my Octopress blog.
Demo available here
If this project helped you reduce time to develop, please consider buying me a cup of coffee :)