Turtle skin settings explained

Skin version: 3.4.6

Turtle skin has such an extensive feature set – I guess even the most experienced of you can find something new. To get into Turtle skin settings either click the little skin icon next to the skin chooser in jAlbum or press F4.

Site

Show top navigation

Select to display a multi-level, site-wide top navigation menu at the top of the index page.

Exclude folders

You can exclude the folders and display only the custom pages.

Logo

Include a logo at the top left corner of the navigation bar, linked to the top level album page. The max size is 180x40px. Suggested format: 8bit transparent PNG.

Link from the top level page

Adds a link which takes you one level up from the top level page. You can use any absolute or relative URL, not just the one level up (../).

Use breadcrumb path

Breadcrumb path is the clickable path of upper-level folders.

Use search box

Add an album-wide search box to your albums. Can search in the Title, Comment, Keywords and Face tag fields.

Skip thumbnail page

Visitors will taken straight to the first image in the album. However if there are sub-albums, you can’t skip the thumbnail page.

Offer download for…
  • Nothing = to turn off this feature
  • Scaled-down images = allow visitors to download the screen resolution images in the current folder packed as ZIP file
  • Originals = allow visitors to download the original images as ZIP file, even if you did not include them normally in the album
  • The whole album = visitors can download the whole album packed as ZIP file

Please note, albums using extended (accented) characters in file or folder names cannot be properly unzipped on Windows, because Windows decodes these characters mapping to the viewer PC’s default character set, while Java encodes always with UTF-8 encoding (which is capable of representing any character in any language). The files can be restored properly on every other OS though.

Design

Font family

The base font for the album. Unfortunately you can choose only from a limited set of fonts that are available on most PC’s.

Font size

The basic font size relative to browser’s default (~14px)

Headline font and size

The font used on the header as album or folder title. This can be a web font too: see this post!

Background image

Select your own background image. You can also specify its position and tiling too. Please note, the “Stretch to fit” option does not work in old browsers, like IE8 and below.

Use 3D effects

You can turn off the 3D effects, like the drop shadows, and inner shadows if you prefer.

Stick controls to top

Stick the control bar to the top of the screen / right below the thumbnail scroll area.

Colors

Specify the page colors here.

Border color and width

The normal images can have a border specified here. Set ‘Border width’ to 0 if you don’t need the border.

Header

Theme image size

Specify here the top “theme” image size dimensions. The default is 900×300 px which yields a normal (horizontally split) layout. If you’d prefer the vertically split arrangement, use a portrait image size here, e.g. 400×500.

Same image in subfolders

Use this option if you want the same image appear in the subfolders, as you chose as album thumbnail (a.k.a the top level folder’s “Folder thumbnail”).

Height on Pages

The height of the theme image on Pages, like “Contact” or “Sitemap”. By default it is 80 the smallest possible height.

Height on Subfolders

The height on subfolders. Please note, if you use the “Same image in subfolders” option this can’t be higher than the theme image height.

Album description visible by default

You can choose if the description (given in the Settings / General panel for the whole album or in the Edit mode for the subalbums) is visible by default or only when the visitor moves the mouse over the header area.

Show “Start slideshow”

Do you want a “Start slideshow” button over the theme image area.

Album info window

You can add an “Info” window to your albums. An (i) button will appear on the header’s top rigth corner, and clicking it the header will be displayed on a popup window. You can put simple or formatted text here, or even HTML code. Make sure to turn off Preformat texts on pages, album info and footer on the Advanced panel. You can also control if this info should be added to only the top level album page or to all pages with the Top level only box.

Reducing the theme image size If most of your visitors using laptops or other low resolution devices you might want to reduce the splash image height. E.g. 750x250px should work even on 800x600px screens.

Excluding the theme image from the album Simply right click the thumbnail and choose “Use as folder thumbnail” and “Exclude” it before you make the album. This way the image will only serve as theme image but not get into the album.

