Create a “badge” Flickr
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:
Parameter | Type | Values | Definition |
---|---|---|---|
count | whole | An integer between 1 and 10 | The number of photos to show. (10 di default) |
display | string | latest, random | The badge shows the last picture or photo Random. (the last default) |
layout | string | h, in, x | Sort photos horizontally, Vertically not the ordinarle. (default horizontal) |
source | string | user, user_tag, user_set, group, group_tag, all, all_tag | Where 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. |
size | string | s, t, m | The 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.
Now you can create an appropriate style with CSS, to make the Flickr gallery as we want.
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! 😀