Configuring a Photo Mosaic

Guides

The photo mosaic script ( jquery-sortable-photos.js ) is automatically included as part of the gigatrees plugin and therefore included in all themes. You can use this small utility to include photo mosaics in your blog posts (or GEDCOM notes/sources). Any number of images can be included in a photo mosaic, and any number of photo mosaics can be included on a page.

Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)
Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)
Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)
Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)
Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)
Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)
Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)
Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)
Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)
Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)
Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)
Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)
Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)
Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)
Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)
Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)
Sample Title, Sample Caption, September 2018, Huntington Beach, California, Sample Note (provided by Photo courtesy of Tim Forsythe)

First, each photo was added to the Media Library. I prefer using the cloud platform, Imgur, for hosting photos, so I used the imgur placeholders (also included as part of the gigatrees plugin) to enter my image URLs. You could enter the complete image URLs if your prefer. The first image is shown here as an example.

<Media>
  <Image>
    <Id>      PM1                                      </Id>
    <Title>   Sample Title                             </Title>
    <Caption> Sample Caption                           </Caption>
    <Large>   <![CDATA[ <imgur>MMcxidj<il></imgur> ]]> </Large>
    <Medium>  <![CDATA[ <imgur>MMcxidj<im></imgur> ]]> </Medium>
    <Small>   <![CDATA[ <imgur>MMcxidj<is></imgur> ]]> </Small>
    <Thumb>   <![CDATA[ <imgur>MMcxidj<it></imgur> ]]> </Thumb>
    <Credit>  Photo courtesy of Tim Forsythe           </Credit>
    <Note>    Sample Note                              </Note>
    <Place>   Huntington Beach, California             </Place>
    <Date>    September, 2018                          </Date>
  </Image>
  ...
</Media>

Next, HTML Extensions were used to add the <gallery> placeholder. Then each photo was included in the gallery using the <picture> placeholder and Embedded References. The #gallery option ensures that the images display properly inside a photo mosaic.

<gallery>
  <picture>{ref:PM1#gallery}</picture>
  <picture>{ref:PM2#gallery}</picture>
  <picture>{ref:PM3#gallery}</picture>
  <picture>{ref:PM4#gallery}</picture>
  <picture>{ref:PM5#gallery}</picture>
  <picture>{ref:PM6#gallery}</picture>
  <picture>{ref:PM7#gallery}</picture>
  <picture>{ref:PM8#gallery}</picture>
  <picture>{ref:PM9#gallery}</picture>
  <picture>{ref:PM10#gallery}</picture>
  <picture>{ref:PM11#gallery}</picture>
  <picture>{ref:PM12#gallery}</picture>
  <picture>{ref:PM13#gallery}</picture>
  <picture>{ref:PM14#gallery}</picture>
  <picture>{ref:PM15#gallery}</picture>
  <picture>{ref:PM16#gallery}</picture>
  <picture>{ref:PM17#gallery}</picture>
</gallery>

And, that is virtually all there is to it. You can use this feature to create mini albums of your vacation photos, or other sorts of image collections that you think your website visitors might find interesting.

Tim Forsythe
Tim Forsythe ( ) is a retired software engineer and family historian. He designs, programs and distributes free genealogy applications for your enjoyment (and his personal use). He is married and living in Santa Rosa, California.
Comments