Select to view content in your preferred language

Ways to Provide Photo Credit

2477
3
10-03-2017 03:02 PM
AlixBakke_SNC
Regular Contributor

Hello,

What is the best way to credit a photo on your open data website? I would like to provide the credit in a row containing the image.

Thank you,

SNC

Tags (1)
0 Kudos
3 Replies
KlaraSchmitt
Esri Regular Contributor

#csstips
Hello Liz,

I would recommend adding a photo credit through a Text card if you are trying to cite a row background image or perhaps a text credit through an image caption. Here is one method for providing a photo credit on the row with a link back to the author.

1. Add image as background image to row.

2. Add Text Card with desired copy or empty Text Card with min-height set to force background to be more visible

<div style="min-height: 300px"></div>

3. Add another Text Card below the first. This will containing your citation. The second card may have a little extra padding at the bottom in Preview. (The padding comes from that card having a minimum height in Preview so you can have room to actually type within the card.)

4. For a photo credit, you may want to do something like this:

<a href="https://flic.kr/p/9U7GzU" 
style="color: white; font-size: 12px;">
  Photo Credit: Plums, El.lE Photography
</a> 
<a href="https://creativecommons.org/licenses/by-nd/2.0/" 
style="color: white; font-size: 12px;">
  (CC-BY-ND)
</a>‍‍‍‍‍‍‍‍

Many creative common images require a link to the license for which the image uses, so I have included that in my snippet above. If you wished for slight opaque text, you could also replace color: white; with color: rgba(255,255,255,0.7); which decreases the opacity of the RGB value for white to ~70%.

In your Layout Builder you should now have two text cards stacked horizontally in one row:

layout editor showing plum blossoms in row with inline image credit text

Once you save your site and view it live, you should see the extra padding around the citation link go away and you will get something like this:

live site showing row background image, text, and text image citation

Another popular alternative is to include photo credits and links in your footer, but since you asked to be able to do it in the row, that's what I have provided here. I hope you find it helpful.

-Klara

AlixBakke_SNC
Regular Contributor

Klara,

Thank you very much for your timely and detailed response. Your expertise and help is greatly appreciated. 

The image below illustrates what the photo citation looks like after implementing one of your suggestions. Specifically, I add the citation using a text box underneath the title of the site.

Is there any way to get the text box to move further to the left, or is its default location the farthest it can go?

Thank you!

0 Kudos
KlaraSchmitt
Esri Regular Contributor

Hi Liz,

Unfortunately, yes, that's about as far left as it can go. Our site template is built using a fixed-width layout of 1170px rather than a fluid-width layout. While we support fluid-width rows, so that folks can have full bleed background images, we generally avoid having content fluid-width as fluid sites can be harder to design and aren't as popular.

Thank you,

Klara

0 Kudos