Learn More





DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

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]">
   <br />
   <span class="Normal Phototitle">[TITLE]</span>

(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") %>); }

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">
	<asp:PlaceHolder ID="phPhoto" Runat="server" EnableViewState="False" />

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">
      <div class="Gallery">
      <div class="PhotoHolder">
         <asp:PlaceHolder ID="phPhoto" Runat="server" EnableViewState="False" />
<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
That's it.

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!


Benoit Sarton
Hello Michael,

Thanks for this great post - I appreciate your publishing it for the National Day of My country (2 good things the same day). As for the lastest sentence of your 1st paragraph (about Scott's products future), there is another good news here :

I also like Simple Gallery and will give your solution a try as soon as I can.


Benoit Sarton Thursday, July 16, 2015 12:12 PM (link)

Comment Form

Only registered users may post comments.


2sic Daniel Mettler (125)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (22)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (270)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (163)
William Severance (5)
Try Evoq
For Free
Start Free Trial
a Demo
See Evoq Live
Need More Information?