Load Your Instructables in Google Images Style Gallery With PHP

Ever wanted to display your instructables in a stylish way in a gallery, (including photos from multiple steps in mini galleries) - while loading all the content from your feed so you don't have to update it? This script helps you load your instructables dynamically into a grid using RSS/XML and display them, including some of their images in a mini gallery, modeled after google image search. How is this different from other similar applications? This modified a grid plugin and loads a description as well as thumbnails of the project (in a mini-gallery) on mouseover of the thumbnail.

This plugin uses PHP and Javascript to modify elastic_grid available at

http://demo.phapsu.com/jquery.elastic_grid/index.p...

I did not write elastic_grid!. This version is a version of another elastic grid without the mini-gallery you may have seen elsewhere.

the modified full script that I have added to include your instructables is available at:

https://gist.github.com/tealdeal/b125d90507db888a9...

your server needs to be able to run PHP and javascript to use this as is.

Below I will walk you through using and installing it.

Step 1: Download Elastic Grid

I did not write elastic grid. It is available for download at:

http://demo.phapsu.com/jquery.elastic_grid/index.php

Step 2: Setup Elastic Grid

Put Elastic Grid's files into your public_html directory. There will be a working demo file you can edit (demo_responsive.html). The following code will replace the code in the demo (or your copied version of the demo)

Step 3: Your Header

You need to create a .php file (you can just create this in notepad, same as you would an html file, if you didn't know/aren't familiar with using php). Copy/follow the code on the elastic_grid demo.

Make sure the code example above or in the github gist is in the header portion of your file

Step 4: Body: Calling in Other Scripts

This will load the other scripts you need for this to function

Step 5: The First Part of the Instructables Code

This needs to go where you want to display the gallery of your instructables. This portion of the code loads the RSS feed of your instructables account (or whatever's account the username corresponds to) and assigns each item (each "entry", your projects) to variables we can call in the next step

Step 6: Second Part of the Instructables Code

This "prints" the variables we just assigned in the last step as part of a loop and displays your content

Step 7: Call J-query

This goes at the bottom of your document. You need to call j-Query for the scripts to work!

Step 8: Check Out Your Instructables Gallery!

See how it works and modify it as needed for your needs!

Let me know of any bugs or updates:

https://gist.github.com/tealdeal/b125d90507db888a9a52

Also, be aware that you will probably have to update your CSS font-size & line-height for the mouse-over if your instructables titles are long

Step 9: CSS - What I Changed

This is the CSS that I modified from elastic_grid to fit the max length titles of instructables, but you might want to add some more styling of your own. Note that the css file for elastic_grid has no spacing and is difficult to modify:

.og-grid li a figure span {
display: block; padding: 10px 0px; margin: 0px; font-size: 17px; line-height: 20px; text-transform: uppercase; font-weight: normal; color: rgba(255, 255, 255, 0.9); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.5);

}