EDIT 6/05/2007: Changed links to CS 3.0 version. Subscribe to here for updates: http://eduncan911.com/archive/tags/The+MiXX+Collection/default.aspx
Some of you might have noticed my new homepage over the last month. Those of you using an RSS reader to read this, go check out my homepage for the new PostIcon module I'm talking about.
What is it?
The purpose of this Server Control and CSModule is to automatically
create a small lightweight PostIcon with little to no work on your part.
Just embed a normal image, bam, you have a PostIcon automatically.
This module creates the PostIcon for a Weblog Post during its creation
and/or update physically on disk. It will connect to your image source,
load into memory, crop, resize, compress, and save the tiny ~2 KB file
to disk. It then adds the full pathname to an ExtendedAttribute for that
post called "PostIcon", allowing for the skin to render where required.
This storage-to-disk method greatly speeds up the homepage rendering as
we do not access the photo gallery.
To use, simply create a blog post with at least one <img> embedded.
That's it. The default logic above will take the first <img> in your
post and process it to disk.
Optionally, you can specify a particular image to use as your PostIcon.
Say if you had multple embedded <img>s, or if you don't have an image at
all but wanted a PostIcon for the post.
You can use the BBCode format of:
[PostIcon Anchor = "Center"]http://domain.com/image.gif[/PostIcon]
This will allow you to specify an Anchor position, if you want to crop
in a certain region. The Anchor attribute is optional. See the
module's config file for more information on Anchor.
How does it work?
There are two parts to make this work. The backend uses the PostIconModule to download into memory, crop, resize, compress, and save the selected image to disk.
And the frontend UI uses the PostIcon server control to rendered the saved image, with smart logic.
What is the logic to determine what gets downloaded, cropped, and saved or even displayed if none is set?
There are two methods of logic. The first is which image, if any at all, is processed on the initial PostCreation process. And the other logic is in the PostIcon server control that renders, if there is no image saved from the module.
The PostIconModule determines what url gets written to the post, if any. It does this by following the order below:
- Does the [PostIcon] BBCode exist? If so, parse the image specified.
- Is there an <img> declaration somewhere in the post? If so, parse the first <img> and use it as the PostIcon.
If the PostIconModule fails to parse the image, no url is written. In which case, the PostIcon server control determines what gets displayed with the logic below:
- Is there a DefaultImageUrl specified? If so, link directly to it.
- Is the UseAnonymousAvatar set to true? If so, link directly to it.
Why are you saving to disk and writing a direct url? Isn't the Photo Gallery built for that?
Yes, it is but I wanted speed on my homepage. And loading the Weblog posts + 20 to 50 images on the homepage is a bit more processing then I care for.
So with the PostIconModule I load the image into a MemoryStream, crop the image based on the Anchor set, resize the image to what is specified in the config, compress it as a JPG (tests showed 60% quality compared to Gif 89a and PNG is smaller then all), and finally save it to disk.
The PostIcon server control loads only the direct Url that is stored for the post, therefore generating a very quick homepage load time.
Where's the source code?
With the rest of the files below.
Where do I get this wonderful tool?
Here ya go:
(source code-must compile)
If by popular demand, I might add in rendering of the User's Avatar if multiple people are posting to a single blog. But since this is rare, I skipped it for now.
Also if by popular demand, I may add in some type of Email detection (i.e. MetaBlog API posts) and display a custom image (if the image logic fails to save one). For example, I might want to display a common PostIcon for all posts made by Blogmailr. Such as this one: