Bulletproof + flickr

[Hanjo Iwanowitsch]

Ladies & Gentlemen,

I would like to list some random Flickr-Photos under the Blogtitle of a Bulletproof-Layout at http://www.bs-eutin.de. I should look similar to this example: http://www.lbsmalente.de, but the line of pictures should be under the Blogtitle.

When I use the Flickr-Tool I get a code like <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne ... "></script> - so it is not possible to fill this in the Bulletproof-form »Auswahl der Header-Grafik« for there is required a path to a picture.

I tried to fiddle with the index.tpl-file itself but I got the impression this is for People Who Know What They Do only.

How could I solve this problem?

Kind regards,
Hanjo.

[judebert]

Hi, Hanjo!

Indeed, Bulletproof is a complicated template, because it allows you to choose so many different options. But, never fear: we can get the images in your header, and make it understandable while we're at it.

The Serendipity banner is output from your index.tpl. Open that up and search for "serendipity_banner". You should find a <div> with that ID.

This div holds a background picture (on your blog, it's a blue gradient) and two links (a <h1> title and <h2> subtitle). You can probably read the HTML already; the weird stuff in curly braces (like {if $template_option.firb_title}) is Smarty. Smarty allows you to include or exclude things dynamically. For your purposes, all the Smarty can be ignored; just concentrate on where the <div>, <h1>, and <h2> tags start and end.

We want it to add your javascript for getting a few random images. Unfortunately, we don't know what kind of HTML that script returns. According to the example link you provided (thanks!), it will return some table cells. We'll want to float that table right, so we'll want to insert it before the title tags.

Right after the div, insert this code:

Code: Select all

<table id="flickr_random_banner">
<tr>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&display=random&size=s&layout=h&source=user&user=27888439%40N07"></script>
</tr>
</table>

Reload the blog, and you should see some random images in your header. But they're probably in the wrong place. No problem; we can use CSS to fix that. (We could probably just add align="right" to the code above, but that's considered bad practice.) Bulletproof has a neat feature that will append your own custom CSS instead of editing the template CSS. (This is nice because your CSS will not be overwritten when the template is updated.) Just add the following code to a file named "user.css":

Code: Select all

#flickr_random_banner {
width: 270px;
float: right;
border: 0;
}

When you reload the blog, you can see what else you'd like to change. You can even make changes while observing the effect if you use Firefox and its Firebug extension.

Let us know how it turns out. If you have any other questions, we'll be happy to help out.

[Don Chambers]

Judebert's example looks like it will work... but you could also do that below the banner, instead of inside of it, especially if you have a long line of photos.

Bulletproof's html structure includes a little-used container that was included for exactly the purpose of positioning something directly below the banner. Look for this code in index.tpl, at approximately line 112:

Code: Select all

<div id="serendipity_below_banner"></div>

Place your <script> code within that div:

Code: Select all

<div id="serendipity_below_banner">
    <table id="flickr_random_banner">
        <tr>
            <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&display=random&size=s&layout=h&source=user&user=27888439%40N07"></script>
        </tr>
    </table>
</div>

As with Judebert's suggestion, additional css may be necessary to get the appearance you desire.

[Hanjo Iwanowitsch]

Thanks Judebert,

it works fine as you could see on http://www.bs-eutin.de.

Into the CSS-file I added

Code: Select all

border-spacing: 5px;

and (from the Flickr-Badge-Code)

Code: Select all

.flickr_badge_image img {border: 2px solid white !important;}

to your code.

Thanks to Don as well – perhaps I will try the second way another time. It shows how much possibilities lie in the complex Bulletproof-theme I've never even dreamt of.

Thanks again to both of you for your quick and kind help.

Regards,
Hanjo.

--
http://www.ats20.de/blog

[Don Chambers]

Looks good!