Add Text and Links on a Photo on Your SmugMug Site
Using a Single Photo
Mammoth Peak at Sunrise
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.
Using a HTML/CSS Block
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