Gromit 66 User's Manual

Layout » All Pages & Index Page

Layout » All Pages & Index Page » All Pages

Layout » All Pages & Index Page » Icon Set

Layout » All Pages & Index Page » Index Page Navigation

Layout » Thumbnails

Layout » Thumbnails » Layout

Layout » Thumbnails » Images

Layout » Thumbnails » Folders

Layout » Thumbnails » Borders

Layout » Thumbnail Captions

Layout » Thumbnail Captions » Folders

Layout » Thumbnail Captions » Images

Layout » Slides

Layout » Slide Page

Layout » Slides » Slide Page Navigation

Layout » Slides » Slide Image Borders

Layout » Slides » Slide Page Caption

Layout » Thumbstrip & Downloads

Layout » Thumbstrip & Downloads » Slide Page Thumbstrip

Layout » Thumbstrip & Downloads » Thumbstrip Borders

Layout » Thumbstrip & Downloads » Download Options

Layout » Breadcrumbs

Layout » Breadcrumbs » Breadcrumb Layout

Title Bar

Title Bar » Content & Style

Title Bar » Theme Image

Title Bar » Title Bar Borders

Logo

Logo » Logo Image

Overlays » Index Page

Overlays » Index Page » Overlay Icons » Folder Overlay

Overlays » Index Page » Overlay Icons » Video Overlay

Overlays » Index Page » Overlay Icons » Audio Overlay

Overlays » Index Page » Overlay Icons » Star Overlay

Overlays » Index Page » Overlay Icons » Custom Overlay

Overlays » Index Page » "New" Overlay

Overlays » Index Page » Custom Overlay File

Overlays » Thumbstrip

Overlays » Thumbstrip » Thumbstrip Overlays

Metadata

Metadata » Metadata Display

Metadata » EXIF Fields

Metadata » Custom Metadata

Metadata » Metadata Sequence

Maps

Maps » Google Map

Links

Links » Button Layout

Links » Mailto Button

Links » First, Second, Third Link Buttons

Fonts » Album Fonts

Fonts » Album Fonts » Font Family

Fonts » Album Fonts » Google Font

Fonts » Album Fonts » WOFF File

Fonts » All Pages

Fonts » All Pages » Font Styles

Fonts » Index Page

Fonts » Index Page » Font Styles

Fonts » Slide Page

Fonts » Slide Page » Font Styles

Fonts » Info Page

Fonts » Info Page » Font Styles

Text » Index Page

Text » Index Page » Navigation

Text » Index Page » Other

Text » Slide Page

Text » Slide Page » Navigation

Text » Slide Page » Maps

Text » Slide Page » Downloads

Text » Slide Page » Other

Text » Overlays

Text » Overlays » "New" Overlay

Text » Overlays » Star Overlay Tooltips

Info Page » General

Info Page » General » Layout

Info Page » General » Image

Info Page » General » Contact

Info Page » Text

Info Page » Text » Title

Info Page » Text » Body

Code » CSS

Code » CSS

Code » Index Page » Top & Bottom Info

Code » Index Page » Top & Bottom Info

Code » Index Page » HTML

Code » Index Page » HTML » Head

Code » Index Page » HTML » Body Opening

Code » Index Page » HTML » Body Closing

Code » Slide Page » HTML

Code » Slide Page » HTML » Head

Code » Slide Page » HTML » Body Opening

Code » Slide Page » HTML » Body Closing

Misc

Misc

Custom » Colors

Custom » Colors » Create a custom style

Custom » Colors » Body & Borders

Custom » Colors » Text

Custom » Colors » Banner Title Bar

Custom » Colors » Info Page

Custom » Colors » Icon Backgrounds

Custom » Colors » Other

Custom » Body Image

Custom » Body Image » Body Image

About

About

Image-Specific Settings

To access image-specific settings, hover on a thumbnail in the main jAlbum editing window, and click More.

Then choose Edit.

Then choose the Gromit panel on the right side of the editing window.