Simple text formatting bold *foo* = foo     italic: +foo+ = foo     underline: _foo_ = foo
image: !http://lazaworx.com/static/images/jalbum.png!   
link: [http://jalbum.net/] http://jalbum.net/
named link: [Visit jAlbum.net!|http://jalbum.net/]    Visit jAlbum.net!
you can even link through an image:
[!http://lazaworx.com/static/images/jalbum.png!|http://jalbum.net/]

HTML formatting You can use HTML tags to format your header or footer. Even Javascript code! Please note, the code might be broken if you don’t turn off the Preformat text option! Example:

Thumbnails

Mark files “new” less than … days old

Mark files with a small [NEW] label if they are new at the time of viewing. Put 0 here to skip the sign.

Reference
  • Date taken = The date when the photo was taken regardless of later modifications
  • File modified = The last modified date
Fixed shape thumbnails

Crop all thumbnails to the same size or keep their original proportions, i.e. show all the pictures uncropped (which results in mixed portrait and landscape thumbnails).

Zoom

You can prezoom the thumbnails to have a narrower crop. Use 0% to get the least cropped.

Items order

The order of the Folder / Page / Image groups. The default is Folders → Pages → Images

Folders

Show description

Choose to show the folder description along with the folder thumbnails (added in Edit mode).

Show image count

You can choose if you want to display the image count in the folders.

Pages

Show page excerpt

You can also display a short excerpt from the custom pages sans HTML codes (max. 128 chars).

Images

Place thumbnail captions

Display the thumbnail captions on the index page as tooltip (display only on mouse over) or fixed below.

Caption template

The caption to be displayed along with the image thumbnails. Can contain HTML code and jAlbum variables.

Use plain text or HTML (standard: HTML5).
Here is the full list of Jalbum variables you can use here. Format: ${variableName}

Footer

Show image count

Display the number of images in the current folder and subfolders in total.

Show bottom navigation

Show a top level-only navigation bar in the footer.

Custom link

You can have a custom link at the bottom of the splash page. Put the link in the URL box, e.g. “http://mysite.com/” or if you want a mail link: “mailto:me@mail.com”. Use the Link text box to specify the text to display with the above link, e.g. “Visit my site” or “Email”.

Show “Help” link

You can skip the help link from the footer if you deselect this option. Your visitors can still use the F1 key to get to the help.

Custom content

You can add a custom content to the footer area, just above the bottom links. Use simple or formatted text here, or even HTML code. Make sure to turn off Preformat texts on pages, album info and footer on the Advanced panel. You can also control if this info should be added to only the top level album page or to all pages with the Top level only box. See the preformat options above in the Header section.

Images

Transition

Cross image transition type and speed (in milliseconds). Cross fade, Cross fade + Zoom and None is available. Use Cross fade for better viewing experience on less capable devices or use None if you want to avoid all transitions.

Speed

The length of the transition in milliseconds (1000 = 1 second)

Slideshow delay

The time interval beetween each image used in slideshow mode.

Loop

Do you want the slideshow and navigation return to the first image without warning the visitor after moving beyond the last image?

Auto-start

Select this if you want the slideshow automatically start on pages with no subfolders. If there are folders, the automatic slideshow will not start automatically to allow visitors navigate into the subfolders.

Go full screen

When the slideshow is initiated (by the user or by the auto-start option) the browser will go into Full-screen mode. This feature is not supported by IE 8 and below. After returning to the index page the browser will go back to normal “windowed” mode.

After the last image

The visitor can decide on where to go next: Do nothing | Start over | Up one level | Back to index page | Ask

Fit images to browser

Do you want the images resized to fit into the browser at first visit?

Shrink only

Images will not be enlarged beyond their original size (1:1)

Automatic image correction

Automatic Color, Contrast and Levels correction on all images. If you don’t have it already in jAlbum you need to install from here. Read more here.

Watermark

You can add a small watermark at the bottom right corner of each image.

Watermark position, strength and font size

You can control the watermark’s position on the image, its strength (0 = invisible, 100 = full opaque), and font size.

Visibility

Thumbnails visible by default

Do you want the thumbnail panel above the images be visible at first visit?

Reduce thumbs on image page

You can have smaller thumbnails on the image page in the top scroller area, according to the ratio specified here.

Info panel visible by default

Do you want the info panel below the images be visible at first visit?

Open by default: Photo data | Regions | Map | Selling photos

Choose which panels of the info panel to be visible at the first visit.

Show image numbers

Are the current / total image numbers to show on the Info panel?

Caption template

The caption to be displayed on the Info panel. Can contain HTML code and jAlbum variables.

With the visibility options the visitor preferences will take precedence within an hour Please note, when the visitor hides/shows a panel or change the 1:1 / Fit to window view the preference will be saved as a cookie, and this will be applied to other album pages within 1 hour. After that time the above default behavior will be applied again. When you test the local site, the cookie will not be saved in order to see what your visitor will see.

Social

Let the visitors share your album over social sites in email or ‘Like’ them.

Buttons

Facebook’s ‘Like’, Twitter’s Tweet, Google +1, or Tumblr buttons with counters, where available. The visitor need to be signed in to the site to be able post his/her like.

Share on

The sites you can share on your photos:  Facebook,  Twitter,  Digg,  Delicious,  MySpace,  StumbleUpon, Reddit, or via email.

Commenting

Enable Facebook commenting

Turn on to enable Facebook commenting application on the index pages

Facebook App ID

The App ID can be copied from this page. In order you able to use this tool, you need to create a new app on that page + Create new app.

Number of posts to show

By default Facebook shows the 3 most relevant posts only, but visitors can click on the Show more button any time to see more posts. You can control the number posts to be show initially with this setting.

Please note, that Facebook’s share function can’t always fetch the album thumbnails. Make sure to fill in the Advanced / Upload path box before you Make the album. Use the path without and ending slash if you are uploading an album to the folder named same as the album name, or use the full path with ending slash if you are uploading to a differently named folder.

Please note, Facebook does not sort the messages by date, instead it tries to figure out the “importance” of the posts, and puts the most relevant ones on the top.

Photo data

Normally several extra data is attached by the camera (Exif) about the exposure parameters, like ISO vlaue, focal length, lens, etc. You can also attach many data by yourself to pictures using the Iptc or Xmp standards using image toools, or simply by Windows / Properties.

Show regions (Face tags)

You can add face (or area) tagging to photos in Picasa or Windows Live Photo Gallery. Make sure to turn on Tools / Options / Name tags / Store name tags in photo in Picasa before you start tagging the photos, otherwise they will not be saved into the pictures. If you have concerns about Picasa writing back Xmp tags to your originals, please make a backup first, or do it on duplicates. You can control which folders to use in Tools / Folder manager.

Show photo data

Global switch if to show the embedded Exif, Xmp or Iptc data in photos

Metadata to display

The metadata labels to look for. Separate them by commas ‘,’. If you need only one value from similar fields use the pipe symbol ‘|’ to group them. The first found value will be displayed.

Show with label

Show only the value, or show along with its label. E.g. 17-55mm or Lens:17-55mm

Here is the original setting in case you need to restore:Copy and paste back to Jalbum.

Map

In Turtle you have two options to attach GPS location to pictures. You can add the coordinates the traditional way using some GeoTagging application, like Picasa, or simply add the coordinates within Jalbum.

Show map if GPS coordinates found

Show a Google Maps map with each photo holding GPS data.

All photos

All placemarks will placed on map, with the current one highlighted. You can also click through the placemarks to see the other photos.

Initial view

You can choose: Road map, Satellite, Hybrid and Terrain

Initial zoom

Zoom level: 0=Earth view … 20=highest zoom (dafault=18)

Geotagging with the skin

In Turtle you can attach GPS coordinates to your photos.

Location (lat, lon)

You can add a coordinate to any picture by using the Image Data -> Location box in the bottom right corner (Edit mode). Use Google maps GPS format: 00.0000, 00.00000. Eastern and Southern coordinates should be preceeded with ‘-‘ sign.

Find the exact coordinates in Google Maps then click the “Link icon” and find the coordinates in the link, &ll=0.123456,-9.87654. Copy only the numbers (separated by a comma) to the location box.

Please note, the coordinates will not be saved to the photo, they will be available only in the current album.

Selling photos

Shopping Cart

Add a smart shopping cart to your pages

Global switch for the shopping cart integration. Please note, that this feature works only if you have a Premium or Power account or have a PRO license.

Gateway

The payment processor site. You can currently use Paypal or Google Checkout.

Seller ID

Your Paypal ID (your email used with PP) or Google Checkout seller ID (14 digits). You need to sign up with the payment site first. Please note, that due to a jAlbum anomaly you need to add your Google ID with a ‘=’ or ‘*’ as first character.

Currency

Choose the currency, or give the 3 letter currency code if not found in the list.

Overall handling

An overall handling fee added only once per finished cart. You can use this as Package and Posting fee.

Quantity cap

If you want to limit the number of items can be bought by a customer put a number here. (0 or empty = unlimited) If you put 1 here there will be no quantity box with the shopping cart.

Shopping options

Put the options in separate lines. Use this format: Option name=price+shipping Please never use the currency sign here, as Paypal allows specifying the currency only in the currency field.

Adding individual shopping options to pictures

You can add individual shopping options to pictures at the Image data -> Shop options box in the bottom right corner in Edit mode (see at Maps section). For pictures with no individual data the defaults will be used from the Selling photos panel, see above.

Fotomoto

Fotomoto is a web application by which you can sell Prints, Posters, Downloads, and let users send eCards. In order to use their service you need to Sign up with them first.

Use Fotomoto

Turn this on if you want Fotomoto integration added

Seller ID

Your unique store ID – copy it from your Fotomoto Settings page.

Audio and video

Auto start videos

Shall the videos start automatically, or only after clicking the play button.

Video size

The pixel dimensions of the videos. You can specify the video sizes individually (if they are different) in the Edit Mode -> Image data -> Video size box.

Auto start music

Shall the audio files in the album start automatically?

Background music

Add background music to your albums. If you want the music scaled for web use, prease trasncode the MP3 file first to e.g. 96 kbit/s, joint stereo. This can reduce the music file size (and load time) the fourth of the original size.

Use album audio files as background music

If you select this option all audio files will be used as background music, and will be taken out of the normal album files.

Auto-start

Would like the background music start automatically upon page load?

Loop

Shall the background music start over after the last song?

Advanced

Enable mouse wheel navigation

You might want to disable if the album will be embedded in another page to avoid conflicts. In Turtle the mouse wheel action is rendered to previous / next image, but this can be annoying if you just want to scroll the outer page.

Enable keyboard navigation

You might want to disable the keyboard if the album is embedded into another page.

Right click protect

Disables the right-click action on the images (only).

Preformat texts on pages, album info and footer

Apply formatting (*bold*, +italic+, _underline_, etc.) to texts or leave the content untouched. Turn this box off if you wish to use HTML or Javascript content in these boxes.

Copy folder thumbnails to current level

With this setting on Turtle will copy all the folder thumbnails to the current level’s “thumbs” folder. This is useful when you want to password-protect your sub-albums. Without this setting the visitor would be asked for the password even on the upper level page. Please note, when building the album from fresh, you might end up in broken thumbnails – please press “Make” again to let Turtle copy the appropriate thumbnails.

Add ALT tags for search engines

Being Turtle a dynamic skin, that is swapping the images only on user request, search engines can only find your images if the thumbnails hold all the information attached to a specific image a static way – using the so-called “ALT” tag which is the text representation of an image in the HTML standard

Google Site ID

Entering your site id here the album will contain the code necessary for Google Analytics, to track traffic on the page. Acquire the ID here.

Upload Path

Leave empty if you upload your album to jalbum.net. If you upload to your own site you need to set this path in order some social sites can pick up the album thumbnail. You can leave this field empty if you are uploading to your site root. If you are using as folder name something other than the album name, just add a slash character at the end ‘/’, e.g. ‘albums/album1/’. If you are using the default folder name jalbum offers, e.g. ‘My%20album’ you only need to specify here the parent folder’s path, e.g. ‘albums’.

Debug mode

Turtle starts in debug mode, so all javascript code can be debugged. Useful if you have a javascript error, and want to debug / report it.

Variables

Variables to report on jAlbum’s System Console (F7). You can leave empty.

Code to add

You can attach any valid HTML code to the end of the HEAD and/or the BODY section. This is useful for adding external libraries, e.g StatCounter code. You can also add custom styles in the CSS box, that will be appended at the end of the style sheet, so you can easily hack the default styles.

Rendering custom content to a picture

You can add almost any content to an album with this feature. Just add a picture to jAlbum to represent the custom content, then go to Edit mode and find the External panel in the bottom right corner.

Add a YouTube video embedded in an iframe, add a link to an external site, or simply copy/paste some HTML code here.

Box size

Specify the box size for the content here. If you are using an iframe, object or embed tag here, the skin will read its width and height, so you can safely leave this box empty.

Leave a Reply