Cookie

Create a “badge” Flickr

Published by TheJoe on

Estimated reading time: 2 minutes

Caution


This article was published more than a year ago, there may have been developments.
Please take this into account.

Public now the translation of a very interesting article found a few days ago on how to create custom styles per le custom gallery di Flickr.

As many will know, Flickr is a social network to lovers of photography. People enrolled, upload photo, commented on foto and other gets feedback other to their photos. One of the great things about Flickr is the ability to specify licenses for your photos, but in this article we'll take care of '”export” images from a Flickr account on an external site.

The social network provides the user un wizard with which you can create “badge” Custom, but with little choice in terms of adaptation. In this article we deal with document the API Part badge di Flickr, showing the HTML Flickr that transmits the same to the inclusion. This will definitely easier to work with CSS.

Regardless of what we do, we include these initial lines:

<script type="text/javascript"
src="https://www.flickr.com/badge_code_v2.gne?user=[L'ID utente]">

We will have to replace “L'ID utente” with (coincidentally) the user ID. The ID can be obtained by entering your username on this page: idgettr. It can replace the symbol “@” with the corresponding HTML “%40“.

I enabled parameters

Apart from these there are many other parameters, in this table list the main:

ParameterTypeValuesDefinition
countwholeAn integer between 1 and 10The number of photos to show. (10 di default)
displaystringlatest, randomThe badge shows the last picture or photo Random. (the last default)
layoutstringh, in, xSort photos horizontally, Vertically not the ordinarle. (default horizontal)
sourcestringuser, user_tag, user_set, group, group_tag, all, all_tagWhere are taken photos? After choosing one of these, you have to declare up to two parameters specifying the / tags and / or the group ID o set. These parameters are tag (string), groups (the integer value can be found on idgettr), and set (the whole found in the URL of a specific set (this is. la nostra url è …/sets/1632467/ quindi l’ID del set è 1632467), respectively.
sizestrings, t, mThe size of the picture. s means “square”, t miniature, and m medium-sized. (Keep in mind that the average size equal to the size small when we look at “available sizes” on a photo. (miniatura di default)

We modify the output style

Once included in our Javascipt page, return an HTML output for display in the browser. Since we are to change the output style, you need to know with precision the code. This is an example of how the code is returned to base:

<div id="flickr_badge_image1">
  <a href="[the photo page]">
    <img width="[xx]" height="[xx]" src="[the url]" title="[The photo's title]" alt="A photo on Flickr" />
  </a>
</div>
<div id="flickr_badge_image2">
  <a href="[the photo page]">
    <img width="[xx]" height="[xx]" src="[the url]" title="[The photo's title]" alt="A photo on Flickr" />
  </a>
</div>
<div id="flickr_badge_image3">
  <a href="[the photo page]">
    <img width="[xx]" height="[xx]" src="[the url]" title="[The photo's title]" alt="A photo on Flickr" />
  </a>
</div>

And so on. For each image, The ID will change into a whole.

Look here:  "Level out" the volume of our MP3 library with MP3Gain

Now you can create an appropriate style with CSS, to make the Flickr gallery as we want.


TheJoe

I keep this blog as a hobby by 2009. I am passionate about graphic, technology, software Open Source. Among my articles will be easy to find music, and some personal thoughts, but I prefer the direct line of the blog mainly to technology. For more information contact me.

2 Comments

Separate Collection's blog · 26 July 2010 at 4:36 PM

thank you thank you thank you thank you

voucher · 12 May 2010 at 10:41 AM

very interesting article .. expect to see the result! 😀

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.