Random Image Control for BlogEngine.Net

February 7, 2008 00:46 by Admin

I've recently started using the BrightSide theme which was converted to BlogEngine.Net by Henrik Stenbæk (link below)

I really like the header photo on the homepage but though it was a shame that its always the same image. It would be great to show one at random, from a selection of appropriate images.

This got me thinking a little. Maybe I could put together a simple control which would enable the user to specify a directory of appropriate images and then write out the appropriate html to show a random image from that directory.

Well thats exactly what I did, and here it is to download.

RandomImage1.0.zip (1.35 kb)

To install, simply drop into the app_code/controls directory.

Here is an example of how I'm using it with the BrightSide theme. Click on the home page and refresh a few times to see the result.

First of all, you need to edit the css file to remove the background-image reference in #headerphoto. This is because we will be using our own random image, leave the height, width and border settings as they are.

Next, you need to edit site.master. Look for a div with the ID="headerphoto" and replace with this:

<blog:RandomImage ID="headerphoto" ImageUrl="/blog/themes/BrightSide/headerphoto/" runat="server" />

The css for the height, width and border will be picked up from the css file. When the control renders, it will render as in image tag with the ID of the server control, and the src as a random image from that directory.

You can optionally pass in CssClsas="CssClassName" if you would rather define your Css that way.

I've slightly enlarged the header image in the theme so I can get more on, but the concept is still the same.  Obviously all of the images need to be the correct size for this to work in this context.

I originally wrote this as a User Control which would have given flexibility to include this in a post or page, but it felt like this was more of a template (site.master) control rather than something to embed in a post/page.

You could use this for example, to do a random image on your sidebar.

Hope someone finds this useful, I'd love to hear any feedback. 

Download the Theme: http://www.onesoft.dk/post/2008/01/New-BlogEngine-Theme---Bright-Side-of-Life.aspx 


Tags:
Categories: Programming
Actions: E-mail | Permalink | Comments (13) | Comment RSSRSS comment feed

Comments

2/19/2008 7:01:24 AM #

Henriik Stenbæk

Cool - I have started to cut up all my holiday photos in 820 x 179…. looking forward to add them to my blog Wink

Henriik Stenbæk

2/20/2008 11:21:57 AM #

ptumelty

Hi Henriik, you might find that the height needs to be a little shorter on your site.

I made some edit's to your original theme to make the header image a little taller so I could get more image on there. The initial dimensions were 820x120 and I upped this to 820x179.

ptumelty United Kingdom

2/25/2008 12:02:09 AM #

Henrik Stenbæk

Hi ptumelty

I know that Wink But I decided to go with your format (820x179) since the 120 height didn’t make any usable photos.

I ended up changing somewhere around 70% of your implementation: first I added caching, and then I changed so that the control didn’t run if it wasn’t visible, afterwards I added a description file for each photo and an auto hiding <div> for the description… go take a look. It’s pretty cool….

Henrik

Henrik Stenbæk

4/25/2008 9:19:30 PM #

Tiffany

Hi Paul,

This is a great feature and I've already implemented it on my site.  I am also using the BrightSide theme.

I noticed that you have a cool fade in caption when you mouse over your random header image on your home page.  I would like the same feature on my site.  Will you be releasing the code for this as well?

Thanks,
T

Tiffany

5/1/2008 1:45:13 PM #

ptumelty

Hi, I actually borrowed this code from somebody else Smile I'll look at packaging it up as soon as I get chance. Will send you an email as soon as I have it on the site.

ptumelty United Kingdom

8/29/2008 10:00:17 PM #

Help needed

I want to use use it as a widget but i haven't found the way. Is there any way to install it as a widget?

Thanks from Spain!!!

Help needed

12/11/2008 5:15:43 PM #

Todd

Hi Paul,

Thanks for your work on the random image control, it's just what I wanted to find for header photos. The only issue I'm having at the moment is in adjusting the size of the image and getting the theme to match. Can you point me to where the blue band on the background is set? I've been playing with it for a while now and have had no luck finding it.

Thanks.

Todd

1/9/2009 11:25:35 AM #

European Toxic Clan

Here's the difference, that script created thumbnails whereas this script just autogenerates the thumbnails using an aspx page. No permissions to worry about and no extra file creation. This is useful for adding a folder of images to a post and not clogging up your server with added thumbnail images.  Keep in mind that the user will be downloading the images completely in the background with the scripting doing the thumbnails (and retaining aspect ratio).  It's not recommended for large galleries but hopefully we'll have a full fledged gallery module for this blog software in the future anyway.

European Toxic Clan United States

1/16/2009 5:47:17 AM #

midosm

doesn't seem to work for me!  Using:

<blog:RandomImage ID="header-pic" ImageUrl="/images/header/" runat="server" />

midosm

3/19/2009 3:43:44 PM #

Awesome tool, nice work.

tim United Kingdom

5/2/2009 5:08:18 AM #

Jonathan

This control does almost exactly what I needed. But I am not using this theme. On my theme the image is rendered as the background image of a div. It was easy enough to change img to div and have your code modify the style tag instead of them src tag. But I don't know how to get it to write the child controls of the div that already exist in my masterpage into the rendered output. Can you help?

Jonathan

5/25/2009 6:12:01 PM #

Thanks for releasing this code to us all, its very generous of you. I was also wondering whether you'd be releasing that neat fade in caption for the mouseover.

Simon Oates United Kingdom

6/30/2009 11:11:00 AM #

SEM Business Blueprint

I like this, a very clever little tool.

SEM Business Blueprint United Kingdom