1. Home
  2. Customization
  3. Add full-width image to your SmugMug site with text and/or button over it

Add full-width image to your SmugMug site with text and/or button over it

Intro

I have heard so many requests about how to add either a full-width image with a text over it or a full-width image with a call-to-action button to your SmugMug site.  If you are the one who has been asking for this before – today is your day :}

Full Image with text and call to action button

Today I will show you how to add a full width image to your site with a text over it and a call-to-action button { optional }.  You can see how it looks on my SmugMug test page – here.

HTML Code

First thing, you will need to add a HTML content block to your site, where you would like for this image to appear.  In the HTML tab of the HTML content block you will need to add this code to it:

And optionally, if you do not wish to show the button – but only the text:

TIP:  Choose only one of the above options – otherwise this will not work.

As you can see – I have displayed this text over my image  BEAUTY IS A DREAM and I have used the <br> tag to put the second part of the text on the second line.

If you have chosen the first option – with a button then read below – if not, skip this section.

The code for the link looks like this <a href="http://www.photom.me">VISIT MY SITE</a> as you can see there is a link, where my visitors will be taken after they click the link and the label VISIT MY SITE that will be displayed in the button.

CSS Code

Now you need to open the CSS tab in the HTML content block and then add this code to it:

In the CSS code the only thing that you need to do is to replace the link to background image with your own image link.

Updated on March 20, 2017

Was this article helpful?

Related Articles

Comments

  1. Wow, so cool. Thank you very much! Your tips and tutorials are very helpful for me. Im building my website. Maybe you want to take a look. Im from Costa Rica, so the webpage language is spanish. http://www.carlosalonso.photo I would like to ask you something, how I can do the box you have made in your webpage below the title “Our Wedding Prices”? Do you have a tutorial for that? I do not want to be abusive, just want to know if can be posible to learn about it. Any way thank you so much!

    1. Hey Carlos. Thanks for visiting the portal and thanks for those kind words. I have not written a tutorial on those three price boxes – but I am plan to write one in the near future.

  2. Hi Tomasz! Is there a set of image dimensions that works better than others? For example, on my smugmug site (larryrogersphotography.us) I used your code for two images on my home page. The images are not the same dimensions, although both are 1:2 aspect ratio. When I stretch my browser wide, the images stretch at different rates. I would like to standardize them, (also place them in a folder without watermarks) if you think that is a good idea. One last question – is there a way to get them closer together vertically, say 4 px between the upper and lower one? Thank you so much! Check for a cup of coffee (or two)!
    Regards, Larry

    1. Hey Larry, I have checked your homepage and both images are resizing the same. Could you please clarify? I think putting those images UNWATERMARKED to an UNLISTED gallery would work best. Removing margins – you can just click CUSTOMIZE → CONTENT AND DESIGN → hover your cursor over the content block and hit the triangle icon – this will allow you to change margins of your HTML content blocks. Oh and thanks for the Coffee :}

  3. Hi Tomasz! Thank you for the incredibly helpful information. I am having trouble getting my image into the code. I have copied and pasted the link to my photo many times and it just won’t work. The result is always the pink box with the text and button. I was able to change my text just fine. The link I am attempting to use is http://www.ordinarybits.com/Gibbons/i-2HJhP7v/A. Is there something wrong with my link? Does the http:// vs. https:// make a difference? I copied the link directly from the photo, using the share button. Thank you in advance! 🙂

        1. Hi Tomasz, I’m having the same issue as gilgabesmom, replace the link with an image URL from one of my smugmug galleries and just get the pink background… any solution?

          1. Could you please send me a link to the page, where you have added the code? I will check it for you.

      1. Ignore my comment below, I was having the same problem but I found the solution to this from Tomasz in a comment under another post:

        “You are grabbing the wrong link to your image. Instead of grabbing the link to an image – you are grabbing a link that will display your image in your gallery { which will not work }.

        So first thing you need to do is to make sure that the gallery, where your image is located is either PUBLIC or UNLISTED { not password protected or private }. In the gallery settings make sure that you TURN OFF the HIDE OWNER feature – you do not need that.

        Then double click on the image that you would like to use for the slideshow → click the SHARE icon that appears below the image → choose the image size that you would like to use { for example X3Large } then copy the image link and use it in the slideshow code.”

Leave a Comment