BlogEngine with simple gallery

Are you a user of BlogEngine.NET? If you don’t know that engine yet, it’s quite cool engine written in ASP.NET for obvious purpose, blogs.
I love this engine, because it is very well written, so it’s a piece of cake to extend it for your own needs. There are lots of themes, extensions and projects based on this engine.
I’m using this engine for various sites, and recently I had to implement a gallery. What I did, was very simple solution, I created one folder called gallery, where various galleries are stored - every gallery is it’s own folder. And in every gallery, there is a subfolder called thumbs, where thumbnails of pictures are stored. But you don’t need to bother with that, since I also did admin part for uploading images. But let’s take a look step by step how to implement this gallery into your blog:

Download zip file from my skydrive,
Unzip files to blogengine folder (before doing that, backup file Web.sitemap); there should be only one file replacement.
Find folder gallery in BlogEngine root folder and set permissions for user ASP.NET to Modify. (If you don’t have access to server to set that, than you won’t be able to use admin panel for uploading images and editing galleries)
You shoud edit your theme to have link to gallery.aspx. I didn’t implement any menu on that file, since I did that directly in theme’s site.master page. Scroll down for code, that I used for that.
That’s it. Try uploading images in your admin panel.

As I said, it’s very easy solution, so for customizing it, you will need to dig into some code. So for all of you, let me explain a little bit of code and what have I done.
First of all, this code is in code-behind for site.master in my theme:

protected string GetGalleryMenu()
{
    string result = "";
    foreach (string item in Directory.GetDirectories(MapPath("/gallery/")))
    {
        DirectoryInfo di = new DirectoryInfo(item);
        if (this.Request.Url.Query.ToLower().Contains(
                       Uri.EscapeUriString(di.Name.ToLower())))
            result += "<option value=\"/gallery.aspx?gal=" + 
            di.Name + "\" selected>" + di.Name + "</option>\n";
        else
            result += "<option value=\"/gallery.aspx?gal=" + 
            di.Name + "\">" + di.Name + "</option>\n";
     }
    return result;
}

It’s just looping through gallery folder and creating dropdown menu for all the galleries. In aspx page, you call that function simply by inserting one line of code,where you would like to have this menu:

<select OnChange="location.href=this.options[this.selectedIndex].value" 
                     style="width:220px;" name="menu">
<option value="#">[gallery]</option>
<option value="#">--------------------------------</option>
<%= GetGalleryMenu() %>
</select>

Another piece of code is gallery.aspx, where I list all the images, that are inside selected folder:

protected string GenerateGallery(string path)
{
    string fullPath = "/gallery/" + path;
    string result = "";
    foreach (string item in System.IO.Directory.GetFiles(MapPath(fullPath),"*.jpg"))
    {
        FileInfo fi = new FileInfo(item);

        result += "<a href=\"" + fullPath + "/" + fi.Name + 
                  "\"  rel=\"lightbox[becooldontwaste]\"><img src=\"" + 
                  fullPath + "/thumbs/" + fi.Name + "\" alt=\"Slika\"></a>\n";
    }
    return result;
}

And that’s it, what is needed to view galleries. Simple, right?

Now let’s take a look at admin part. This one is a little bit trickier, but as I said, BlogEngine is very well written, so what I need to do is just added one line in Web.sitemap and before that created file in admin/Pages called Gallery.aspx.

<siteMapNode url="~/admin/Pages/Gallery.aspx" title="Gallery"  
           description=""  roles="administrators, editors"/>

It’s pretty straight forward, in roles you define who can access this part of admin module and in url you define path to admin page for gallery “module”.
Last thing is to see how did I manage to upload files to server and store them on system. The idea was, that before storing to server, I need to resize it and create two different copies – thumbnail and big picture. Before resizing, there is also a check, if the uploaded file is image or not. Obviously, I don’t want users to upload anything else than image.
The most important function is

protected void btnAddNewImg_Click(object sender, EventArgs e)

where we do all the “magic” of resizing and storing images on server. Change image sizes here in this function.
And if you want different “type” of resizing, you should edit this part of function:

private static Image resizeImage(System.Drawing.Image imgToResize, Size size)
{
    //....
    //if (nPercentH < nPercentW)
    //    nPercent = nPercentH;
    //else
    //    nPercent = nPercentW;

    if (sourceWidth < sourceHeight)
        nPercent = nPercentH;
    else
        nPercent = nPercentW;

    if (size.Width == 0)
        nPercent = nPercentH;

    int destWidth = (int)(sourceWidth * nPercent);
    int destHeight = (int)(sourceHeight * nPercent);
    //.....
}

