Add Text and Links on a Photo on Your SmugMug Site

There may be a time that you want to display some text and maybe a link on top of a single photo. There are two ways to do it and I'm going to show you both.

The first option is to use a Single Photo Block. You can either use the Title or Caption, or both. The only difference is formatting. If you're going to use a link, you must use the Caption and you need to know how know basic HTML. Depending on you needs, you might want to create an unlisted gallery to upload those special photos.

If you have more than one paragraph that includes a link(s), you must wrap the paragraphs in a <p></p> to create a paragraph space. If you are NOT using a link in any paragraph, you can just add a new paragraph without anty problems.

So with that, drop a Single Photo Block into your page. The only important style on the Single Photo Block is the Info Style. Set it to "Bottom Bar".

Next drop in a CSS Block into your page, I put my CSS Blocks on the top of the page. Once you've got your CSS Block, add this bellow. In this example I included both the Title and Caption. I included the CSS for styling just the Title, but didn't add any code.

CSS


/*
* Adds Text/Links on a Single Photo
************************************************/
	/* Positioning and Text Box Sizing */
.sm-user-ui .sm-tile-single {
	position: relative;
	display: inline-block;
}  

	/* Title and Caption Container */
.sm-user-ui .sm-tile-content > .sm-tile-info {
	position: absolute;
	bottom: 30px;
	left: 30px;
	width: 50%;
	background: rgba( 0, 0, 0, 0.7 );
	border: 5px solid red;
	color: gray;
}
	
	.sm-user-ui .sm-tile-content > .sm-tile-info:hover {opacity:1;}
	
.sm-user-ui .sm-tile-content > .sm-tile-info a {color: red;}
	
	.sm-user-ui .sm-tile-content > .sm-tile-info a:hover {color: white;}
	
.sm-user-ui .sm-tile-content > .sm-tile-info .sm-tile-title {color: white;}
	
	/* Single Photo Styles */
.sm-user-ui .sm-tile-single.sm-tiles-uncropped .sm-image {
	box-sizing: border-box;
	background: white;
	padding: 10px;
	border: 5px solid black;
}
/* Adds Text/Links on a Single Photo End */

Using a HTML/CSS Block

Image Title

This is a caption. Here is a link within a caption.

This is another paragraph using a <p> tag.

This is a bold text. This is an italic text.

The second option is to hand-code your text and image on a HTML/CSS Block. Add a HTML/CSS Block and add the following HTML and CSS below. Then replace the 'Your-Photo-URL-here.jpg' by using the Share link on your SmugMug site. Then replace the Alt tag that says 'Image ALT Here' to something to describe the photo.

HTML


<div class="image-wrap">

	<img src="Your-Photo-URL-here.jpg" alt="Image ALT Here" />	
		
	<div class="inner-wrap">
	
		<h3 class="image-title">Image Title</h3>
	
		<p>This is a caption. Here is a <a href="#">link </a>within a caption.</p>

		<p>This is another paragraph using a <p> tag.</p> 

		<p>This is a <strong>bold text</strong>. This is an <i>italic text</i>.</p>
	
	</div>	

</div>

CSS


/**
* Adds Text/Links on a HTML/CSS Block
************************************************/
/* Image Container */
.image-wrap {
	position: relative;
	display: inline-block;
}

/* Image */
.image-wrap img {
	box-sizing: border-box;
	max-width: 100%;
	width: auto;
	background: white;
	border: 5px solid black;
	padding: 10px;
}

/* Text */
.inner-wrap {
	position: absolute;
	bottom: 30px;
	left: 30px;
	text-align: left;
	width: 50%;
	padding: 10px;
	background: rgba( 0, 0, 0, 0.7 );
	border: 5px solid red;
}

	.inner-wrap p {color: gray;}

	.inner-wrap a {color: red;}

		.inner-wrap a:hover {color: white;}

	.inner-wrap h3 {color: white;}

/* Adds Text/Links on a HTML/CSS Block End */

Add Text and Links on a Photo on Your SmugMug Site

Using a Single Photo

CSS

Using a HTML/CSS Block

Image Title

HTML

CSS