Sueetie Going Mobile Series: Gallery Server Pro

This is the third Sueetie Going Mobile Series post and the second on a Sueetie Application. We covered BlogEngine.NET last time. Here we’ll look at how I modified Gallery Server Pro to serve up web content to mobile devices. The Sueetie Wiki document from which this post was taken is located in the Sueetie Patterns and Origins area.

________________

Gallery Server Pro Mobile – When Less is More

There were two primary issues to address in creating a mobile version of Gallery Server Pro. The first issue was the client-side design focus of Gallery Server Pro. Many of the functions in displaying and navigating Gallery Server Pro media objects are performed client side for greater efficiency. The second issue affecting mobile GSP design is the use of hard-coded properties appearing in the GSP-generated HTML, properties like image dimensions based on the gallery configuration settings. A mobile version required getting around those issues for a less-is-more media gallery experience.

Media Default.aspx Located in Theme

As we discussed on the Sueetie Framework Mobile Architecture document, a new SueetieRewrite Module was created for Sueetie Mobile to enable separate pages to be used with mobile and normal display when necessary. Because of GSP’s drop-in design as a Web Control, breaking out the /media/default.aspx page by theme wasn’t truly necessary, but done for uniformity.

<url name="media_home"  path="/media/default.aspx" 
rewrittenurl="/media/gs/styles/{0}/default.aspx" />

/media/default.aspx serves as a placemarker, with each theme having it’s own default.aspx in /media/gs/styles/THEME/.

Image

Mobile Web Design is Much Ado With Width

When designing for the mobile environment we have to be constantly aware of how our page width. Typical dimensions of a mobile device are 240 x 320 pixels. To accommodate this width restriction In Gallery Server Pro we performed three steps shown in the screenshots below. We removed the album header (1). We also needed to bypass some of the hard-coding of element dimensions based on gallery configuration, like the display size of media objects in optimized view (2). Finally we needed to get rid of some of the media functionality in the media object toolbar that we didn’t want or need in a mobile environment (3).

Image

Image

To have more control over those elements we added two new controls based on the existing albumheader.ascx and mediaobjectview.ascx controls: mobileheader.ascx and mobileobjectview.ascx.

Image

The controls were loaded based on the current Sueetie IsMobile context state, as shown here on the Gallery Server Pro MediaObject page.

protected void Page_Load(object sender, EventArgs e)
{
  ShowMessage();
  if (!SueetieContext.Current.IsMobile) 
  {
    _mediaObjectView = (mediaobjectview)LoadControl("../controls/mediaobjectview.ascx");
    phViewLoader.Controls.Add(_mediaObjectView);
  }
  else
  {
    _mobileObjectView = (mobileobjectview)LoadControl("../controls/mobileobjectview.ascx");
    phViewLoader.Controls.Add(_mobileObjectView);
  }
}

In the case of (2) and (3), that is, controlling the header width and removing media functionality not required in the mobile environment, it was a simple matter of adding a display:none attribute in the .ASCX or commenting out .cs code which loaded certain toolbar items. Overwriting the display size of media objects was more interesting in that we added a new HtmlOutput string to the sueetie.config file.

Gallery Server Pro Display Flexibility with HtmlOutput

Gallery Server Pro dynamically wraps HTML around media objects based on media type. These definitions are listed in the /media/gs/config/gs.config file. (According to GSP author Roger Martin in a recent post, future GSP releases will store this information in a database.) We’ve overwritten that string in Sueetie before when we added Original Image Display functionality to display the original image in a new window, a function not in GSP out of the box.

To customize the display of Gallery Server Pro media objects for mobile display we retrieve a custom mobile version of HtmlOutput from the sueetie.config file called MobileHtmlOutput. The HtmlOutput string shown below is the one we use for our custom Original Image function. The MobileHtmlOutput string is our new HtmlOutput wrapper for mobile objects.

Image

We then modified our HtmlOutput retrieval logic slightly to check for being in a mobile state.

string htmlOutput = GetHtmlOutputFromConfig();

// Sueetie Modified - Get htmlOutput string from Sueetie.Config if enabled or to MobileHtmlOutput if IsMobile

if (SueetieConfiguration.Get().Media.LinkToOriginalImage && 
this.MimeType.MajorType.ToUpperInvariant() == "IMAGE") htmlOutput = SueetieConfiguration.Get().Media.HtmlOutput; if (SueetieContext.Current.IsMobile &&
this.MimeType.MajorType.ToUpperInvariant() == "IMAGE") htmlOutput = SueetieConfiguration.Get().Media.MobileHtmlOutput;

Article written by

A long time developer, I was an early adopter of Linux in the mid-90's for a few years until I entered corporate environments and worked with Microsoft technologies like ASP, then .NET. In 2008 I released Sueetie, an Online Community Platform built in .NET. In late 2012 I returned to my Linux roots and locked in on Java development. Much of my work is available on GitHub.