Overlaying text on an image...possible or not?

OrchardHouse

Hello everyone, apologies if this has been asked already - I had a look but failed to find out if this was already on the forum.

Does anyone know if it's possible to place text over an image in smugmug (just like on their own homepage www.smugmug.com) without having to edit the original image with text?

My website is at www.daveblackphotography.co.uk and I am considering changing it for a more modern long scroll type page. I have a little test going on here www.daveblackphotography.co.uk/Test

Thanks for any assistance!

Dave

photoclick

Yes, it is possible. Check my websites to see examples. The actual css might be different in each particular case depending on where the text should go and how it was written - so I am not giving any exact solutions here:) The basic idea is this:

> Write text in the Title of the image (or even in the Caption)

> Use Single Photo widget to display the image

> Set Info Style of the widget to Bottom Bar

> All text will be held in the .sm-tile-info class. So, depending how and where (within the image) you want to see the text, you simply manipulate position and other properties of the .sm-tile-info class. For instance I do this - remove background color so text stays right on top of the image, stretch the height to 100% so the text is in the middle vertically, push the text a bit to the right with the padding:
.sm-tile-info{
background-color: rgba(150,150,150,0)!important;
height: 100%;
padding-left: 31%;
padding-right: 3%;
}


Hope this helps,
mike

OrchardHouse

Hi Mike, thanks so much for the reply - I knew there must be a better way than stamping the original image in photoshop or overlaying a transparent watermark!!

Cheers,

Dave

www.daveblackphotography.co.uk

OrchardHouse

Mike, there's a few features on your site which really interest me and it actually has the layout / look that I was trying to head for!

So if it's ok, once I've got stuck into the coding, I might come back to you with a few more questions...

Lets see how it goes!!

Dave

photoclick

Absolutely. Let me know when you have some specific questions.

pekr

Sorry to reopen the topic, but I must be missing something. What is the technical reason to actually not allow to overlay text over the image? I wanted to do a custom blog using Smug and experimented with various designs (as per my Smugmug customisations thread post). I was interested in the following set-up though:

I simply created a HTML section beneath the image and shifted the content block offset. During the design phase, the text is visible, hence my screenshot. But once published, it goes behind the image. My question is now twofold:

1) Why on Earth is that like that, that text goes under the image? Why is that visible during the design phase then, but not once published? Shouldn't it be considered being a bug in fact, unless I am missing some deep architecture consequences?
2) Is there any technical way, of how to get it above the image? Tried with the CSS z-index property field, but most probably I am not constructing a Class identfier correctly and something like .my-text-overlay for my DIV tag is not enough ...

Thanks for any pointers,
Cheers,
Petr

Hikin' Mike

@pekr said:
Sorry to reopen the topic, but I must be missing something. What is the technical reason to actually not allow to overlay text over the image? I wanted to do a custom blog using Smug and experimented with various designs (as per my Smugmug customisations thread post). I was interested in the following set-up though:

I simply created a HTML section beneath the image and shifted the content block offset. During the design phase, the text is visible, hence my screenshot. But once published, it goes behind the image. My question is now twofold:

1) Why on Earth is that like that, that text goes under the image? Why is that visible during the design phase then, but not once published? Shouldn't it be considered being a bug in fact, unless I am missing some deep architecture consequences?
2) Is there any technical way, of how to get it above the image? Tried with the CSS z-index property field, but most probably I am not constructing a Class identfier correctly and something like .my-text-overlay for my DIV tag is not enough ...

Thanks for any pointers,
Cheers,
Petr

Best way to help you is to post your site/page in question.

pekr

OK, thanks. Created a testing blog site here:

http://studio.2zone.cz/Blog/2017

The image in question is the bottom/big one. When I go in the edit mode, the text overlay (done via html content block) is displayed over the image. Not so, once I publish ...

Thanks a lot,
Petr

photoclick

I am not going to go into details why it works in design mode and does not when you publish, but the reason it's not showing when published even when you set the z-order is because the text block is positioned statically. Static elements ignore explicit z-order. You can try changing it to relative:

    .sm-page-widget-17665915  {
    position:relative;
    z-order:13;}

But it still will not give you the best result. Simply try resizing the browser window and you can observe the text does not "stick" to the image. I believe you will get much better results by using the Caption and/or Title approach.

Hikin' Mike

Or something like this. Add a HTML/CSS block. Add this to your HTML:

<div class="image-wrap">

    <div class="caption">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.</div>

    <div class="image"><img src="your-picture-here.jpg" alt="Image ALT Here" /></div>

</div>

Add this to the CSS:

/* Image Wrap */
.image-wrap {
    }       

    /* Image */
.image img {
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    }

    /* Captions */
.image-wrap .caption {
    position: absolute;
    margin: 1% 0 0 1%;
    padding: 1%;
    width: 75%;
    text-align: left;
    color: #fff;
    background: rgba( 0, 0, 0, 0.5 );
    }       

pekr

Thanks guys!

@photoclick - Title and Caption are not an option here, as those don't allow free formatting, nor links ...

@Hikin' Mike - Thanks a lot for an example. If my understanding is correct, I would have to construct everything in terms of the html source code, including the image. My intention was to try, how far I can get with using a simple aproach. My suggestion will come to more than one user locally, and overcomplicated scenarios as chasing classes in terms of source code (photoclick's example), are not an option. The second (yours) suggestion seems to be more isolated, will give it a few thoughts ...

Adapted it here:

... but I got a bit of a difficulcy to identify the image URL, as my studio co-partner creates keywords for me and I gather many of images dynamically. However, for the blog article purpose, I could copy them to some resource folder ....

Thanks again for your suggestions guys. Pity such simple stuff could not work as a natural part of the Smug CMS system, moreso, if during the editing phase, it just works, just not once published ....

photoclick

@pekr -I totally agree - it's a shame SM makes us jump through all these hoops to do such a common thing But I disagree that Caption/Title does not allow formatting and link. Look at this front page http://www.tailoredportraits.com . I can do any formatting I want in both Caption and Title. Once you place HTML in either of these fields the underlying html changes - you have to inspect the code. But once you see how it works you are able to use CSS block to control how exactly Title and Caption appears.. including links. The good part is - it always stays within the image boundaries.

Hikin' Mike

I tried @photoclick method but it didn't work at first. In my case, I hide the captions in CSS. Once I removed that, it worked fine. You'll probably want a different title/caption for the blog entry photo.

In my method, you'll only have to add CSS once on your theme's CSS, but you'll have to jump over a few loops to use a HTML/CSS block. Doing @photoclick method you'll have to add the CSS on each page, but easier to pull the photo from your gallery using a photo block.

pekr

@photoclick What do you please mean by the Caption/Title? Title of the Image? Title as a Text content photo? How I can make it a link? In Text section, I can make a link, but in the Title, I ca't ... I have to be missing something :-)

photoclick

@pekr - oops, sorry, I misspoke. You are correct - the Title field of a photo does not allow any html elements, so link is impossible there. Only the Caption field (still?) allows html tags, so <a> tag is ok there.