Add a date stamp on each photo as photo caption

❗️

REMEMBER: This will overwrite any photo caption entered!!!

In the BODY section, search for element.isPhotoElement. In this block of code, you will add the following two lines after <% value.items.forEach((item, index) => { %>

<% var dateQuery = QUERY("SELECT created_at FROM photos WHERE photo_id = '"+item.mediaID+"'") %>
<% var photoDate = dateQuery.rows[0].created_at.slice(0, 10) %>

Remove the following two lines after <figure>:
<% if (item.caption) { %>
<% } %>

then replace item.caption with photoDate.

Add latitude & longitude on each photo

REMEMBER: This will overwrite any photo caption entered!!! Also, if the photo does not have location matadata, it will shownull.

In the BODY section, search for element.isPhotoElement. In this block of code, you will add the following two lines after <% value.items.forEach((item, index) => { %>

<% var locQuery = QUERY("SELECT latitude, longitude FROM photos WHERE photo_id = '"+item.mediaID+"'") %>
<% var latlong = JSON.parse(locQuery.rows[0].latitude)+","+JSON.parse(locQuery.rows[0].longitude) %>

Remove the following two lines after <figure>:
<% if (item.caption) { %>
<% } %>

then replace item.caption with latlong.

Align and center each photo

In the STYLES section, search for .photo-column figure class. Then remove display: inline and replace it with display: flex; justify-content: center; as shown below:

Display only the first photo attached to each photo field

Suppose you have multiple photos attached to each photo field and you want to display only the first photo on PDF report. In the BODY section, scroll down to element.isPhotoElement and remove line 264 and 274 (it loops through all photos attached). Then add <% let photoItem = value.items[0] %> to get the first photo and replace item to photoItem on line 268-270.

Modify Photo Sizes

Photo size can be modified in STYLES section under .photo-column figure img. By default, Fulcrum generates 2 portrait photos in each row. If you would like to modify the size so it can fit 3 portrait photos, you can change max-width: 49%; property to max-width: 33%. You can fit 4 portrait photos by changing max-width to 25%. If you would like to modify the size of landscape photos, you can also do so under .photo-column figure img.photo-landscape.

Remove a margin space before and/or after the photo field

Sometimes the report will generate empty spaces after attaching photos or the photos will cover other section of the report. In order to prevent this, go to the BODY section and add page-break-inside: auto; to the style="flex-direction: column;" and add style="height: 100%;" to the <div class='field-label-full'> in element.isPhotoElement block:

Remove Photo Label when there is no photo attached

In the BODY section, search for element.isPhotoElement block of code. Remove the entire block of code under element.isPhotoElement and paste the following code:

<% if (value && !value.isEmpty) { %>
  <div class='field' style="flex-direction: column;">
    <h2 class='field-label'><%= element.label %></h2>
    <div class='field-label-full'>
        <div class='photo-row'>
          <% value.items.forEach((item, index) => { %>
            <div class='photo-column'>
              <figure>
                <img class="<%= IMAGE_SIZE() %>" src='<%= PHOTOURL(item.mediaID) %>' />
                <% if (item.caption) { %>
                  <figcaption><%= item.caption %></figcaption>
                <% } %>
              </figure>
            </div>
          <% }); %>
        </div>
    </div>
  </div>
<% } %>

Add the first photo of a photo field by data name

  <div>
    <% 
      var pic = record.formValues.find('photos');
      var rid = pic.items[0].mediaID
    %>
    <div class='photo-column'>
        <img class="<%= IMAGE_SIZE() %>" src='<%= PHOTOURL(rid) %>' />
    </div>
  </div>