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: 37 | 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?

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

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

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

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

Spanisch Deutsch on 3. November 2010 at 10:50

In my opinion, Wordpress won the blog platform war a long time ago. A nice proof of this is Vox closing down. The only problem I have is that Wordpress had a lot of bugs and you never know when you upgrade to the new version, if the new version will be finally stable and secure. Best regards.

online theory test on 8. November 2010 at 13:26

I don't think the war is over, wordpress is excellent for what it is, but it is dog slow without having to implement a lot of caching. Blogengine.net should have a tremendous performance advantage as the code is compiled.

traduzioni giurate milano on 22. November 2010 at 22:42

It seems that Microsoft did not get far with porting their OS for internet, ASP, to the masses. Seems that the PHP, MYSQL had a much better success. And the wordpress platform e.g. probably benefited from this circumstance.

sexy select blog on 24. June 2011 at 05:10

I love it, I am trying to implement this now! Thanks!

payday loans on 1. September 2011 at 03:51

Quite great article here, hope that you would not get tired on posting such great information such as this one.

real resume help on 20. October 2011 at 14:49

Nice post, keep up with this interesting work. It really is good to know that this topic is being covered also on this web site so thanks for taking time to discuss this !

магазин ювелирных изделий on 10. December 2011 at 07:18

I very much to like and agree with your point of view. Thank you for sharing. At the same time,i love best pram very much .Welcome to look at my website and blog articles.Hope we can become good friends, and exchange and to help each other! Thanks!!!

ipad 2 case on 26. February 2012 at 15:02

Good that you shared this,, it is my first time to use.

Utah Internet Marketing on 7. March 2012 at 03:42

I'm genuinely self-confident they are going to comprehend plenty of new things right here than anyone else!I appreciate examining because of your blog site, I wanted to depart a really small comment to help you and want you an excellent continuation. Wishing you the best of luck for all of your blogging efforts.

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