Info: Video Support

In Gromit, support for videos added to an album project is dependent upon the video support built into jAlbum. For videos to work properly in an album, video support must be enabled in jAlbum under Tools (jAlbum in macOS), Preferences, Advanced. The slide page window that displays the video will be same size as the video's native dimensions, unless you specify other dimensions (see Image-Specific Settings). If those dimensions are larger than the image bounds chosen under Album » Settings » Images » Image bounds » Images, the dimensions will be reduced to fit within those bounds, preserving the aspect ratio. The actual video file in the album will not be adjusted - only the player window is scaled down as necessary. If you provide the site visitor with a download icon, he will be given the video in its actual, native dimensions.

With video support enabled in jAlbum, the core program automatically provides a thumbnail image for the video. In image editing mode, a slider is available to choose a video frame other than the one automatically selected. This can be especially helpful if the video starts with several seconds of a black screen - the automatically-selected frame might be black in that case.

It is possible to provide your own representing image for the video, which could be an image that doesn't even appear in the video. Choose a full-sized image (a regular JPG file, and not just a small thumbnail), change its extension to .thm, and give it the same name as your video. For example, for a video called mydog.mp4, the image file should be named mydog.thm. This file should then be added to the album project at the same time the video is added to the project. This image will then be used both for the thumbnail and for the video frame while the video is loading and after it has finished playing.

Gromit can also support externally-hosted videos from YouTube and Vimeo. To use this method, see Info: Hosted Videos.

Your web host must provide video files with the correct header information. The MIME type must be video/mp4 - if an MP4 file is delivered by your web host with any other MIME type, playback will fail in some browsers. If you find that a video in your album plays properly when you preview the album locally, but displays only an error message when viewed from your web host, an incorrect MIME type is the most likely cause. Ideally, your web host should correct the server configuration, but if you can change your own .htaccess file on the server, adding this line will correct the problem:

AddType video/mp4 .mp4

In addition, video files must not be compressed by the server using something like gzip, for example.

Info: Hosted Videos

Gromit supports the display of videos hosted on YouTube or Vimeo.

jAlbum does not have a way of extracting a still image from an externally-hosted video to use to create a thumbnail for it. You can use a video editing program to extract a single frame, take a screenshot, or choose any other still image to represent the video in the album. This should be a full-sized JPG image, rather than a thumbnail.

Add the image file that represents the video to the album project.

Because the video must be connected to a single image, you cannot use album-level settings. You must choose the settings for this video under Image-Specific Settings. jAlbum cannot determine the dimensions or the length of an externally-hosted video, so these values should be entered manually. Enter the absolute URL for the video.

For a YouTube video, view the video on the YouTube site, and click the Share, then Embed links. If there is no Embed option, that means that the person who posted the video does not allow it to be embedded on any other site, and you will not be able to use it in your album. Make note of the width and height of the video, then copy the URL that's shown in the embedding code (use CTRL-C to copy it, then use CTRL-V to paste it into the Gromit settings, to avoid errors). The skin will accept any of the following URL formats:

For a Vimeo video, view the video on the Vimeo site, and click the Share icon, then click the Embed link. Make note of the width and height of the video, then copy the URL that's shown in the Link box (use CTRL-C to copy it, then use CTRL-V to paste it into the Gromit settings, to avoid errors). Do not include any autoplay parameters - the skin will take care of this automatically. The skin will accept either of the following URL formats:

Info: Audio Support

In Gromit, audio files (MP3 format only) may be added to an album project in the same way as image files or video files. A generic image is provided for audio files, to serve both as a thumbnail image on the index page and as an image to be displayed on the slide page for the audio file.

It is possible to provide your own representing image for the audio file. Choose a full-sized image (a regular JPG file, and not just a small thumbnail), change its extension to .thm, and give it the same name as your audio file. For example, for an audio file called mydogsings.mp3, the image file should be named mydogsings.thm. This file should then be added to the album project at the same time the audio file is added to the project. This image will then be used both for the thumbnail and for the slide page, where it will be displayed while the audio is playing.

