Integrate Galleria with a web application platform or CMS. In this recipe, we'll cover creating a web application that reads images from a filesystem directory.
For the sake of this example, we'll be introducing a new programming language and platform to work with. The purpose is to show how a possible web application integration would work. We'll be using the Python programming language and the Flask web application framework. Both are known for their ease of use so hopefully it'll be easy to understand for someone that has no experience with the technologies. It's fine to skip the following paragraphs if there is no interest in learning the Python tools used here.
Before we start, install Python. We'll be using Python 2.7 in this example. Please visit http://www.python.org/getit/ for information on installing. Command line examples will be given for both Unix Bash and Windows.
Once Python is installed, enter the following command in the cmd.exe application (Windows):
C:\Python27\Scripts\easy_install.exe Flask
Enter the following command for Unix:
sudo easy_install Flask
Next, create files named app.py and app.html in the development directory we've been working in. We'll use those files for the web application we'll write.
In our sample Flask web application, we're going to dynamically read images from the filesystem to create our gallery with and use a templating engine to generate the HTML markup required for the gallery. Here, we're using a templating engine to dynamically render HTML markup. Previously, the HTML markup we used was manually crafted.
Since the following code snippet is a bit longer, please read the inline comments. The contents of app.py will look like the following:
import os from flask import Flask, render_template # Create the application app = Flask('Galleria', static_folder="../", static_url_path="/static", template_folder="./") # Set the directory where images are stored image_dir = os.path.join(os.path.dirname(__file__), 'images') @app.route("/") def index(): """ Run this function for the index page of the web application. Images on the filesystem are expected to be in the format forthumbnails: image#-200px.jpg And this format for large size: image#-1600px.jpg """ images = {} for filename in os.listdir(image_dir): # if the filename does not start with image, # it's not a valid gallery image if not filename.startswith('image'): continue # let's find the scale size name, size = filename.split('-') if name not in images: images[name] = {} if size.startswith('200px'): # thumbnail images[name]['thumb'] = filename else: # full size images[name]['image'] = filename # render the app.html template with the image data we gathered return render_template('app.html', images=images.values()) if __name__ == "__main__": app.run()
Here we're setting up the Flask app and setting up one URL—the index page of the site. What the index page of the site shows depends on what is returned in the function we have defined. In our case, we're rendering a template with the values of the images we found on the filesystem.
The app.html file will then look like the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery.min.js">
</script>
<script src="/static/galleria-1.2.8.min.js"></script>
<script>
$(document).ready(function(){
Galleria.loadTheme(
'/static/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');
});
</script>
</head>
<body>
<div id="galleria" style="height: 500px;">
{% for image in images %}
<a href="/static/development/images/{{ image['image'] }}">
<img src="/static/development/images/{{ image['thumb'] }}" />
</a>
{% endfor %}
</div>
</body>
</html>The important part of this HTML code is bolded. We're iterating over the set of images provided to the template and rendering the new image URL as the web application knows it.
Finally, to run the application, in the command line, move to the directory where the app.py file is located:
cd galleria/development
Then, run the following command to start up the web application (Windows):
C:\Python27\python.exe app.py
Run the following command to start up the web application (Unix):
python app.py
We should get the following output, letting us know that the Flask app is running correctly:
Finally, in a web browser, enter the address: http://127.0.0.1:5000/.
If all went well, we should see a gallery with the classic theme on the page.
This example works much like the rest of the Galleria example with the exception of the image HTML markup being generated by Python code and the JavaScript, CSS, and images resources being served by the web application.
The advantage of using a web application is that the images used can be dynamically generated. With our application, we could simply add photos to the images directory, also naming them according to the standard we're using, and the gallery will automatically begin using those images.
Many web application frameworks and CMSs provide ways to automatically scale images for thumbnail and other sizes. If programming in those environments, please be aware of what those technologies are and make sure to utilize them accordingly.
For instance, with our example, we could use the Python Image Library (PIL) to dynamically resize our large images for use in the gallery.
Some CMSs already provide Galleria integration as follows:
Plone: This is the Python based enterprise level CMS
Wordpress: This is the blogging platform
Joomla: This is the PHP CMS
Search the addons of other platforms for Galleria to see if it's supported.