carol.gimp.org

gimp2

Python:Simple Gallery Script

I have too long ago stopped making simple gallery scripts for TheGIMP and started to make these complex things that read this file from this location and those files from that location. It was not the kind of thing you could share.

I am in need of a gallery of pages for images that I am calling web utilities and I am also feeling pressure from one of my heros Carla who used image magick and album to whip up gallery pages and announced it on the gimp course on one of the linux chix mail lists.

This script will read xcfs from a directory of your choice and save three sizes of the image and corresponding html into a directory of your choice. It assumes that you made the xcf properly oriented regardless of the exif information. It makes jpegs out of multi-layered xcfs. It can make comments that contain its image name and the location of the original with a few minor changes.

I tried to keep the templates as simple as possible, it should be easy to edit either the templates or their product. I have failed miserably with tableless design, if this is an issue to you, the templates can and should be edited. These pages look fine in mozilla.

Install the script

To install the simple gallery script download it to someplace you can find with the commandline on your computer.

carol@treva:~$ gimptool --install-bin gallery-simple.py
/usr/bin/install -c -d /home/carol/.gimp-2.3/plug-ins
/usr/bin/install -c gallery-simple.py /home/carol/.gimp-2.3/plug-ins/gallery-simple.py    
carol@treva:~$

Or if you don't have a gimptool, don't worry. The gimptool is actually performing a very very simple task at this point. You, the human, can do this in two steps. Find out where your gimp is keeping its files in your home directory. I am using gimp-2.3 from cvs so my files are located /home/carol/.gimp-2.3/plug-ins/.

carol@treva:~$ cp gallery-simple.py /home/carol/.gimp-2.3/plug-ins/
carol@treva:~$ chmod a+x  /home/carol/.gimp-2.3/plug-ins/gallery-simple.py              
carol@treva:~$

Once it is installed, it should lodge itself into your <Toolbox> -->Xtns -->Python-Fu and calls itself SimpleGallery. Restart gimp and see if it is there.

There is only one reason I can think of that the script would not install, that would be if you did not have the gimp python module installed on your computer. So far, python and gimp do not work together on Windows and on gnu/linux, it needs a special message sent to the configuration script to tell it to build. Perhaps your distribution ships it separately, perhaps you did not enable python when you built yours. I am trying to put information about that on my python and gimp page

Prepare to use the script.

This script reads all of the xcfs in one directory and writes web pages for them in another directory. Pick images for the subject of your gallery and save them into one location. For me it was /photos/webutilities/. You can save multi-layered xcfs, the script will flatten them all and give them a white background before saving as a jpg. I think that I fixed it so that there is no chance of this plug-in writing over your originals, unless they end with a -original.jpg and even then I think it is safe. Especially as I have no obvious respect for exif information in these images. Probably it is because my camera does not have much exif information to give to me.

Launch the Plug-in

Find the plug-in at <Toolbox> -->Xtns -->Python-Fu -->GallerySimple it will pop up a large dialog with a snake on it.

Fill in the information it asks for. Try to avoid spaces in either the photographer name or the gallery name. It would probably work fine, but there are problems with them often enough that I still avoid making file names with spaces. I did not write the script to handle this.

This plug-in is going to duplicate the original and scale that down twice and write web pages to display them. So when picking the place the pages should land, you need to have a directory location that can handle this many images as you have xcfs and also be viewable with your browser. I suggest to save the images to some directory name in /tmp/ until you are happy with the results. Use the little file selector button and show the plug-in a place to write all of these files to.

After all of the image files have been flattened and saved in 3 different sizes, the python portions of this plug-in spews some html and saves it with the newly created images. It does this very quietly. If you have a directory with a gazillion xcfs in it, it might take a few moments. To see your new gallery page show your browser to GalleryName.html. I check this plug-in spew with Mozilla, the pages were written to look good enough in it.

Edit the script

image comment

You can change the comment file that is written to the image. JPEGs have a comment section that can be written to via gimp. I remember opening images that were all marked up here with Ulead Scanner Information or Photoshops name on it and gimp is no exception. This script has added text information into this area of the jpegs it just made as well, you can see it by opening any of the new images in gimp File -->Save As... using the same name and selecting the advanced options.

