Most of this is either fairly self-explanatory or covered by the documentation at simpleviewer.net. There really is nothing specific to Ode about using SimpleViewer. (That's the point after all :) Still if you're looking for a detailed step-by-step walk through along with a couple of suggestions, you might want to read this through.
Regardless, give SimpleViewer a try. I think you'll like it.
You might prefer to read this relatively long post using the text_page theme.
I've decided to tackle photo galleries for this first how-to for several reasons:
Photos are important and speak directly to the idea of 'the personal web' I like to think about. Integrating photos with a weblog is a unique and compelling way to share experiences. Photos on their own are a little abstract and captions don't help enough. Tags, though informative are about as pleasant to read as an entry in a library catalog (http://en.wikipedia.org/wiki/Library_catalog). A weblog post gives context to the photos while the photos enliven the text. It's a perfect marriage. I'd love to see more Ode sites featuring lots and lots of photos.
It's pretty straight-forward and the results are really nice. Though people post lots of photos to social media sites, this is an area where I believe weblogs have the advantage.
There's a particular solution I really like and want to talk about.
For this tutorial I'm going to use SimpleViewer (http://simpleviewer.net/). The gallery software comes from SimpleViewer Inc.
About SimpleViewer Inc. (from their site):
SimpleViewer Inc. is a privately-held company based in Los Angeles, California. We design and develop world-class image gallery solutions.
They actually make several different image gallery products, of which simple viewer is just one.
The complete line up includes:
All of these are quite nice, and I'd say they complement each other. If you're like me you'll have reason to use more than one, if not all of them from time to time.
This tutorial is going to focus on only SimpleViewer. When I get the chance I'll write a short follow up about using the others. (Of course you'll might have no problem figuring them out on your own.) As always feel free to ask if you have any questions. Please consider the SimpleViewer gallery software on-topic for discussion in the forum.
In addition to the viewers, there are a couple of related apps you should be aware of (one of which we'll actually be using for this tutorial).
svManager ($35) - A PHP app that can be used to manage your galleries. It's compatible with all of the viewers listed above.
svBuilder (free) - An Adobe air app that handles the job of building SimpleViewer galleries. It's a good app with a clean interface, and support for SimpleViewer's configuration options (quite a few of them at least) and many of the operations involved in building a gallery including (among others):
The app allows you to add photos to the gallery by dragging and dropping them from Mac OS X Finder or Windows Explorer.
After you set up the gallery, svBuilder outputs a self-contained gallery folder complete with a standalone html page to load and display the gallery as well as all of the required resources (images, thumbnails, CSS, javascript, and swf files). There's even an xml file which can use to change change or add configuration options without regenerating the gallery. (You can also edit the other resources as appropriate to achieve the desired result, e.g. html, css)
There are pro and standard versions of svBuilder. Both are free but the one you'll use will be dictated by which version of SimpleViewer you're using. That means using the standard version of svBuilder with SimpleViewer. (And spending $45 for SimpleViewer Pro to use the Pro version of svBuilder.) The only difference between the two being that svBuilder Pro supports SimpleViewer Pro's expanded features and configuration options.
After all of that build-up, using SimpleViewer is going to seem very easy indeed.
Look around at the simpleviewer site http://simpleviewer.net/ for as long as you want. When you're done with that...
Download the latest version of Adobe Air.
Air is an environment that allows software developed using HTML, Javascript, Flash, and ActionScript, which is normally confined to a browser, to run as a standalone app.
You'll find a 'Download' link. Clicking the link should get you simpleviewer.zip (approx 1.2 MB)
Using your preferred method.
Unzipping the archive will get a folder titled simpleviewer_211 with the following contents:
simpleviewer_211/
readme.html
svBuilder.air
web/
This should start something that looks similar to a typical software installer (through Adobe Air which you installed earlier). Walk through the prompts to install svBuilder. The end result of the installation process is what you'd get with any other installer, i.e. what looks like a standalone app. For example, on Mac OS X, running the installer puts an app titled 'svBuilder.app' in the standard Applications folder.
At this point you've finished the preparation. Now, make sure you have your photos handy.
Let's call the first time a trial run. Group a small number of photos together in a folder.
Note: You can drag and drop image files (but not folders) into svBuilder or browse for images through the app.
svBuilder will not alter the originals.
You'll see that the app is organized around a 4 step workflow.
(1) Start -> (2) Images -> (3) Customize -> (4) Publish
I won't discuss svBuilder in excruciating detail. There is documentation available at simpleviewer.net. Our story really picks up after the gallery is generated. I will quickly talk about each of the steps.
Since this is presumably the first time you're using SimpleViewer, you'll start by selecting 'New Gallery...' at the Start screen. 'New Gallery...' is one of two giant buttons in the screen, the other being "Open Gallery", which allows you to open and modify a previously generated gallery.
The ability to open an existing gallery after it's been created is nice, and creates more of a persistent experience than other gallery creation solutions I've used. This is important because it gets you back to your captions, embed code, etc.
Selecting 'New Gallery...' takes you to the Images screen, the second step in the process.
The general strategy here is to work through the Images sidebar from top to bottom, first selecting an Image Source.
There are two choices, 'Local' and 'Flickr'.
Local is the default. (If you select Flickr you'll be presented with fields for entering your Flickr username and password.)
Assuming you're working with local images, you can add them by drag and drop onto svBuilder or by browsing. Regardless of the method you choose, you'll see a listing on the right with a thumbnail for each of the photos you add.
Working with list you can:
assign each photo a caption, reorder the images by dragging (which affects the ordering of photos in the gallery), rename the images for the gallery (by default the retains the original filenames), and more.
The last thing you'll want to do is make adjustments under the Image Size heading at the bottom of the sidebar. Note that Max Image Size is not necessarily the size the images will be displayed in the gallery. You can specify a max size and width for the gallery elsewhere, and SimpleViewer will scale the images as necessary to fit. This setting will dictate the size of the image files generated.
Also note that there is an image quality setting which you can access by clicking the 'Change...' button.
After setting up your images, move on to step 3 by clicking 'Customize' at the top of the svBuilder window.
Here you will set options related to the gallery itself.
Again you'll see a sidebar on the left with all of your options. On the right, you'll see a preview of the gallery (appearing in place of the photo list in the previous step).
Refer to the SimpleViewer documentation for info about these options.
Keep in mind that all these can be adjusted after the gallery is generated either by opening the gallery again in svBuilder or editing the resulting files (including gallery.xml).
Notice the 'Select Preset...' dropdown at the top of the sidebar. There are 4 options available by default
classic, compact, modern, thumbs under
You might want to quickly cycle through each to see the differences and pick the best starting point for you. After selecting a preset to start with, you can adjust the various options as you see fit.
You can even save your own presets by setting all of the options just the way you want them and then selecting 'Save Config as Preset...' from the 'Config' menu in the menubar.
There are just a couple of things I want to point out:
The 'Use Flash' checkbox / Universal Playback
Notice the checkbox labeled 'Use Flash' (selected by default).
SimpleViewer has always generated Flash galleries. With the increasing use of capable mobile devices (e.g. iOS and Android) with smaller screens, and HTML5 as a solution for devices that do not support Flash (Apple's iOS devices), SimpleViewer now offers an alternative HTML5 based gallery. The folks responsible for SimpleViewer refer to this feature as 'Universal Playback' http://simpleviewer.net/simpleviewer/support/#universal.
The HTML5 version of the gallery is created along with the Flash version and automatically presented to browsers do not have the Flash plugin installed. You do not need to deselect the 'Use Flash' checkbox to get the HTML5 version of the gallery for browsers that require it. Deselecting the checkbox will cause the HTML5 version of the gallery to be used exclusively, for all browsers.
If you do decide to deselect that checkbox be aware that the preview won't match the generated site. The HTML5 version is optimized for mobile browsers and as such uses a minimal interface. Somewhat confusingly, this is not reflected in the preview. It's a relatively small issue, and one I'm happy to overlook for now in exchange for the availability of HTML5 galleries.
The 'Refresh button'
Next, notice the 'Refresh' button at the top of the sidebar. If you've made changes and they're not showing in the preview, click Refresh to update the view.
Open image file in its own window / full screen preview buttons
Lastly, you'll see two icons in the upper right hand corner of the preview. One opens the active image in it's own window, and the other switches to full screen view.
One or both of these behaviors may not work for previews in svBuilder itself, depending on the browser you're using. They should work in the resulting gallery. Though even that isn't entirely true.
For example, Chrome will not display the mobile player (the HTML5 version of the gallery) locally because of security restrictions. Refer to the SimpleViewer support pages http://simpleviewer.net/simpleviewer/support/ for more information about this and other restrictions. The gallery will work in Chrome, and all other modern browsers, after it is uploaded to your server.
With the gallery set up as you want it, move on to the final step by clicking 'Publish' at the top of the svBuilder window.
We're getting close now.
There are a few more choices for you to make on this screen related to gallery creation. For example, this step allows you to choose where to output the gallery.
Important: Gallery files will be placed directly in the folder specified here. So you want to choose something like '.../Desktop/my_gallery/' and not just '.../Desktop/'. The latter would cause svBuilder to spew the files all over your desktop, which is most likely not what you want. You can choose an existing folder or create a new one after clicking the 'Browse...' button.
After clicking the 'Save' button the selected Gallery Folder will be a self-contained gallery. It will include a file called index.html which can be used to load and display your new gallery. (index.html is the default and can be changed by editing the 'Index Page Name' field.)
Congratulations. You've finished creating your first SimpleViewer gallery with svBuilder. You can view the gallery locally by opening the gallery folder just created and dragging the enclosed index.html file to your preferred web browser.
When you're ready to make your gallery available online, you'll upload this entire folder to your webserver/hosting account.
Now we can think about displaying and accessing the gallery and integrating it into your Ode site. There are two options...
You can simply access the gallery as a standalone page which is separate from your Ode site.
You can embed the gallery directly into your Ode site, placing it in a post (probably be the most common arrangement), or anywhere else you like by putting it directly in a theme.
These two options aren't mutually exclusive, which is nice. You can generate one gallery and access it both ways.
Let's say we have a gallery on the desktop in a folder titled 'test_gallery'.
Inside the test_gallery folder you should see the following
test_gallery/
gallery.xml
images
index.html
svcore
thumbs
If you drag that index.html page to a browser you should see your gallery, on a page all it's own.
Now let's take that folder and upload it to a hosting provider. For the sake of example, I'll say I have an Ode site at
sample.net/cgi-bin/ode.cgi
Furthermore, the root of the domain hierarchy looks something like
sample.net/
ode_site/
images/
index.html
doormat.css
photos/
test_gallery/
gallery.xml
images
index.html
svcore
thumbs
'ode_site' is the document root for Ode. The content of the site and my themes are all under that directory.
'images' is a folder where I keep various shared image resources that I pull from for Ode and maybe other projects as well.
'index.html' is a typical static html page. It's the page that would load if I were type the address sample.net in a browser (or sample.net/index.html). It's not my Ode site. I like to include a page like this as a directory that links to Ode and other projects I host at the same domain.
'doormat.css' is a stylesheet linked to index.html
That brings us to the photos directory.
'photos' is a directory where I keep all of my photos and photo galleries. Each directory under photos is a self-contained, standalone gallery. It's a simple organization scheme and you could modify it to suite your needs or preferences. For example, you might want to organize galleries into categories.
To access my test gallery in a browser, I'd simply type the address to the gallery:
sample.net/photos/test_gallery/
Of course I can link to the gallery from an Ode post (or anywhere else) as I would any other address:
<a href="sample.net/photos/test_gallery/" title="test SimpleViewer gallery">My test gallery</a>
I'll start by pointing you to the SimpleViewer Embedding Guide.
You absolutely will want to read through the instructions there rather than or in addition to what I write here. For example the Embedding Guide includes details about embed code parameters (e.g. divId, width, height, ...) which you can use to change various aspects of an embedded gallery. I won't rehash that info here.
Well there are a couple of options actually. I'll mention both but only discuss the one I recommend you use. (I'll explain why.)
svBuilder will provide a block of Javascript code you can use to embed a specific gallery into an HTML page. You'll find this block of code on the Publish screen in svBuilder. If you've closed svBuilder you can get back to the embed code by launching svBuilder again, choosing 'Open Gallery...' at start screen and navigating to an existing gallery folder using the 'Select Gallery Folder...' dialog.
I don't recommend this method because of a couple of significant limitations which make it inappropriate for use with an Ode site (and other dynamic sites):
It assumes that the page you're embedding the gallery into is contained inside the gallery folder itself. Given the example above, the embed code requires that the HTML page containing the gallery be placed under the 'test_gallery/' folder. This is very limiting, even working with a static site.
It makes it impossible to embed more than one gallery on the same page.
We can overcome both of these limitations, and make it easier to embed galleries, using an alternative method for embedding...
As documented on the SimpleViewer Embedding Guide (http://www.simpleviewer.net/simpleviewer/support/embedding.html) galleries can be embedded using an iframe by pasting the following code wherever you want the gallery to appear:
<iframe src="mygalleryfolder/index.html" width="800" height="600" frameborder="0" scrolling="no"></iframe>
With this method, you can set the dimensions of the gallery by setting the width and height parameters of the iframe. In this example, the gallery has a width of 800px and a height of 600px. Changing the size of the gallery to fit a page is as easy as updating the values of those parameters.
Use the src parameter to link to the gallery. You can use either relative or absolute URL for the value. For relative URLs, like the example, the path is assumed to be relative to the location of the page where the iframe appears. This most likely won't work for your Ode site or other dynamic sites, because a page does not correspond directly to a literal file at a particular path on the server.
Absolute paths will work.
You can specify absolute paths in two ways: (1) Specifying just the path from the root of the site, or (2) specifying the complete URL including the website address. Returning to the 'test_gallery' example from above, we could embed our gallery using the iframe method in either of these two ways:
Specifying an absolute path:
<iframe src="/photos/test_gallery/index.html" width="800" height="600" frameborder="0" scrolling="no"></iframe>
Specifying the complete URL
<iframe src="http://sample.net/photos/test_gallery/index.html" width="800" height="600" frameborder="0" scrolling="no"></iframe>
Using this method, you can embed a gallery in any Ode post, or even as part of the theme itself (by editing the theme files to include the iframe).
You can also embed as many galleries as you like onto any page, and even include multple galleries in the same post.
As a general rule, it's a good idea to avoid loading media (photos, video, audio, etc.) on a category pages. The reason is that media can be very large, and so can take a long time to download and consume a lot system resources (e.g. memory). It's burden for (1) the web server (2) the connection (3) the client.
Of course that's ok in general. You want visitors to access your media, and the simple fact is that accessing it takes time and resources. However, category pages may include many posts each of which may contain media. The cumulative load of all of that media could be much more than you would ever want to present at any one time.
Ideally you want media, at least most of it, to appear only on pages for individual posts, and not category pages. You can do just that with Ode's 'jump' addin. jump_addin allows you to set a point that divides a post into two parts. The part above the jump indicator appears on all pages, while content below the jump point will only appear on pages corresponding to individual posts. On category pages, content below the jump point is replaced with a customizable link to the post page (where visitors can view the complete post). Placing all of your embedded media, including photo galleries, below the jump indicator ensures that your category pages don't become burdensome.
When you load a gallery, the entire thing, or a large portion of it, loads into memory at the same time, not just the image being viewed. This allows for a seamless viewing experience but it means that you probably want to control the size of your galleries. You do this by limiting (1) the size of the individual images in the gallery and (2) the total number of images in the gallery.
The free version of SimpleViewer limits you to a maximum of 50 photos per gallery. That's probably a nice guideline to stick to and it means you don't have to pay for the Pro version unless you want other Pro features. (SimpleViewer Pro galleries can contain an unlimited number of photos - though as discussed you'll probably want to restrict individual galleries to some reasonable number of images.)
That's all there is to using SimpleViewer with Ode. I hope to see some of your galleries.