All posts

BB’s HOW TO: Putting a slideshow into your blog

October 24, 2009 / 12 Comments
Now firstly I should say I AM NOT AN EXPERT. In anything, really. And I am certainly NOT AN EXPERT in anything computer or internet-related. I am still a greenhorn (despite a couple of years in the www-saddle).
.
This said, I have managed a couple of little tricks on this here little black blog. Learned – not through any kind of ordered teaching method which normal folks might employ – but by complete accident, sheer persistence or downright luck. Usually a combination of all three.
.
And it would be just plain mean of me not to save you the hassle and pain of learning that way now, wouldn’t it? As long as you understand that no technical jargon will be used (or understood) by this particular blogger…
.
OK? OK.
.
I had a comment from a friend of mine, Kate (A Country Girl) who indicated she didn’t know how to insert a Flickr slideshow into her gorgeous blog. She dropped this bomb (a shock to me as I imagined she would know pretty much all there is to know about Photo Anything) in my last post comments section.
flickr howto 0
Aside: if you have a sick sense of humour you can investigate my sister’s comment above Kate’s … I don’t know WHERE she gets it from. Really.
.
For those who don’t know Flickr is a great site where you can upload your images to do various things with… print, share and re-use at places like your blog. I had just used the Blogger default for my blog images until I ran out of space, and wanted to make my images bigger*. So after taking advice from some other bloggers (including Kate, if I recall correctly) I upgraded my Flickr account to Pro (in order to handle the deluge of images I take).
.
Additional note: I only ever upload a small web-size version of each of my images (I work out the size my blog can handle in its borders and re-size everything before uploading). This is not to stop people downloading my stuff (although that’s a spin-off, as nothing would print very well due to the low resolution) but because my horrible internet connection would croak under the strain. Sad but true. The price I pay for living in the bush.
.
Now sometimes, you might take a heap of shots of a similar thing – say a giant dog being chased by a cat, or a calf having it’s first drink, or a goanna crossing a road. A sequence with a little story. Something which loses momentum as a series of static images which the viewer has to scroll down and down to see on your blog. Something that would look good as a moving series. This is the perfect fodder for your slideshow. I usually use between 5 and 15 images, but it’s totally up to you and what your story requires.
.
So once you are in Flickr, you upload your shots from your computer (follow You/Upload Photos and Videos). Once they are up, you can then assign your images to a ‘Set’. I set up a Set (hey, great command of English there, BB) – in this case titled “Goanna on Road’. Remember EVERY image in this set will show in your slideshow, so be selective and arrange in order to ‘tell’ your story.
.
After uploading and assigning your images to a set, go to your PhotoStream.
flickr howto 1 e
This will show you all your most recent images, regardless of their set.
Click on one of the images you wish to have in your slideshow.
The page should then look something like this:flickr howto 3e

Now click on the set link (circled above). This should bring up a nice neat set of thumbnails of your set.

(There are other ways to look at your Sets on Flickr… but this appears to be the only way I can see to get a slideshow happening with it. If I am wrong, don’t hesitate to tell me. I will be the last person to be shocked by the news!)

Anyway… you should now see an option for creating a slideshow:
flickr howto 4 e
Do as the red text tells you and CLICK!

(Talk about some BOSSY red text. Sheesh!)

And a full-screen version of the slideshow should start happening.

It’s important not to panic at this stage…

flickr howto 5 e

There IS a way to wrestle this sucker across to your blog…trust me!

After seeing that the order of images is right and it looks kinda the way you envisaged, you need to click on the black part of the page to force the options to come up at the top right.

Like this:

flickr howto 6 e

And you want to SHARE here (you KNOW you do!). Now you can simply copy and paste the HTML script ‘as is’.

Or …you can be really fussy and OCD and CHECK IT for sizing etc. *ahem* Should we do that? You talked me into it…

Click on CUSTOMISE HTML (circled bossily red for you in above image)

And you should see a pop-up window like this:

flickr howto 7 e

You can choose the SIZE of your slideshow here

(that’s what the red text says, and I believe it!).