One way to edit the comment is to edit that portion of the script. It is line number 241-243. The text can be edited or perhaps even add additional information with some of the image_info information that is available.

gallery-simple.py
File Edit Search Preferences
232 233 image = pdb.gimp_file_load(imagefile, imagefile) 234 image.flatten() 235 236 if image.active_layer.is_indexed: 237 pdb.gimp_convert_rgb(image) 238 239 calc_dims(image, image_info, screen_side, thumb_side) 240 241 comment_text = 'The image was touched by TheGIMP!' 242 comment = "%s\nSource: %s" % (comment_text, filename) 243 save_jpeg(image, originalfile, comment) 244 245 pdb.gimp_image_scale(image, 246 image_info['screen_width'], 247 image_info['screen_height']) 248 save_jpeg(image, screenfile, comment) 249 250 pdb.gimp_image_scale(image, 251 image_info['thumb_width'], 252 image_info['thumb_height']) 253 save_jpeg(image, thumbfile, comment) 254 255 256 gimp.delete(image) 257 258 return images 259

gallery-simple.py

File Edit Search Preferences

   232	
   233	        image = pdb.gimp_file_load(imagefile, imagefile)
   234	        image.flatten()
   235	
   236	        if image.active_layer.is_indexed:
   237	            pdb.gimp_convert_rgb(image)
   238	
   239	        calc_dims(image, image_info, screen_side, thumb_side)
   240	        
   241	        comment_text = 'The image was touched by TheGIMP!'                        
   242	        comment = "%s\nSource: %s" % (comment_text, filename)                     
   243	        save_jpeg(image, originalfile, comment)                                   
   244	
   245	        pdb.gimp_image_scale(image,
   246	                             image_info['screen_width'],
   247	                             image_info['screen_height'])
   248	        save_jpeg(image, screenfile, comment)
   249	
   250	        pdb.gimp_image_scale(image,
   251	                             image_info['thumb_width'],
   252	                             image_info['thumb_height'])
   253	        save_jpeg(image, thumbfile, comment)
   254	
   255	
   256	        gimp.delete(image)
   257	
   258	    return images
   259

Another way to edit the comment is to change the way the script handles comments. In my scripting resources section, there is a sub-routine that will read a text file and add it to a jpeg comment.

Edit the templates