That’s it, if you have any comments, leave them here! Happy coding!

Oh, and take a look of this gallery in action on this site.

author: Aleš Rosina | Comments: 57 | Tags: blogengine, visual-studio, c-sharp, projects

24
December
2009

MGD King on 28. December 2009 at 14:44

I love this idea because this is exactly what I was looking for in BlogEngine.NET, however, when testing it on a local machine, nothing is in English and I can't tell what I'm doing in the admin panel. Can you translate it to English?

Aleš Rosina on 29. December 2009 at 18:48

Damn, I was doing localized version of gallery :) I have updated zip file (download it again) so that it is translated into english. I hope that will help!

osha 10 hour course on 30. December 2009 at 22:41

Is this referring to the flash gallery called simple gallery?

Aleš Rosina on 31. December 2009 at 18:50

Nope, this is not referring to simple gallery. This implementation is without flash, pure html/asp.net.

Bamboo Plants for Sale on 20. January 2010 at 18:01

I have seen one just like this in flash also if people are interested but I think the asp is better and faster

sikat ang pinoy on 8. February 2010 at 02:38

for the latest blogengine 1.6 powered by asp.net now better for SEO. It increase website traffic and revenue SEO just got easy on asp.net.

mma on 15. February 2010 at 05:29

Hello my friend - thi is nice blog, just looking around for blogs, seems a pretty nice platform you are using. I'm currently using Wordpress for a few of my sites but looking to change one of them over to a platform like blogengine to experience how it helps.

Aleš Rosina on 15. February 2010 at 13:03

Yeah, actually this blog is on GraffitiCMS engine, but I did a lot of sites based on BlogEngine. It depends what you need, since all of the blog platforms are very similar, the difference is mostly in some candies.

web design on 23. February 2010 at 09:43

Impressive post. thanks for sharing that guys. it really help me

Watch Pacquiao Vs Clottey Live on 26. February 2010 at 03:27

your blog is very imformative and i learn a lot from it.

Thanks for sharing.

regards,

rosela

Olexii on 27. February 2010 at 16:30

Aleš, can You upload the file again(with Simple Gallery)?

Because in your skydrive account it doesn't exist.

Thanks.

Aleš Rosina on 28. February 2010 at 11:02

Ups, I guess skydrive did some cleaning or sth. Anyway, it's back online. Sorry for that!

Olexii on 28. February 2010 at 15:21

Thanks Aleš!

web design on 5. March 2010 at 04:34

Thanks a lot for sharing the information about this features and for helping me on how to use this features.

Manou on 5. March 2010 at 16:57

Hi,

I have some problems to delete file in my gallery. I've all right in my folder but I can't delete files... My error is : Access to the path C:\projects.... is denied !!?? I don't see where is my problem.

Anyone would have an idea please ??

Thanks

Aleš Rosina on 5. March 2010 at 19:57

Yeah, that's common problem - you have accessed this folder via windows explorer after you have created gallery with blogengine. Exploerer created some temp files and is keeping files "opened" until the restart of computer. Work around is to delete this folder with explorer and create gallery again. After that, don't use exploerer to browse this folder :)

Webthesurfi Rugs Webdesign on 10. March 2010 at 01:19

blog hopping...nice blog

Watch Pacquiao Vs Clottey Live online on 10. March 2010 at 01:22

nice blog i learn a lot from it.

Thanks for sharing.

regards,

rosela

Webthesurfi Rugs Webdesign on 10. March 2010 at 14:20

Do you have a VB script version of this code?

Aleš Rosina on 10. March 2010 at 14:40

I'm sorry, I dont have VB version of code.

And thanks everybody for nice comments!

Mayweather on 16. March 2010 at 13:27

that's common problem - you have accessed this folder via windows explorer after you have created gallery with blogengine. Exploerer created some temp files and is keeping files "opened" until the restart of computer. Work around is to delete this folder with explorer and create gallery again.

Scott Nettleton on 9. April 2010 at 15:27

Hi, when trying to use the gallery admin tool I am getting the error "failed to map the path "/gallery". This is in RefreshDropDownGallieres; Directory.GetDirectories(Server.MapPath("/gallery")( line 120) .

Any idea why this may be?

thanks in advance

Scott

Aleš Rosina on 10. April 2010 at 07:31

Probably you forgot to create gallery folder (or there are not efficient priviliges for a aspnet user)

scott Nettleton on 10. April 2010 at 14:30