If you know the limits of your blog body in pixels (this is HTML stuff, if your eyes are glazing) and you can choose an appropriate size. If you want it to sit exactly, you can alter the size (please remember to click ‘maintain aspect ratio’ so you keep everything looking normal – things can end up quite warped otherwise). If you don’t know your blog dimensions exactly, have a guess at the size – you can always back to alter later on. You will just need to re-do the steps from this point on when you make changes so they are reflected in your blog.

If you are happy with the preview, highlight the code box at the bottom of the pop-up page, and copy (Ctl-C).

Now head immediately back to your ‘new blog post’ page in your blog publisher – the place where you want to insert your slideshow. Now I have only ever used Blogger, but I imagine that every blog set-up allows you to write in either easy / compose mode (that’s ME most of the time!) or HTML.

flickr howto 8 e

Slip over to the HTML section for a sec …

and paste (Ctl-V) into the box.

The code will end up in amongst a lot of text… flickr howto 9e

Be careful (if you can’t read HTML code) to pop it in at the very start or the very end of the post. Otherwise you might stuff your formatting or mess your other images up. And I’d hate to have you suing me for wrecking a post on you! You can always haul it around to the right position once you are back in ‘compose’ mode. (Please note that it will look like a blank box here, but should show up as a slideshow in the ‘preview’ OK).

And once you have stopped fiddling with things around your new slideshow, you should be able to hit ‘publish’ and see your slideshow sitting in your post like this:

flickr howto 2 e

Voila! Or WA-LAH as Dash would say…

And to prove it wasn’t a one-off event, here ’tis again:


NB I have sized this to 600 px wide – the real estate on my blog where my posts end up (the column you are looking at now, in fact!). This area is dictated by the HTML behind the blog layout and (in mine) it is assigned to 610px, so this slideshow almost fills the space but gives a tiny bit of leeway for the eye. I found this measurement in the HTML section of the Edit Template part of my blog publisher, described as ‘main wrapper’. I discovered it by accident when I decided to fiddle one day. I almost lost the entire blog design, but hey… no-one lost an eye!!

…

MY QUESTIONS FOR YOU:

1. Was this HOW TO post remotely helpful to you?

2. Did I lose you at ‘Hello’?

3. Did I lose you mid-stream, perhaps at the HTML talk?

4. You couldn’t care less about slideshows and just want to see more photos of Old Stuff?

5. What (if anything) would you like to see next in a slideshow here?

All advice, hints and constructive criticism happily taken.

*a ‘BB How-To’ to come if people are interested.

You May Also Like

The Team and the Work
June 29, 2013
BULLS, BULLS, BULLS…
July 11, 2023
Dawgs: little and large
August 11, 2013

12 Comments

  • jeanie
    October 24, 2009 at 5:17 pm Reply

    My eyes glazed over at having to take and upload photos – but then, I would have had a field day with all that daggarned code.

    Well done!!

  • traceelements
    October 24, 2009 at 8:53 pm Reply

    Cool, I have to file this away for future reference! I reckon I'd do ok following your directions, but it probably helps that I know my way around Flickr a bit, and html a bit more. Wondering if I need a pro flickr account. I don't usually use flickr for my blog photos because I've still got lots of space with WordPress.

    Must be so timeconsuming reducing the image size of every photo you use!!! Got any shortcut tips on doing that?

  • Lorraine @ Not Quite Nigella
    October 25, 2009 at 7:00 pm Reply

    Very comprehensive! I must admit I've never made a slideshow for my site but that's because I don't know how to (until now) L)

  • Daryl
    October 26, 2009 at 12:57 am Reply

    Wow .. this is like so cool .. could you come and sit next to me because truly I cannot read/follow instructions .. dyslexia could be blamed but I am not dyslexic just someone who cant seem to follow written instructions. I am going to bookmark tho .. in the hopes someone will come help me when they see/hear me crying

  • Donalyn
    October 26, 2009 at 7:10 am Reply

    Well you know how much I liked it, since I linked to it on my blog today – very clear and easy to follow. Someone asked how to resize all the photos easily on Flickr – I just have mine on there in the size that fits my blog {which also happens to be 600px wide}. I don't like my public photos to be out there in a size large enough for someone to have an interest in stealing them, so I keep them relatively small in the first place. Thanks again for an great tutorial 🙂 I'm going to Stumble it as well, so I hope that throws a little extra traffic over to see it.

Leave a Reply

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

CommentLuv badge