Ways to Provide Photo Credit
#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
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!
