Images in posts.

Topics: ASP.NET 2.0, Themes
Apr 11, 2009 at 11:52 PM
Edited Apr 11, 2009 at 11:54 PM
I am making a portfolio site and I want to upload images in my blog posts.

I want to 'crop' them into thumbnails automatically by using a div container and setting the uploaded image as a centered background. You can see the effect in a test page I made: http://jcoulterart.com/test/Type-Design-Poster.aspx.htm

Then the thumbnail would be clickable to full image.

So when I go to upload image and it enters it into my blog post I want it to be set as a background image with a class. Is this possible and how would I go about it? I am mainly a css guy, but I know minimal asp.net.

Thanks.
Coordinator
Apr 12, 2009 at 1:56 AM
You could still use the Image Upload feature.  In the Add_entry.aspx.cs file in the admin\Pages folder, there's a btnUploadImage_Click() event handler with the following line of code in it:

string img = string.Format("<img src=\"{0}image.axd?picture={1}\" alt=\"\" />", path, Server.UrlEncode(relativeFolder.Replace("\\", "/") + fileName));

Changing that line to the line below will (instead of using an IMG tag) put the uploaded image into a DIV, set as the background-image with a CSS class of "myClass".

string img = string.Format("<div class=\"myClass\" style=\"background-image:url({0}image.axd?picture={1});\">my div...</div>", path, Server.UrlEncode(relativeFolder.Replace("\\", "/") + fileName));

You could make further adjustments to that line above.  Or once the image has been uploaded, if you click the 'HTML' toolbar icon or click the 'Use raw HTML editor', you can further edit the HTML of the DIV.
Apr 12, 2009 at 2:41 AM
That worked quite well with help from a friend to implement.

I just have one more question, background images seem to get code injected into them, anyway to remove this?

<div class="postimage" style="background: url('/jcoulterart.com/blogengine.net/image.axd?picture=2009%2f4%2flogo_casino.jpg'); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial">
&nbsp;
</div>

I would like to center the background image, but it gets overwritten.

Here is my code from source:

        string img = string.Format
            (
            "<div class=\"postimage\" style=\"background: url({0}image.axd?picture={1}) no-repeat center;\">&nbsp;</div>",
            path,
            Server.UrlEncode(relativeFolder.Replace("\\", "/") + fileName)
            );
        txtContent.Text += img;
Coordinator
Apr 12, 2009 at 3:48 AM
I see you're using BE 1.4.5.  The tinyMCE WYSIWYG editor in that version is pretty old.  The latest version of BE is using a much newer version of the tinyMCE editor that doesn't insert all those -moz tags or do any overwriting.  BE 1.5 Release Candidate 1 can be downloaded here, and probably within a couple of weeks, the final version of 1.5 will be released.

Having said that, it looks like those -moz tags won't get inserted in BE 1.4.5 if you set the "background-image", "background-position", "background-repeat" styles separately without using the shortcut "background" CSS style.  The line below demonstrates this.

string img = string.Format
    (
    "<div class=\"postimage\" style=\"background-image: url({0}image.axd?picture={1});background-position:center center;background-repeat:no-repeat;\">&nbsp;</div>",
    path,
    Server.UrlEncode(relativeFolder.Replace("\\", "/") + fileName)
    );  

Another option is to set the background-position, background-repeat in the CSS file (style.css) -- rather than doing it inline like above.