Table of Contents       10. Export Catalogs


10.1 Web Galleries

Another great way to share your photos or other work on the Internet is to use a web gallery, and NeoFinder makes this really easy for you.

Please note that this requires a NeoFinder Business License.

Simply select the catalog or folder you want to export, and use the
Export Web Gallery command from the File menu.

As always, NeoFinder will ask you for some details:

Web Gallery Export Settings

You can use multiple templates for your web galleries. By default, NeoFinder has a very basic "Default" template, and a nicer "Sunset" template, both based on the "Table" HTML code.

Two much more flexible, and elegant templates have been added to NeoFinder 8.3. They are "Green Fluid" and "Blue Cards", which are adaptive, have a custom font, smooth animations, and an integrated lightbox. These two new templates use CSS.

You can ask NeoFinder to add any XMP metadata preset to the exported thumbnails, such as a copyright information.

Also, NeoFinder can open the finished web gallery in your default web browser, so you can immediately see how it looks.

NeoFinder will then generate a new folder with all HTML and JPG thumbnail files in it. The HTML "starter" page with the name "index.html" is also placed in this folder.

Upload this folder to your web server. A very nice FTP tool that we can recommend for this job is
Cyberduck.

Here is a sample NeoFinder Web Gallery of "Blue Cards:
https://www.cdfinder.de/gallery/BlueCards/

And this is "Green Fluid":
https://www.cdfinder.de/gallery/GreenFluid/


We hope you enjoy this cool new feature!


Use iView Media Pro Templates
NeoFinder does this now by using a web gallery template folder, and it uses very much the same format that the deceased iView Media Pro used. If you already have such templates, all you need to do is rename the template folder to add a
.NeoFinderWebGallery suffix. That is needed for NeoFinder so it knows what that folder contains.

If you drag one such folder on the NeoFinder icon in your Dock, NeoFinder will automatically copy that folder to

/Users/yourname/Library/Application Support/NeoFinder/Web Gallery Templates/

All such templates are shown in the Template menu, below the divider line.



Here, we have added all iView Templates to NeoFinder by renaming their folders and dropping these on the NeoFinder icon in the Dock.

All Template folders have the same basic layout:


The assets folder is copied entirely to each created gallery folder by NeoFinder. It contains images and scripts needed for the HTML pages.

The
index.html page is used by NeoFinder to create the index page.

For each item in that index page, NeoFinder also creates a details page, based on the file
media.html.

The additional
about.jpg file is displayed by NeoFinder in the dialog above, so the user can already see what the resulting web gallery will look like.

When building these pages, NeoFinder will replace certain HTML commands in the template pages with the actual values.



Example: Modify "Blue Cards"

The two new templates from NeoFinder 8.3 are also available for download separately here. Please note that using these requires at least NeoFinder 8.3.

Green Fluid:
https://www.neofinder.de/downloads/Green%20Fluid.NeoFinderWebGallery.zip

Blue Cards:
https://www.neofinder.de/downloads/Blue%20Cards.NeoFinderWebGallery.zip


To customize "Blue Cards", first make a copy of the folder "Blue Cards.NeoFinderWebGallery", and use a different name, like "Blue Cards Test.NeoFinderWebGallery", or similar.

Anything before the ".NeoFinderWebGallery" suffix will show up in NeoFinder as the name of this template.

Open the index.html file in the template folder with a proper HTML editor. Programs like Word or your web browser are not suitable for editing HTML source code. We recommend using
BBEdit for this.

We have added comments to the crucial lines.

In line 45 you will find the HTML color for the background color of the title area
background-color: #578ad6; /* Background color, here a nice blue tone */

In lines 75 and 76 you will find the height and width of your images in the preview.
width: 280px; /* The width of one card in px. If you change this, make sure to also change .centerImageFrame below */
height: 500px; /* The height of one card. All cards have the same size */

Please note that also from line 89 on this information must be changed, so that the animation and scaling works.
.centerImageFrame
{
width: 280px; /* must be the width of .gallery ! */
height: 280px; /* for a square thumbnail, use the same value as the width */

Finally, starting from line 239, you will find the pixel size of the "large" image that NeoFinder will generate.


Please note that NeoFinder always uses the preview of your image from the catalog for this, so this should also be selected large enough when cataloging!

Save the change in the Index.html file, and drag the entire template folder to the NeoFinder icon at the bottom of the dock, and NeoFinder will move your new template to the folder specified above, so they could use the template immediately.



Technical specification in details

The template files contain specially marked placeholder values that are replaced by NeoFinder with the actual data. A placeholder looks like
(NeoFinder:Filename)
or (NeoFinder:Author)
The brackets () are needed for the placeholder to work, and will be replaced by the actual value of that field.

For compatibility with the old iView templates, placeholders with that name are also recognized, such as
(iView:Writer)

A list of all placeholders currently recognized, and their meaning:

(NeoFinder:FileName) Name of the file or folder in the file system
(NeoFinder:FileSize) File or Folder size
(NeoFinder:Comment) Comment
(NeoFinder:Date) File creation date of the item
(NeoFinder:Catalog) Name of the catalog the file is contained in
(NeoFinder:CatalogComment) Comment of the catalog the file is contained in

(NeoFinder:MediaType) File Kind of the file
(NeoFinder:Media) A link to the thumbnail file

(NeoFinder:Maker) EXIF Camera Maker
(NeoFinder:Model) EXIF Camera Model name
(NeoFinder:Software) EXIF Software
(NeoFinder:CaptureDate) EXIF Capture Date
(NeoFinder:ShutterSpeed) EXIF
(NeoFinder:FocalLength) EXIF
(NeoFinder:Aperture) EXIF
(NeoFinder:ISOSpeed) EXIF
(NeoFinder:Lens) EXIF Lens Name
(NeoFinder:Longitude) EXIF GPS coordinate (there is no separate latitude placeholder)
(NeoFinder:Altitude) EXIF GPS Altitude

(NeoFinder:Caption) XMP/IPTC Caption
(NeoFinder:Keywords) XMP/IPTC
(NeoFinder:People) XMP/IPTC
(NeoFinder:State) XMP/IPTC
(NeoFinder:Country) XMP/IPTC
(NeoFinder:City) XMP/IPTC
(NeoFinder:Location) XMP/IPTC
(NeoFinder:Credit) XMP/IPTC
(NeoFinder:Headline) XMP/IPTC
(NeoFinder:Author) XMP/IPTC
(NeoFinder:Copyright) XMP/IPTC Copyright


For navigation and more:

(NeoFinder:Total) Total number of items in the list
(NeoFinder:Running) Current index of item in the list
(NeoFinder:goNext) A link to the next item, if any
(NeoFinder:goPrevious) A link to the previous item, if any
(NeoFinder:goIndex) A link to the index page. Used in Detail pages
(NeoFinder:InMediaWidth) The width in pixel to be used for the thumbnail image
(NeoFinder:InMediaHeight) The height in pixel to be used for the thumbnail image



New in NeoFinder 7.8.1:

(NeoFinder:Rating) The star rating of the item, as a string of stars
(NeoFinder:AuthorTitle) Title of the author (also known as Byline Title)
(NeoFinder:Source) XMP/IPTC
(NeoFinder:RightsUsageTerms) XMP/IPTC Usage Terms
(NeoFinder:Path) Path of the item


Custom Annotation field contents

(NeoFinder:Field_NAME) The content of the custom annotation field with the name NAME