Joomla Flickr module in Wordpress style tutorial

So lets star create W3C valid Flickr module for Joomla.

1.Step.

At first we must go to Flickr homepage and get your group badge code. At first step choose An HTML badge.
On second step choose your group or your personal photos sets.
At third step set No to "Would you like to include the group icon & a link to the group?"; set how many images you would like to show; set Thumbnail size and set orientation to Horizontal.

At fourth step set No background and No border.

Now we have your group flickr code. But this code have 2 problems:

1. It is W3C invalid. You can check in validator.

2.If you will publish this code in your website, you will see that your images will looks terrible. Each image proportions will be different.

So, lets start make valid Flickr module.

2.Step.

For now you will have this code:

<!-- Start of Flickr Badge -->
 <style type="text/css">
 #flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
 #flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
 #flickr_icon_td {padding:0 5px 0 0 !important;}
 .flickr_badge_image {text-align:center !important;}
 .flickr_badge_image img {border: 1px solid black !important;}
 #flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
 #flickr_badge_uber_wrapper a:hover,
 #flickr_badge_uber_wrapper a:link,
 #flickr_badge_uber_wrapper a:active,
 #flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
 #flickr_badge_wrapper {}
 #flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
 </style>
 <table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
 <tr>
 <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=latest&size=t&layout=h&context=in%2Fpool-psdeluxe%2F&source=group&group=1054805%40N23"></script>
 </tr>
 </table>
 </td></tr></table>
 <!-- End of Flickr Badge -->

Delete all Flickr badge Css code, you don't need it anymore. We need to do that, because you cant add css file in your website, it will be Invalid. Later we will add necessary styling in to your template css file.

Now lets fix main part of this code. Main part is this:

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=latest&size=t&layout=h&context=in%2Fpool-psdeluxe%2F&source=group&group=1054805%40N23"></script>

We need replace & to "& a m p ;" (without spaces)

So, valid Flickr code is:

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=latest&size=t&layout=h&source=group&group=1054805%40N23"></script>

3.Step

Now we need to add Flickr badge styling code in to your template Css file. Simply add this code to your template:

.flickr_badge { float: left; } .flickr_badge img { width: 75px; height: 60px; padding: 5px; margin: 0 5px 5px 0; border: 1px solid #365277; background: #365277; float: left; }

Off course set all parameters that you like.(images size, border size, color).

4.Step

Almost done. Now just add your main Flickr badge code in to div with class "flickr_badge":

<div class="flickr_badge">
 <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&&display=latest&size=t&layout=h&source=group&group=1054805%40N23"></script>
 </div>

5.Step

So, now we have valid Flickr badge code and we have images styling. Now we need to insert this code to Joomla template. To do that we will need very useful Joomla execution: Jumi. In Jumi module you can add whole spectrum of different html codes: Javascripts, tables, div...
So, simple install Jumi to your Joomla website and add your code into it.
Thats it. You will get very nice Joomla Flickr module in Wordpress style and it is 100% W3C valid. You can check it on our website. We have W3C valid website.
I hope it tutorial will be useful to your website. I try to find specific Joomla module that can show my Flickr image on website, but can find it, so I use this code in Jumi and I haven't no problem with website validation.