I have tried to rename the folder "gallery" to " something" and then have checked that I get back the exception folder not found. So it does find the folder. I tired running this on my host and it works fine and on another PC with IIS7 and it also works fine. I am using VS 2008 express on XP home , so don't have a IIS server on my machine, so am using the development server. And that is when I have the error. So for now it works fine just not on VS Express , can you think of any reason why this may be?

website seo on 13. April 2010 at 11:41

Hi,

Thanks for sharing such a valuable information. It helped me alot.Nice Blog, please do keep posting new things.

Scott on 13. April 2010 at 18:51

Hi, I got around the admin problem, but now when the image is clicked it just opens as normal. I have included the lightbox scripts into my site.master. Is this the only other place to do this ?

thanks

sonnerie portable gratuite on 22. April 2010 at 02:55

I found this is an informative and interesting post so i think so it is very useful and knowledgeable. I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing ability has inspired me. Really the article is spreading its wings rapidly...

Organic Clothing on 29. April 2010 at 06:35

I also love this engine as it provide unique and different styles to decorate and design your blogs.

registry cleaner reviews on 2. May 2010 at 08:18

I am interested in this post. Great post!!

Nursing Board Exam Reults July 2010 on 3. May 2010 at 17:38

thanks for this information. This will help in my next project.

Nursing Philippines on 3. May 2010 at 17:41

NLE July 2010 on 3. May 2010 at 17:45

NLE July 2010 on 3. May 2010 at 17:46

sharm el sheikh holidayer on 4. May 2010 at 17:36

fanytastic post

sharm el sheikh holidayer on 4. May 2010 at 17:37

love this post

amberen on 5. May 2010 at 01:33

I have been searching all day to find out how to do this! Thank you so much!

weeds season 6 on 5. May 2010 at 23:01

Hi,

Thanks for sharing such a valuable information. It helped me alot.Nice Blog, please do keep posting new things.

angular cheilitis treatment on 7. May 2010 at 12:07

My angular cheilitis website doesnt use it, but maybe I should look into perhaps applying this to it

eren caner on 12. May 2010 at 18:36

I can see gallery tab on admin panel and i uploaded photo successfully but when i enter the Gallery menu, it told me:

There is no image. In your language:

V tej galeriji ni nobenih slik.

Why? How can i see my photos on Gallery menu?

registry cleaner on 22. May 2010 at 20:34

I have been searching all day to find out how to do this! Thank you so much!

man utd shirt on 25. May 2010 at 12:50

Great post.It really contains valuable information.Thanks for sharing.

Jeux on 28. May 2010 at 21:20

Arsenal Football Shirts on 2. June 2010 at 16:16

I love blog engine, so easy to use. Thanks for the great advice on customisation.

Web design Philippines on 15. June 2010 at 04:49

I am not a user of blog engine and I am not a fan of Microsoft in terms of script. I am using wordpress in most of my blog sites. I will try this script maybe next time

Burr Grinder on 20. June 2010 at 19:45

Thanks for the useful advice on customization of BlogEngine

sudoku puzzles to print on 21. June 2010 at 00:59

Ive never used blogengine but I know it is very popular it seems

PHP Clone Scripts on 24. June 2010 at 11:17

Thanks for putting the code of customizing the Blogengine. I was searching it from an hour. thanks

yasir on 29. June 2010 at 00:11

thanks for sharing.

arsenal shirt on 7. July 2010 at 08:04

Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.

Logo Software on 13. July 2010 at 06:51

Hope to read more updates on your site soon

Attract website traffic on 13. July 2010 at 09:04

I learned by this article how to implement gallery into the blog.thanks for given good information about engine with gallery.

used stationary bikes on 14. July 2010 at 12:19

Thanks for sharing the script code how to customize BlogEngine blog. It's really awesome and helpful

pennsylvania tourism on 16. July 2010 at 09:39

Love the script, thanks for sharing it with all of us.

pennsylvania tourism on 16. July 2010 at 09:39

Love the script, thanks for sharing it with all of us.

man utd shirt on 20. July 2010 at 10:40

Thank you for sharing all this great information

cheap windshield porter ranch on 26. July 2010 at 14:50

Admiring the time and effort you put into your blog and detailed information you offer! I will bookmark your blog and have my children check up here often. http://actionglassla.com

information on 29. July 2010 at 11:49

Good stuff, thanks for the post! Maybe you should do a follow up post about this?

I noticed your weblbog through a AOL search, How did you get your website to show up in a Internet search?

Leave a Comment
Name:
Email:
I respect your privacy, so your email is never published.
Web site:

Ales Rosina's blog

BlogEngine with simple gallery

Leave a Comment