Tutorial 1. Insert Flickr images in html webpage

When I designed my webpage to show my Fab Academy progress, I did it in plain html using css for the format. To minimize the weight of the page, I decided to save the images in a Flickr account and tried to link them from my webpage.

After some research in the web about how to do it, I found that it was not so easy to include them, but I finally got it. Through this tutorial I will summarize the main steps to do it.

Generate the html Flickr module and clear extra code

Once you are logged with your Flickr account, go to http://www.flickr.com/badge.gne and select create a html module.

In the second step, select the album or the tag where you have the photos you want to include. As you will see in the next steps, it is important not to have more than 10 pictures if you want to include them all.

In the third step, you have some personalization options: Number of pictures to shown, size of the miniatures, vertical or horizontal, and so on. Select the ones you prefer and continue to the next step.

The fourth step is the colours you want to use in your Flickr frame. As we are going to use our local css file, it doesn't matter which values we select here, so we continue to the last step

In the fith and last step of the assistant, Flickr is suggesting you some code to insert in your html code... But in this case we are not going to rely on it!! Try to find the javascript word on it, copy the url which is next to it, and open it in your preferred browser.

You will see that it includes some basic html sentences... Just copy the <img src> and <href> information and it is done!!. You have included the Flickr images and you can edit it with html coding.

As you can see, the only problem I still have not fixed is the size of the miniature image... It seems to be a image saved somewhere, and if you enlarge it too much you will not see it properly.

I hope it is useful for you. If you have any doubt or you know how to fix the problem with the miniature view, do not hesitate to contact me!!