The template portion of the script is fairly easy and quite flexible. Templates are marked with three quotation marks in a row, at the beginning and the ending of the template (""").

the page style

The page style for these pages is written on each page. I tried to keep the style simple, but I did not want the pages to look like caca....

Please note the highlighted lines where percentage values were used in the css. The percentage character is one of the characters that python uses. Making it double tells python to skip it. I spent a good portion of one day "fixing" this bug, the error message is somewhat cryptic; please do not lose time to it.

The simplest way to edit the style sheet is to edit make your changes to a generated web page and then to paste them onto the template in the script. The one thing to be mindful of is the stylesheets contain one variable. It is the width of the table cells that contain the thumbnail on the gallery page. I had this set in the style to 125px, I always make 100px thumbnails so this made sense. If you are changing the gallery css, you can either replace the variable with a number in the template (replace "%(thumb_html_width)d" with a number like 150):

gallery-simple.py
File Edit Search Preferences
<style type="text/css"> body { background-color:white; color:black; font-family:sans-serif; margin:5%%; } img { border:thin solid black; margin:auto; } td{ width:%(thumb_html_width)dpx; } p.thumb { font-size:80%%; } :link{ text-decoration:none; } :visited{ text-decoration:none; } :active{ text-decoration:none; } a:hover{ text-decoration:none; } </style>

gallery-simple.py

File Edit Search Preferences

  <style type="text/css">
    body  {
      background-color:white;
      color:black;
      font-family:sans-serif;
      margin:5%%;                                                                         
      }
   img {
        border:thin solid black;
	margin:auto;
         }         
   td{                                                                                    
        width:%(thumb_html_width)dpx;                                                     
         }                                                                                
    p.thumb {
      font-size:80%%;                                                                     
      }
:link{
        text-decoration:none;
         }         
:visited{
        text-decoration:none;
         }         
 :active{
        text-decoration:none;
         }         
 a:hover{
        text-decoration:none;
         }         
  </style>

You can also remove the css from the template and put it separately into your gallery directory with just a simple edit to the template. Remove everything between the style tags and put it into a separate css file like I did here, gallery.css and image.css and add this part to the templates:

gallery-simple.py
File Edit Search Preferences
gallery_template =""" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title>%(photographer)s %(gallery_name)s </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta> <link rel="stylesheet" href="gallery.css" type="text/css" media="screen"></link> </head> <body> <h1>%(photographer)s</h1> <h2>%(gallery_name)s</h2> <table> %(table_rows)s </table> </body> </html> """ image_template = """ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title>%(gallery_name)s:%(name)s</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta> <link rel="stylesheet" href="image.css" type="text/css" media="screen"></link> </head> <body> <table> <tr><td> <h1>%(photographer)s</h1> <h2>%(gallery_name)s</h2> <h3>%(name)s</h3> </td><td> <img alt="%(name)s" src="%(screen_image)s"></img><br></br> <p>[<a href="%(original_image)s">%(original_width)dx%(original_height)d</a>]</p> </td></tr> </table> </body> </html> """

gallery-simple.py

File Edit Search Preferences

gallery_template ="""
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <title>%(photographer)s %(gallery_name)s </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
  <link rel="stylesheet" href="gallery.css" type="text/css" media="screen"></link>         
</head>

<body>
<h1>%(photographer)s</h1>
<h2>%(gallery_name)s</h2>
<table>
%(table_rows)s
</table>
</body>
</html>
"""



image_template = """
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <title>%(gallery_name)s:%(name)s</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
  <link rel="stylesheet" href="image.css" type="text/css" media="screen"></link>          
</head>

<body>
<table>
  <tr><td>
<h1>%(photographer)s</h1>
<h2>%(gallery_name)s</h2>
<h3>%(name)s</h3>
  </td><td>

<img alt="%(name)s" src="%(screen_image)s"></img><br></br>
<p>[<a href="%(original_image)s">%(original_width)dx%(original_height)d</a>]</p>
  </td></tr>
</table>
</body>
</html>
"""

the html

This is a little more interesting than the css. The html is full of the python variables. The strings are %(variable_name)s and numeric values are %(variable_value)d within the template. There is more information available this way than I have used in my templates.

The information that is available to the templates includes:

name: This is the name of the xcf with the xcf stripped off: "myphoto.xcf" the name will be "myphoto".
filename: Poorly named, this is the name of the the html file for the image: "myphoto.xcf" the filename will be "myphoto.html".
original_image: The name of the scripts save of the original image: "myphoto.xcf" the filename will be "myphoto-original.jpg".
screen_image: The name of the scripts save of the screen image with a maximum width that the user told it to have: "myphoto.xcf" the filename will be "myphoto-screen.jpg".
thumb_image: The name of the scripts save of the thumb image with a maximum width that the user told it to have: "myphoto.xcf" the filename will be "myphoto-thumb.jpg".
original-width: Numeric value.
original-height: Numeric value.
screen-width: Numeric value. Useful if you are writing valid html4 pages.
screen-height: Numeric value. Useful if you are writing valid html4 pages.
thumb-width: Numeric value. Useful if you are writing valid html4 pages.
thumb-height: Numeric value. Useful if you are writing valid html4 pages.

further personalizations

Called a "Simple Gallery", it is more flexible than simple, at this point. It is simple to use. A beginner to scripting could start with this script and using other code pieces from python scripts that are available in the source (/usr/local/lib/gimp/2.0/plug-ins/ for me) or scripts that are available elsewhere on the web or from this web site you could probably easily add extra tasks. One idea might be to allow the user to choose background and foreground colors and insure that transparent images are flattened with the proper color. Add the color selector widget to the registering part and start there.

rumor

My other gallery script reads text files about the image and spews individual image html files as well as a cheesy javascript gallery page. This script soon.

Most all of my software is gnu. thanks!

This work is licensed under a Creative Commons License.