Making Ventrian's Simple Gallery Responsive

Recently I started developing a web site that is in need of an image gallery and has to be responsive. As it has to be as cheap as possible, there are not too much choices. I used Chris Hammond's Hammerflex skin, and decided to go on with a very popular product for the gallery: Ventrian Simple Gallery, a long-on-the-market product by Scott McCulloch. This is not responsive, and the last release (version 2.4.39) is from October 2012, but with some smaller "hacks" it is quite easy to do. Hopefully Scott will further develop his product(s).

First thing I found out was that I had to change the lightbox because the integrated lightbox is not responsive. Scott stated in his Tips & Tricks support forum: Changing the Simple Gallery Lightbox [Advanced] how to do it. Scott uses FancyBox to achieve his goal, and I was feeling comfortable with this idea as I already had some knowledge about it. It is a great product.

Next step was a bit more difficult, but thanks to David O'Leary from Efficion Consulting, who wrote a blog about Making Ventrian's Simple Gallery Responsive on his site about this - it looked easy.

So it seemed that only putting the pieces together should do the work. Failed. The images did not open in a light box.

I found out that there are some conflicts between FancyBox and Bootstrap (which is used by the skin to achieve a responsive layout). Everything I found on Stack Exchange, GitHub and other sources: complicated, confusing, not working. And even worse: The Bootstrap guys say "We don't support third party products", and most of the people found the error in the Bootstrap code. Every ticket at the Bootstrap support about it was closed immediately when Fancybox or anything else was mentioned.

Therefore I used another little piece of software that I found on GitHub, it is called Lightbox for Bootstrap 3, and at the end of the day I was amazed how easy everything worked when it was tied together.

Step 1: Inject JS AND CSS

First step was to download the lightbox scripts from GitHub. I unzipped the file, and copied two files to a folder in my DNN installation (say, it was /js/MyExtraScripts/Ekko/): ekko-lightbox.min.css and ekko-lightbox.min.js. That's all, we do not need more.

Then we have to reference these files on the page with the Simple Gallery module installed, of course there are different ways to do this. A popular method is to inject them it the module's header or footer, I prefer Will Strohl's Content Injection Module for DotNetNuke. So, here is the injection we need:

   <link rel="stylesheet" href="/portals/0/js/MyExtraScripts/Ekko/ekko-lightbox.min.css" type="text/css" media="screen" />
   <script type="text/javascript" src="/portals/0/js/MyExtraScripts/Ekko/ekko-lightbox.min.js"></script>

Step 2: Modify Template

This is quite the same as Scott has done for the Fancybox version, here is the version for Bootstrap. Change the "Individual Photo Template" to

<div class="PhotoWrapper">
   <a href="[PHOTOPATH]" data-parent="div.Gallery" data-toggle="lightbox" rel="Album[ALBUMID]" data-gallery="Album[ALBUMID]" title="[TITLE]">
      <img src="[THUMBNAILLINK]">
   </a>
   <br />
   [EDIT]
   <span class="Normal Phototitle">[TITLE]</span>
</div>

(Note: you need Ventrian Gallery 2.4.39+, as the token [PHOTOPATH] was introduced with this version!)

Step 3: "Hack"

As David O'Leary writes in his blog, we have to avoid the table layout the gallery is rendered in and replace it by a float DIV. To do this, we have to modify this file: /DesktopModules/SimpleGallery/Controls/ViewPhotos.ascx.

First thing to do is removing some styling that is no longer needed, it starts in line 50:

<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>

Just delete these lines, or add comment markers around it.

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>

To change the RepeatLayout to Flow and remove all the table oriented styling, change the code to the following:

<asp:datalist id="dlGallery" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal" CssClass="View" EnableViewState="False">
   <HeaderTemplate>
      <div class="Gallery">
   </HeaderTemplate>
   <ItemTemplate>
      <div class="PhotoHolder">
         <asp:PlaceHolder ID="phPhoto" Runat="server" EnableViewState="False" />
      </div>
   </ItemTemplate>
   <FooterTemplate>
      </div>
   </FooterTemplate>
</asp:datalist>
<br style="clear:both;"/>

Finally, we need to add some style classes, you can do this by adding them to the module.css file of the Simple Gallery module (found in /DesktopModules/SimpleGallery/) or your portal.css file.

.Gallery { width:100%; }
.Gallery br:nth-of-type(1) { line-height:0; }
.Gallery br { line-height:250px; }
.PhotoWrapper { float:left;max-width:275px;line-height:15px; }
.PhotoHolder { float:left;margin: 0 15px 15px 0; }
.PhotoTitle { line-height:15px; }

Most of that should be quite clear, but there are some things to pay attention:

• .Gallery br:nth-of-type(1) { line-height:0; }
  By any reason, there is a <br /> tag injected before the first image in the gallery; this sets the line height for this first line break to zero.
• .Gallery br { line-height:250px; }
  This is depending on the thumbnail size chosen in the Simple Gallery Module Settings. I will come back to this later.

Step 4: Module Settings

To make the layout nice, to avoid portrait/landscape issues and to make it not too complicated I choose the following settings in Module Settings :: Gallery Settings:

• Basic Settings:
  Photos per row: 4
  Photos per page: 12
• Compression Settings - For photo thumbnails:
  Thumbnail Type: Square (cropped)
  Thumbnail size: 200
  (Note: this is in relation to the .Gallery br { line-height:250px; } style class above)
• Slide Show Settings:
  Slideshow mode: Standard

Of course, you can make it different, and I would be interested in your solutions that I expect to read in the comments. And sure: There is work to do for displaying the albums, but it is not too different. I hope I could bring you in the right direction.

Please keep in mind: If you upgrade Simple Gallery somewhen in the future, your changes in the files (PhotoView.ascx, Module.css) will be overwritten. If the new version supports responsive design - great! Otherwise you have to do it again...

Happy DNNing!
Michael