Ways to Provide Photo Credit

Question

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

KlaraSchmitt · Answer

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

AlixBakke_SNC · Answer

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!

KlaraSchmitt · Answer

#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: 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: 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