Info: HTML Tags and jAlbum Variables

HTML tags and jAlbum variables may be used in a number of different contexts, and will be honored in the album (including things like links). jAlbum variables will be passed to the jAlbum engine and will be evaluated before they are placed in the completed album. Almost all user entries are treated in this manner:

If you use a < or > character in a text string, it is assumed to be part of an HTML tag, and may produce errors if it isn't. If you want to use one of those characters as simple text, use its HTML entity code, instead.

Info: CSS Classes

Choosing the Custom style of Gromit allows you to specify your own color scheme for an album, but doesn't provide a direct way of exercising more granular control over the border and text colors. If you wish, for example, to use one text color for most elements, but to use a different color for folder thumbnail titles, you need to enter the CSS to accomplish that under Code » CSS. Most page elements have unique CSS classes, which you can use to target your color choices. The following table lists those elements, and gives an example of the CSS needed to specify a color for that element.

Element CSS Example
Borders and Padding  
Folder thumbnail border .gr-thumbfolder img {border-color: #000000;}
Folder thumbnail padding .gr-thumbfolder img {background-color: #000000;}
Image thumbnail border .gr-thumbimg img {border-color: #000000;}
Image thumbnail padding .gr-thumbimg img {background-color: #000000;}
Title bar image border .gr-itti > div {border-color: #000000;}
Title bar image padding .gr-itti {background-color: #000000;}
Logo image border .gr-logo img {border-color: #000000;}
Logo image padding .gr-logo img {background-color: #000000;}
Thumbstrip image border .gr-thumbstripup img, .gr-thumbstripdn img {border-color: #000000;}
Thumbstrip image padding .gr-thumbstripup img, .gr-thumbstripdn img {background-color: #000000;}
Slide image border .gr-slideobject > div {border-color: #000000;}
Slide image padding .gr-slideobject > div {background-color: #000000;}
Info page box border .gr-ipbox > div {border-color: #000000;}
Info page image border .gr-ipimage img {border-color: #000000;}
Info page image padding .gr-ipimage img {background-color: #000000;}
   
All Pages  
Page title .gr-pagetitle, .gr-pagetitleslide {color: #000000;}
Page title on a theme image .gr-pagetitleTI {color: #000000;}
Breadcrumbs .gr-breadcrumbs, .gr-breadcrumbsslide {color: #000000;}
Copyright .gr-copyright {color: #000000;}
   
Index Page  
Page description .gr-pagedescription {color: #000000;}
Page description on a theme image .gr-pagedescriptionTI {color: #000000;}
Index page link list .gr-indexlinklist, .gr-indexlinklist a {color: #000000;}
Folder thumbnail title .gr-foldertitle {color: #000000;}
Folder thumbnail comment .gr-foldercomment {color: #000000;}
Image thumbnail title .gr-imagetitle {color: #000000;}
Image thumbnail comment .gr-imagecomment {color: #000000;}
Video/audio thumbnail length .gr-imagevideolength {color: #000000;}
Top info .gr-infotxt {color: #000000;}
Bottom info .gr-infotxtbottom {color: #000000;}
Credits .gr-credits, .gr-credits a {color: #000000;}
   
Slide Page  
Image title .gr-slidetitle {color: #000000;}
Image comment .gr-slidecomment {color: #000000;}
Video/audio length .gr-slidevideolength {color: #000000;}
Image counter .gr-slidectr {color: #000000;}
Metadata label .gr-slidemetalabel {color: #000000;}
Metadata .gr-slidemeta {color: #000000;}
   
Info Page  
Title .gr-pagetitleip {color: #000000;}
Title on a theme image .gr-pagetitleipTI {color: #000000;}
Text .gr-iptext {color: #000000;}
Contact label .gr-ipcontact {color: #000000;}
Contact address .gr-ipcontact a {color: #000000;}

In many cases, an element may also contain an active link. For example, you might include a link in your Page description. To specify a color for that link, and for the link when mouse-hovered, you might enter:

.gr-pagedescription a {color: #cccccc;}
.gr-pagedescription a:hover {color: #ff0000;}

To specify the colors for a beveled border, you need to enter the colors for each side - north, east, south, and west:

.gr-slideobject > div {border-color: #cccccc #888888 #888888 #cccccc;}

You may specify any hex color code you want. Browser support for semi-transparent colors (a.k.a. alpha channel colors) is in flux, but all current browsers support a notation that uses RGBA values (red, green, blue, alpha). The following, for example, would produce a border that is red, but at 50% transparency:

.gr-thumbfolder img {border-color: rgba(255, 0, 0, 0.5);}

Info: Side Captions

If the caption is placed on either side of the slide image (see Layout » Slides » Slide Page Caption), the width of the caption area may be specified, and the user may choose to have the image remain centered on the page or to center the combined image and caption.

If the caption is placed on either side, it's often best to change the alignment of the title, comment, counter, and metadata from the default center to right or left (caption on the right, align the text to the left, for example - see Layout » Slides » Slide Page Caption).

Using side-loaded captions requires some consideration of page width. If images are scaled to 640px wide, the caption is 150px and is placed on either side, and the image is centered, the page width (including image borders) can easily exceed 1000px. Bear in mind that many laptops have monitors that are only 1024px wide, so a page that's wider than that will produce horizontal scrollbars unless one of the skin's responsive slide modes is used. In that case, the slide image will be reduced so that the entire page is visible within the viewport. This may result in a very small image. The largest page width in an album can be determined by opening the system console (F7) after the album has been generated - the skin places a message in the console that indicates the size of the widest slide page.

Info: Google Fonts & WOFF Files

A longstanding problem with web pages is that fonts are not actually included in the page code. The page simply includes some text, along with an instruction in the CSS that tells the browser what font to use to display that text. But if the visitor's computer doesn't have that font installed, it falls back to a default, or works its way down whatever font stack is indicated in the CSS until it finds a font that it can use. The effect of this limitation is that web page designers are generally forced to rely on a small set of "web safe" fonts, fonts that can reliably be found on most visitors' computers.

Packaging fonts with web pages in a way that allows the site visitor to install the font on his computer, while possible, runs afoul of copyright protections. Most fonts, even those normally distributed with a new computer, are protected by copyright, and you don't have the right to make them available to others.

To address this problem, Google Fonts and Web Open Font Format (WOFF) files can be used. The font is not actually installed on the visitor's computer. It is used only for displaying text on your web page. Google Fonts and WOFF files are now supported in almost all current browsers.

In Gromit, you may add a Google Font and/or a WOFF file, and tell the skin which font to use for each text element, with the default being the selected regular font family. Decorative fonts can be difficult to read at smaller sizes, and are therefore best used only for page titles. You are likely to find that they look better when displayed with a larger font size than you would use for a regular font, and with normal weight, rather than bold. More traditional fonts may be suitable for all text.

To choose a Google Font, visit the Google Fonts page, and identify the font you want to use. Make a note of its name, and enter the name in the Gromit settings. Gromit does not support the use of Google Font multiple styles. If you see a font listed, and it indicates that there are multiple styles of that font available, when you enter its name in the Gromit settings, the skin will use the basic style of that font.

There are now many hundreds of free WOFF files available. Search the web for free woff to find sources (some sites require registration). In most cases, the fonts are free for you to use on your website, even if the website is commercial, but the font designers retain copyright, so you don't have permission to redistribute the files directly to others. Often, these free fonts are provided in a variety of formats - WOFF, OTF, TTF, EOT, SVG, and so on. The format needed for Gromit is indicated by a .woff file extension. In many cases, the download will be provided as a zip archive containing several formats - you need to extract the .woff file from that archive and use that one for inclusion in the skin.

The FontSquirrel site is a typical example, offering many free fonts. Find one you like, and then click on the name of the font (not on the Download link). Then look for a Webfont Kit link on the menu bar. There, you can choose the WOFF format. If a font is available in only one format, the Webfont Kit menu bar choice will be absent. In that case, you can download another format, like TTF, then use FontSquirrel's Webfont Generator to upload the TTF and convert it to WOFF - choose the Expert radio button after you've uploaded the TTF version. In short, it may take some exploration to find the WOFF file you need.

See Fonts » Album Fonts to include a Google Font and/or WOFF file in your album.

Info: Linking to Originals

If you choose Link to originals in the main jAlbum settings (Album » Settings » Pages), your images will not be scaled or modified in any way. They will be used directly in the slide pages of the album. If you accept the default Gromit setting that makes the pages responsive, Gromit will adjust the slide display to the visitor's viewport, but because the files have not been scaled, the file sizes may be very large, making this setting a poor choice for a web album. However, you can resize your images before using them in jAlbum, in which case choosing Link to originals would be suitable.

Even if you choose to Link to originals, Gromit uses the image bounds entered under Album » Settings » Images » Image bounds » Images to determine the layout of the page title and its navigation icons, and to set size limits for the video player window. Therefore, even if you choose to Link to originals, you should choose suitable image bounds, matching the actual maximum dimensions of the bulk of your images.

Info: Inserting Files into HTML

The contents of external text files can be inserted into the HTML code generated for pages. This can be used to provide the user's own site navigation, or to include explanatory text on the pages.

Info: Master Album

With almost any skin, it's possible to create folders and subfolders, and produce a multilevel album. But in most cases, all levels must use the same skin, and usually the same style of that skin, as well. Gromit, however, can be used to create a master index of other albums; each album may use a different style of the Gromit skin, or a different skin entirely.

Info: Version Updating

New versions of Gromit are published with some regularity. These new versions generally include new features, improvements, and bug fixes. The jAlbum application will let you know when a new version is available, and users are encouraged to download and install the new version.

Info: Unsupported Album Objects

It is possible in jAlbum to add objects to an album project that can't actually be displayed in a browser, or that can be displayed only if a particular browser plugin is present. Objects like PDF files, MS Word documents, and zip files fall into this category. Adding a video file but having jAlbum video support turned off produces a similar situation. The skin is built to accommodate unsupported album objects, but because the results are unpredictable (you can't control how a site visitor's browser is configured), including unsupported album objects is generally not recommended.

If you add an unsupported album object to the project, jAlbum assigns an icon to it, based on the type of object. By adding a THM file with the same base name, you can choose another image to represent the object. For example, mylicense.pdf could be added to the project along with mylicense.thm, where that is simply an ordinary JPG file with its file extension changed.

The skin displays this icon or representing image as the thumbnail on the index page. Clicking on the thumbnail calls the file in question. What happens next is entirely dependent upon the site visitor's browser configuration. Clicking on the icon for a PDF file, for example, might open the file in a new tab in the browser, it might open the file in a PDF reader application, or it might prompt the visitor to save the file. This cannot be controlled by the coding on the page.

There will be a slide page for the object, accessible from neighboring slide pages by clicking "Next" or "Previous." This page displays the icon or representing image, and there will be an icon on the page that opens the file, in exactly the way the index page thumbnail opens the file.

Info: Browser Support

Gromit produces albums that display properly in most browsers.

Gromit License

The Gromit skin for jAlbum, including all supporting files, source code, compiled code, and scripts, ©2019, Jeffrey Tucker.

The skin uses the following open-source scripts:

You may use the software to create albums for personal or commercial sites. You may distribute copies of the software to others, but for any reuse or distribution, you must make clear to others the license terms of this software. You may modify the software for your own use.

The copyright holder reserves the right to waive or to withdraw any of these terms on a case-by-case basis.

The jAlbum application is free for personal use during the initial trial period, but after that, a Standard license is required. For commercial use, a Pro license is required. Visit the jAlbum site for further information.