Jump to content

Add credit over image

Go to solution Solved by creedon,

Recommended Posts

Posted
Hi,

I would like to add credits on the corner of pictures on a page. I know how to do it for the banners, but I don't know how to change it for pictures in the content.
I would want to add credits to the tree pictures in that page: https://www.melissamarschke.ca/research

For the banners I have that CSS code
/*Text Based Photo Credit banner front page*/
section[data-section-id="64794e36eda473789492e4f2"] .section-background::before {
  content: "Image credit: Furqan Asif";
  position: absolute;
  font-family: 'Poppins';
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  bottom: 1vw;
  right: 1vw;
  z-index: 99999;
  display: block;
} 

 

  • Solution
Posted (edited)

Here is an idea. Use a text block overlaying the image, then alter a bit with some CSS.

ScreenShot2023-07-03at4_48_43PM.png.48dec93862b89141e0ed8a31b7025b1c.png

html:not( .squarespace-damask ) #block-yui_3_17_2_1_1688414148074_13517.sqs-block.sqs-background-enabled {

  display : block;
  height : 50%;
  padding : 0;
  width : 90%;
  
  }

There are some limitations to this as you are working within the confines of what SS provides in the Fluid Engine editor.

ScreenShot2023-07-03at4_53_58PM.png.a5d28497804b2ffe6ed72b3ac1722dbe.png

ScreenShot2023-07-03at4_52_36PM.png.d97da0a9d2b0aa51fe159634147c09c9.png

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted
1 hour ago, creedon said:

Here is an idea. Use a text block overlaying the image

Oh ya that's a great idea! Went too complicated to begin with, it's a way more obvious way of doing stuff lol. Thanks!

Posted

A pure CSS solution isn't much more complicated and would look much like your code example except it would be applied to image blocks. It would be more free form as far as styling goes.

Use whatever works best in your use case!

I updated the code so as to turn off the effect in the editor so as not to interfere with editing the text block.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.