Ventrian has been making great DNN modules for many years now. Some of the modules though are beginning to show their age a bit and are using markup heavy techniques that were at one time common but can now be replaced with much cleaner CSS for most browsers. In particular, the Ventrian Gallery module wraps each photo in a table that has a cell for every corner and every side so that fancy borders can be added around the photos. This technique results in lots of extra markup and causes issues if you're wanting the gallery to be responsive (adjust to the users viewable area). It is actually fairly easy to make a few changes to cleanup the rendered HTML to allow for more modern and lightweight techniques for styling. We'll go through the steps...
Before our changes, every photo is wrapped in the following code:
<td align="center" valign="top"> <table class="photo-frame"><tr><td class="topx--"></td><td class="top-x-"></td><td class="top--x"></td></tr><tr><td class="midx--"></td><td valign="top"><a href="/Portals/0/Gallery/Album/1/LLCC_MegaMenu.png" rel="lightbox722" title="LLCC - Mega Menu" tags="" pid="67"><img src="/DesktopModules/SimpleGallery/ImageHandler.ashx?width=250&height=172&HomeDirectory=%2FPortals%2F0%2FGallery%2FAlbum%2F1&fileName=LLCC_MegaMenu.png&portalid=0&i=67&q=1" class="photo_198" width="250" height="172" alt="A custom designed "Mega Menu" for Lincoln Land Community College."></a></td><td class="mid--x"></td></tr><tr><td class="botx--"></td><td class="bot-x-"></td><td class="bot--x"></td></tr></table><span class="Normal">LLCC - Mega Menu</span> </td>
That's a lot of markup.
So, the first thing we do is get rid of the border code. Ventrian provides a built in method for doing this through their templates. In the module menu, select Edit Templates. In the Template drop down list, select "Individual Photo Template". In the Template Body, replace [PHOTOWITHBORDER] with [PHOTOWITHOUTBORDER]. That will remove the extra border markup. You can then add a border using CSS.
Next to make the album more responsive, we want to have the photos rendered within a float DIV rather than in table cells. To do this, we have to modify this file: /DesktopModules/SimpleGallery/Controls/ViewPhotos.ascx. The primary change we need to make is to have the DataList render in flow mode rather than table mode. There are a few other things we'll do to cleanup the rendered markup.
In the file, around line 50, their is some styling that is no longer needed:
<style type="text/css">
.photo-frame .topx-- { background-image: url(<%= ResolveUrl("../images/borders/" & BorderStyle & "/frame-topx--.gif") %>); }
.photo-frame .top-x- { background-image: url(<%= ResolveUrl("../images/borders/" & BorderStyle & "/frame-top-x-.gif") %>); }
.photo-frame .top--x { background-image: url(<%= ResolveUrl("../images/borders/" & BorderStyle & "/frame-top--x.gif") %>); }
.photo-frame .midx-- { background-image: url(<%= ResolveUrl("../images/borders/" & BorderStyle & "/frame-midx--.gif") %>); }
.photo-frame .mid--x { background-image: url(<%= ResolveUrl("../images/borders/" & BorderStyle & "/frame-mid--x.gif") %>); }
.photo-frame .botx-- { background-image: url(<%= ResolveUrl("../images/borders/" & BorderStyle & "/frame-botx--.gif") %>); }
.photo-frame .bot-x- { background-image: url(<%= ResolveUrl("../images/borders/" & BorderStyle & "/frame-bot-x-.gif") %>); }
.photo-frame .bot--x { background-image: url(<%= ResolveUrl("../images/borders/" & BorderStyle & "/frame-bot--x.gif") %>); }
</style>
You can delete that as it no longer is used now that we've removed the old border.
Next, find the DataList where the photos are rendered. Before our changes it will look like this:
<asp:datalist id="dlGallery" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" HorizontalAlign="Center" ItemStyle-VerticalAlign="Top" ItemStyle-HorizontalAlign="Center" CellPadding="2" CellSpacing="4" CssClass="View" EnableViewState="False">
<ItemTemplate>
<asp:PlaceHolder ID="phPhoto" Runat="server" EnableViewState="False" />
</ItemTemplate>
</asp:datalist>
We need to change the RepeatLayout to Flow and remove all the TABLE oriented styling. So it should now look like this:
<asp:datalist id="dlGallery" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal" CssClass="View" EnableViewState="False">
<ItemTemplate>
<div class="vPhotoHolder">
<asp:PlaceHolder ID="phPhoto" Runat="server" EnableViewState="False" />
</div>
</ItemTemplate>
</asp:datalist>
<br style="clear:both;"/>
If you look at the gallery now, you'll see all the photos are in a single vertical column. So now the final thing we need to do is modify the CSS to make the photos float:left. You can add this in the module.css for the gallery, or your portal.css or skin.css.
.vPhotoHolder {
float:left;
margin: 0 15px 15px 0;
}
And now, you can use CSS to style it exactly as you like using modern CSS techniques or even Javascript in order to do fancier techniques.
One thing to keep in mind is if you upgrade Ventrian Gallery in the future, your changes to the ViewPhoto.ascx and Module.Css files will be overwritten. Scott is working on a solution to this issue that he should be releasing soon so they may not be an issue.
Happy Coding!