Slide-Out Instagram Widget

For awhile now I’ve been using a slide-out Facebook widget on the Five Fifteen website that I found here: http://www.richosoft-support.co.uk/fortune/slideoutfacebook.html. It’s worked out pretty good for me so far, however I wish I had one just like it for Instagram. I looked around and all of the solutions I found were either overly complicated or cost money. So I decided to just modify the code for the Facebook one and make it work for Instagram!

Tab in

Tab out

I’m not going to go too much into the code seeing as I didn’t write it from scratch rather than just modify someone else’s code. It uses a website called Intagme which allows you to place an Instagram widget on your page, which is cool, but we want it to slide out!

So to start off you want to download the following zip file:

1.) Unzip it, and upload instagme-widget.js and instagme-widget-plain.png to your server.

2.) Go to intagme.com.

3.) Put either your instagram username in the username box or a hashtag in the hashtag box.

4.) Fill out the rest of the form like so:

  • Widget Type: Grid
  • Thumbnail Size: 100
  • Layout: 3 x 3
  • Photo Border: No
  • Background Color: (Leave Blank)
  • Photo Padding: 0
  • Sharing Buttons: (Whichever you perfer, Yes is recommended)

5.) Click “Get Code”.

6.) You should get a code that looks like this:

You need the URL from that code, specifically the part after “?u=”.
So in this case, the part we need is “Zml2ZWZpZnRlZW5wcmludGluZ3xpbnwxMDB8M3wzfHxub3wwfHVuZGVmaW5lZHx5ZXM=”.

7.) Put this code on your website, but with your own long mess of numbers and letters we got above, perferably right before the closing </body> tag:

And that’s it! I even included the Instagram tab image I made to match the Facebook one!

There are some improvements I need to make to it, mostly to make it more compatible with the Facebook widget. For example, when the page is loaded and if you hover your cursor over the Facebook tab first, before you hover over the Instagram one, and then hover over the Instagram tab, the Facebook tab will be visable ontop of the Instagram widget. Another issue is that both tabs are position “fixed” on the page, the Facebook one being set to 21% from the top of the page and the Instagram one being set to 10%. This means that if the browser window is resized, the tabs will more than likely overlap. But these are just two very small issues. I’ve been using both widgets on my website just fine.

Let me know what you think!

Simple image gallery that generates thumbnails

While I was designing the website for Five Fifteen, I wanted to keep it really simple. One of the problems I ran into was that I needed a nice image gallery but I didn’t want to have to write a line of code for every image in my gallery, nor did I want to edit HTML every time I added a new image. One of my options was to use a gallery script available online, however most of those require databases and multiple files and that just seemed like an overkill for what I wanted. So, I decided to write my own!

This code loops through all of the images in a folder, checks to see if a thumbnail has already been generated, if not, it generates one with the specified dimensions, and displays the image.

This code has a couple of cool features:

  • It dies quietly. If an error occurs it just doesn’t display the images rather they outputting a bunch of ugly error messages. It will print a small subtle message in the HTML comments letting you know that something went wrong.
  • It can be used to create multiple galleries from different folders all on the same page simply by calling the makeGallery function again with a different directory.
  • It automatically generates thumbnails for the images.
  • It will attempt to create the thumbnails folder if it doesn’t already exist.
  • You can customize how your images are displayed by changing $imgOutput.

To use the gallery you just upload some images into the folder and call the makeGallery function like this:

As mentioned above, you can change $imgOutput to customize how your images are displayed. With that, you can use the following shortcodes to display data:

%galleryDir% – Current gallery’s directory path.
%fileName% – Current image’s filename.
%thumbFolder% – Thumbnail directory path for the current gallery.
%imgExt% – The image extension.
%thumbSize% – Thumbnail Size.
%img% – Current image path.
%thumb% – Current thumbnail path.

Of course there’s some features I could add in there and I may do so in the future but this does a pretty dang good job for what I need. I can just throw some images in a folder and this code does the rest!

Bonus points: I combine this with fancyBox for a real nice, professional looking gallery. Enjoy!

See this code in action here: http://fivefifteenprinting.com/gallery.

Iowa Tree Specialist

Here’s a small one-page website I was hired to build for a local tree service company. The website features a jQuery slideshow, Facebook activity feed, and a custom script I made that makes the background automatically change depending on what season it is.

This website is also optimized for mobile devices. The Facebook feed is hidden, background changes to a solid blue color, the header image adjusts to fit the screen, and the margin at the bottom of the page is removed. So that this page will look good no matter what device it is viewed on.

Gmail Trick

Here’s a random little tip/trick:

When e-mailing someone with a Gmail.com e-mail address you can add a plus sign (+) to the end of their username and put whatever you want and it will still end up in their inbox!

So if you send e-mail to kodie+isacooldude@gmail.com it will end up at kodie@gmail.com!

This can also be used in combination with filters to sort e-mail easily. For example, I could set up a filter where anything sent to kodie+junk@gmail.com gets sent directly to my junk folder and then give that e-mail to any website that requires an e-mail address even though I probably won’t want to read anything they send me.

Unfortunately some websites look at the plus sign as an invalid character in an e-mail address and won’t let you use it. :(

Also, Gmail doesn’t care about periods (.) in the username. So kodie@gmail.com, k.odie@gmail.com, and k.o.d.i.e@gmail.com all go to the same inbox.

All of the e-mail addresses I’ve used as examples here are the same as far as Gmail is concerened.

Even this one:
kodie+is.a.totally.nice.dude.with.a.really.long.email.address@gmail.com ;)

Try it for yourself!

Transparent border

So it’s been awhile since I’ve been on here. I’ve been busy with the new baby and work and stuff. Some of you may not know, but I run a screen printing business called Five Fifteen Printing & Design (http://fivefifteenprinting.com), and with that I have to do a lot of design work so I’ve decided to write a Photoshop tutorial because, why not?!

In this tutorial I’m going to show you how to create a transparent border/stroke around an object or text that will show through any objects or text underneath it. I have to do this a lot when designing t-shirts for bands.

First off, we’ll start with the basic design I’ve come up with for a band:

But wait! We need to put the band’s logo in there:

I think we can make that look a little better… Right click on the logo layer and go to “Blending Options”.

On the left hand side, go to “Stroke” and give the logo it’s border. The color doesn’t really matter because we’re going to make it transparent, but adjust the size to meet your needs. In this case I’m going to go with 30 pixels. Click OK.

So now we have something like this:

Now it’s time to turn that border transparent! The logo layer should now have a little “fx” icon next to it like this:

Right click on the “fx” icon and select “Create Layer”.

What this does is break up any effects that we’ve added (such as the border/stroke) into their own layers.

Now, right click on the new layer that was made (Should be called “[Logo Layer’s name]’s Outer Stroke”) and click “Blending Options” like we did before.

This time, on the default menu that comes up, under “Advanced Blending” change your Fill Opacity to 0% and your Knockout to “Deep” as shown below:

Click OK and that’s pretty much it!

But wait! One more thing to make your life a little easier… Hold down the CTRL key on your keyboard and click on your logo layer along with any effect layers that were made when we separated them earlier.

Right click on them and select “Link Layers”.

This will make it where if you move your logo layer, the other layers will go with it.

 

Hope this tutorial can be of help to some of you out there!

Oh yeah and if you were wondering who the band They Will Repent is, they’re a local band from my hometown, Des Moines, IA. Check them out! http://theywillrepent.bandcamp.com