How do I put some texts on a photo and have control of font and size?

ouki · September 28, 2013

Smugmug.com has the perfect example of what I want to do.
A single stretchy photo filling the width of the browser, with some text on it. I'd like to be able to control the font size per line, and put a clickable textbox like "try it now". How do I do this?

ouki · September 29, 2013

brandofamily · September 29, 2013

ouki wrote: »

Smugmug.com has the perfect example of what I want to do.
A single stretchy photo filling the width of the browser, with some text on it. I'd like to be able to control the font size per line, and put a clickable textbox like "try it now". How do I do this?

I use the following code to put a piece of text on my images when I hover...

http://www.brandolinoimaging.com/Image-Galleries/My-Portfolio/Views-Choice/Viewers-Choice

/*Hover Notice on SM Gallery Thumb Image*/
@media only screen and (min-width : 1224px) {
.sm-user-ui .sm-gallery .sm-tile-photo a:hover:after {
content: 'Click to Enlarge ' !important;
z-index: 9999 !important;
position: absolute;
bottom: 0px;
left: 0px; 
font-size:10px;
background-color: rgba(0, 0, 0, 0.7);
padding: 6px;
border:solid 2px #8f7b62;
border-radius: 10px;
overflow: visible;
  } }

/*Hover Notice on SM Gallery Main Image*/
@media only screen and (min-width : 1224px) {
.sm-user-ui .sm-gallery .sm-gallery-image a:hover:after {
content: 'Click on Image to Enlarge ' !important;
z-index: 9999 !important;
position: absolute;
bottom: 0px;
left: 6px;
font-size:12px;
background-color: rgba(0, 0, 0, 0.7);
padding: 6px;
border:solid 2px #8f7b62;
border-radius: 25px;
overflow: visible;
  } }



/*Hover Notice on Collage Landscape Style Gallery Images*/
@media only screen and (min-width : 1224px) {
.sm-user-ui .sm-gallery-roworganic .sm-gallery-images .sm-tile a:hover:after {
content: 'Click to Enlarge ' !important;
z-index: 9999 !important;
position: absolute;
bottom: 0px;
left: 10px;
font-size:8px;
background-color: rgba(0, 0, 0, 0.7);
padding: 6px;
border:solid 2px #8f7b62;
border-radius: 25px;
overflow: visible;
  } }


/*Hover Notice on "Multiple Photos" Block Thumb Image*/
@media only screen and (min-width : 1224px) {
.sm-user-ui .sm-page-widget-images .sm-tile a:hover:after {
content: 'Click to View in Home Gallery ' !important;
z-index: 9999 !important;
position: absolute;
bottom: 0px;
left: 6px; 
font-size:10px;
background-color: rgba(0, 0, 0, 0.7);
padding: 6px;
border:solid 2px #8f7b62;
border-radius: 25px;
overflow: visible;
  } }

ouki · September 29, 2013

brandofamily wrote: »

I use the following code to put a piece of text on my images when I hover...

http://www.brandolinoimaging.com/Image-Galleries/My-Portfolio/Views-Choice/Viewers-Choice

Thanks for your tips. I'd rather having the text independent from mouse behaviors. I'd like to put some text on the center of the photo, either clickable or not. Similarly, a clickable text block like "try it now" would be nice. Haven't figured out how to do it...

brandofamily · September 29, 2013

ouki wrote: »

Thanks for your tips. I'd rather having the text independent from mouse behaviors. I'd like to put some text on the center of the photo, either clickable or not. Similarly, a clickable text block like "try it now" would be nice. Haven't figured out how to do it...

You can adjust the code the put the text there permanently. And I assume you could put a link in there using the correct html and CSS code. You will have to ask around on that one though.

ouki · September 30, 2013

Still having trouble getting it to work. Can someone show me an example putting text on a single photo?

Hikin' Mike · September 30, 2013

brandofamily wrote: »

I use the following code to put a piece of text on my images when I hover...

http://www.brandolinoimaging.com/Image-Galleries/My-Portfolio/Views-Choice/Viewers-Choice

I don't see any text when I hover your images.

brandofamily · September 30, 2013

Hikin' Mike wrote: »

I don't see any text when I hover your images.

What browser and screen resolution? I know part of the code is set up to make the text not show on smaller screens as it will cover too much of the image...

Hikin' Mike · September 30, 2013

Firefox on a 1024 x 768 monitor.

brandofamily · September 30, 2013

Hikin' Mike wrote: »

Firefox on a 1024 x 768 monitor.

I don't know why but this code is in there (I didn't write the code) but I think it limits viewers if screen is too narrow...

[SIZE=4]@media only screen and (min-width : 1224px)[/SIZE]

brandofamily · September 30, 2013

Hikin' Mike wrote: »

Firefox on a 1024 x 768 monitor.

Try removing that line from my code using the web tools and see it the text shows up for you.

edit: I changed my screen resolution to match yours and the text does not appear... it's the code...

Edit #2... Mike did you see any images in that gallery?

leftquark · September 30, 2013

ouki wrote: »

Still having trouble getting it to work. Can someone show me an example putting text on a single photo?

If I understand correctly you want to place text over a background image ... it sounds like you want the photo to fill the entire page. So first...

1) Under Customizer, "Theme" tab, click the wrench icon under "Active Theme.
2) Under the "Background" tab, select a photo.
3) Set the following options:
Photo applied to: Entire Site
Photo size: X3 (or Original?)
Scale: Fill
Repeat: none
Scroll background: fixed
Click done
4. Under the "Content" tab in the customizer, go to "HTML & CSS" and drop an HTML block into the center of your page.
5. Add the following code:

HTML:

<div class="someText">
  Stunning Photo Websites.<br>
  <span style="font-size: 14px;">Find out at <a href="http://www.smugmug.com" target="_blank">SmugMug.com</a>.</span>
  <form action="http://www.smugmug.com">
    <button class="sm-button sm-button-size-small sm-button-skin-accent myButton">
    Try it Now
    </button>
  </form>
</div>

And CSS:

/* Set the font settings of the entire block */
.someText {
  font-family: 'Open Sans Condensed';
  font-size: 36px;
  color: #FFF;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Set the link color */
.someText a {
  color: gray !important;
}

/* Set the link hover color */
.someText a:hover {
  color: white !important;
}

/* Set the button color */
.myButton {
  background-color: blue !important;
  border-color: blue !important;
}

/* Set the button hover color */
.myButton:hover {
  background-color: green !important;
  border-color: green !important;
}

You'll need to customize the HTML and CSS for whatever fonts, font-sizes, font-colors, hover colors, button colors, etc.

ouki · September 30, 2013

If I understand correctly you want to place text over a background image ... it sounds like you want the photo to fill the entire page. So first...

No, I did not mean the background image. I would like to be able to have text on individual photos. Just as shown in screanshot.

leftquark · September 30, 2013

ouki wrote: »

No, I did not mean the background image. I would like to be able to have text on individual photos. Just as shown in screanshot.

So place a "Single Photo" content block on your site.

Then use the same exact code I gave you above but replace the first set of CSS with:

/* Set the font settings of the entire block */
.someText {
[COLOR="Red"]  position: absolute;
  top: 200px;
  left: 0px;
  width: 100%;[/COLOR]
  font-family: 'Open Sans Condensed';
  font-size: 36px;
  color: #FFF;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

Adjust the "top" accordingly.

How do I put some texts on a photo and have control of font and size?

Comments