Sample for Displaying Images from the Database using Dynamic Data
I'm posting a sample project that shows some custom field template controls for Dynamic Data that allow images to be viewed/edited from a database. The sample also shows how you can view images that have their filenames in the database but the images on the physical disk. You can download the sample by clicking this download link: DOWNLOAD SAMPLE
Here are the basics sets that are required if you want to add this functionality into you own Dynamic Data project:
1) Reference the DbImageAPI library in the sample to your Dynamic Data website.
2) Copy DbImage.ascx., DbImage.ascx.cs, DbImage_Edit.ascx, DbImage_Edit.ascx.cs, FileImage.ascx, FileImage.ascx.cs from the samples App_Shared/DynamicDataFields directory to the App_Shared/DynamicDataFields directory on your website.
3) Copy the Blank.gif from the samples App_Shared/Images to the App_Shared/Images directory in your website.
4) In the Web.Config file add "
<add verb="*" path="ImageHandler.ashx" type="DbImageAPI.ImageHandler"/>
" to the <httpHandlers> section.
Once these are done you just need to apply renderhints to the data model. For example if the table in the database is Categories you would create a partial class called Category and add the following metadata to the partial class:
[ImageFormat("Picture", 100, 100)]
[RenderHint("Picture", "DbImage")]
public partial class Category {
}
The RenderHint tells it to use the DbImage field template control to render the Picture column. There is also an additional attribute added which allows the width and height the image to be set as well. The ImageFormat attribute causes the control the dynamically scale the image keeping the proper aspect ratio.
If you have a database column that has filenames of images that exist in a directory in the website you can use the FileImage control. Here is an example:
[RenderHint("Filename", "FileImage")]
[ImageUrl("Filename", "~/images/{0}")]
[ImageFormat("Filename", 100, 100)]
public partial class FilePicture {
}
In this case the table in the database is FilePictures and a partial class of FilePIcture has been created to apply the attributes. The RenderHint tells it to render the Filename column using the FileImage field template control. The ImageUrl attribute is used to specify where on the website the images are located, in this cas the images are in the images directory underneath the root. And once again the ImageFormat attribute is used to specify a width/height. In the case of file based images this attribute just changes the width and height tags on the image.
I will go into much more detail about how these controls were created in a future blog post.
