On one of the projects I am working on we need to have an image with a caption on pretty much every page. Very common scenario. Now I can be sure all these types of regions in my site are consistent with css driving their layout.
So here is my ImageBoxOutComponent:
public class ImageBoxOutComponent : ViewComponent
{
private string src = string.Empty;
private string alt = string.Empty;
private string css = "image-box-out";
private string captionCss = "caption";
public override void Initialize()
{
src = (String)ComponentParams["src"];
alt = (String) ComponentParams["alt"];
base.Initialize();
}
public override void Render()
{
StringBuilder output = new StringBuilder();
output.AppendFormat("<div class=\"{0}\">", css)
.AppendFormat("<img src=\"{0}\" alt=\"{1}\" />", src, alt)
.AppendFormat("<p class=\"{0}\">", captionCss);
RenderText(output.ToString());
if(Context.HasSection("caption"))
{
Context.RenderSection("caption");
}
RenderText("</p></div>");
}
public override bool SupportsSection(string name)
{
return name == "caption";
}
}
The accompanying CSS is simply:
/*.image-box-out*/
.image-box-out
{
max-width:260px;
background:#333;
overflow:hidden;
}
The 'overflow' simply hides the portion of the image that might exceed the wrapper div.
Now to use it in a View I simply do this:
<?brail component CaptureFor, {"id":"imageboxout"}:?>
<?brail component ImageBoxOut, {"src":"${siteRoot}/Content/images/300x300.png","alt":"alttexthere!"}:
section caption:?>
FANCY CAPTION
<?brail end ?>
<?brail end ?>
<?brail end ?>