Add Text and Links on a Photo on Your SmugMug Site - Fine Art Prints for Sale

Add Text and Links on a Photo

Using a Single Photo

Mammoth Peak at Sunrise

Mammoth Peak at Sunrise

It was worth getting up really early and driving 3 hours to be able to photograph sunrise over Mammoth Peak.

This is the text you want to display over your image. This is the link text you want to display over your image. This is the text you want to display over your image.

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 add two <br><br> to creat 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-tiles-info-over .sm-tile-info {
	width: 50%;
	padding: 20px;
	margin: 0 0 20px 20px;
	}
	
	.sm-user-ui .sm-tiles-info-over .sm-tile-info p {
		max-height: 100%;
		}
		
	/* Title */	
.sm-user-ui .sm-tile-info .sm-tile-title {}
	
	/* Title and Caption Container */
.sm-user-ui .sm-tile-content > .sm-tile-info {
	background: rgba( 0, 0, 0, 0.7 );
	border: 5px solid red;
	}

	/* Single Photo Styles */
.sm-user-ui .sm-page-widget-content .sm-tile-single.sm-tile-center .sm-tile-wrapper {
	background: white;
	padding: 10px;
	border: 5px solid black;
	}	

Using a HTML/CSS Block

This is the link text you want to display over your image. This is the text you want to display over your image. This is the text you want to display over your image.

This is the text you want to display over your image. This is the link text you want to display over your image. This is the text you want to display over your image.

Image ALT Here

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.

This example is for the text to be justified top and left, but if you prefer it to be bottom left the easiest way to do this is to switch the <div class="image"><img src="Your-Photo-URL-here.jpg" alt="Image ALT Here" /></div> to the top of the <div class="caption">.

HTML


<div class="image-wrap">

    <div class="caption">
	
		<p>This is the <a href="//link-here.com">link</a> text you want to display over your image. This is the text you want to display over your image. This is the text you want to display over your image.</p>
		
		<p>This is the text you want to display over your image. This is the <a href="//link-here.com">link text you</a> want to display over your image. This is the text you want to display over your image.</p>
		
	</div>

    <div class="image"><img src="Your-Photo-URL-here.jpg" alt="Image ALT Here" /></div>

</div>

CSS


/*
* Adds Text/Links on a HTML/CSS Block
**************************************************/	
	/* Image Container */
.image-wrap {}       

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

    /* Captions */
.image-wrap .caption {
	position: absolute; 
	text-align: left;
	width: 50%;
	margin: 25px;
	padding: 10px;
	background: rgba( 0, 0, 0, 0.7 );
	border: 5px solid red;
	color: #fff;
	}  

Powered by SmugMug Log In