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 :}
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.
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:
For both this and the Hero Full Screen Header with mouse scrolling blog you created, is there a way to move the text either lower on the photo or to the left/right? See the example here: http://www.vividvisuals.asia. I’d like the text to be either in the negative space to the left of the person in the portrait or below the face just above the mouse scroll. Will buy coffee for your help!
I have replied to your message when you contacted SmugMug support heroes.
Also, further to my comment above, is there a way to get the full screen header to extend behind the menu / logo like it is on yours?
Good day Tomasz. I want to implement this, but I don’t get it to work. Problem seems to be with the direct link to one of my photos (the button appears allright, but the image behind the button doesn’t appear. When I use the direct link into a new browser window, what I think it is, the image does appear. How can `I find direct image links to one of my smugmug photos
You have to be logged to your SmugMug account → open your image in the lightbox view → click the share icon → choose EMBED → PHOTO SIZE – pick your size → click COPY JPEG URL. See my screenshot: https://cloud.photom.me/bPwoOSH
Hi Tomasz !
I just want to give you a big big thanks for posting this Hero code !! 🙂
I love it & had been looking for it for a couple of weeks before I came across your post !
I in fact have wanted multiple “hero” images & text on my home page, so I’ve just duplicated the CSS text (changing the image url each time) within each of the multiple HTML blocks that I’ve added.
Seems to work just fine !
Big thanks once again !
Jon.
Perfect! I am glad this helped you.