Text overlay photograph

FairyGodmother · May 8, 2015

Hi lovely people willing to help, :lust

Is there any way to get a photo behind the text block (or text block overlay the photo)?

I know I could Photoshop the text onto the photo but then the text is not helping with search engines and there will be issue to get the same font across the website..

There are 8 photographs on my page that need to be altered with a text block overlay.

I would like the photos are as wide as the rest of the photos/texts of the webpage (with alignment to the left -100), but the text fills empty (negative) space of the photo.

I would appreciate the response for total dummy in coding as my coding skills are at Scratch entry level (my 6year old is much more advance there). :rolleyes

Thank you in advance, :bow

Zane
example http://www.thefairygodmotherproject.co.uk/Client-Galleries/Portfolio/Temporary/n-9h8LvP/i-g4SbMRs/A
http://www.thefairygodmotherproject.co.uk/Client-Galleries/Portfolio/Temporary/n-9h8LvP/i-pJ3qw2h/A
http://www.thefairygodmotherproject.co.uk/Client-Galleries/Portfolio/Temporary/n-9h8LvP/i-2D4QqdC/A

Lille Ulven · May 8, 2015

Hi Zane.

If I assume correctly from your example you have a html page with some text and some photos, where the photos are linked via img-tags?
If this assumption is true then (considering smug mug allows the next html and css commands) yes, it should be possible.

You would need:
div tags around your img-tags which use a css-class to position your text and span-tags for your text.

Your css-class could look something like this:

.photo_with_text_left {
   width:320px; /* or what ever width your photo has */
   position: relative;
   /* only for testing if the html and the css are fitting, later to be removed*/
   border: 5px solid red; /* if the frame goes around the photo you can remove this line */
}

.photo_with_text_left {
   width:320px; /* or what ever width your photo has */
   position: relative;
   /* only for testing if the html and the css are fitting, later to be removed*/
   border: 5px solid red; /* if the frame goes around the photo you can remove this line */
}

.photo_with_text_right > span {
   /* for your text positioning from the text in the span-tag*/
  position:absolute;
  width: 66%; /*assuming that you have 66% of your photo being negative space */
  text-align: left;
}

.photo_with_text_left > span {
   /* for your text positioning from the text in the span-tag*/
  position:absolute;
  width: 66%; /*assuming that you have 66% of your photo being negative space */
  text-align: right;
}

And then you would have to adapt your html code like this:

<!-- Photo with text at the right side of the photo -->
<div class="photo_with_text_right">
  <img src="photo1.jpg" width="320px" height="640px" alt="" />
  <span>Whatever text you want to place on the right side of that photo...</span>
</div>

<!-- Photo with text at the left side of the photo -->
<div class="photo_with_text_left">
  <img src="photo1.jpg" width="320px" height="640px" alt="" />
  <span>Whatever text you want to place on the right side of that photo...</span>
</div>

I think this should help you to get started, but it will most certainly need some fine-tuning.

If this for some reason does not work...
You could still add your text to the photo with photoshop and then add it in the caption-field as well. The caption field is used as the "alt" in the img-tag and with that would be findable by search engines.

Good luck

Lille Ulven

Allen · May 8, 2015

I would think it would be much simpler to put each block of text in a div then give each div
a different background using the photos.

photoclick · May 9, 2015

.. and the simplest way:
1. Write your text in the Caption field of the image. You can use html to format the text any way you wish.
2. Depending what content block you host your image, make sure the Info Style is "Bottom Bar" and not autohiding.
3. Use CSS to control the position of the entire text area on the image.

This way you do not need to worry about any extra element - the text will always be with the image.

FairyGodmother · May 11, 2015

photoclick wrote: »

.. and the simplest way:

3. Use CSS to control the position of the entire text area on the image.

Thank you all for your time and thought! I appreciate so much!

I think the Photoclick suggestion sounded most reasonable. And I was able to follow till the 2nd point.

I copied the text in the title of the image and now I got first line of the text at the bottom of the image.

Could you please extend the description on how I can introduce CSS to control the positions of the text, size, warp the text, etc... And remove transparent background of the text...

Unfortunately I don't speek Code, I appreciate if you could instruct me as for primary school kid.
The parameters for the text would be:
Text size - 14
Body font: Lustria
Text colour - #3c2f1f
wide - 640px of 960px of the image
text itself is jastified
horizontal position - can be left or right
vertical position - centred

Thank you so much!

photoclick · May 11, 2015

I am not sure what content block you are using to display the image. Perhaps it would be easier to help if you provide a link to a page.

FairyGodmother · May 11, 2015

photoclick wrote: »

I am not sure what content block you are using to display the image. Perhaps it would be easier to help if you provide a link to a page.

http://www.thefairygodmotherproject.co.uk/Stunning-Corporate-Photography

I use 'single photo' that is inbedded from a hidden gallery...

The second picture is now with a title that needs to somehow be altered... The text I wanted on that picture is 2 paragraphs above it...

Allen · May 11, 2015

Start with this. It will target all on page. Either put in "entire site" or "just this page" CSS.

   /* Stunning-Corporate-Photography */
.sm-page-node-TzmQcH .sm-tile-single p {
   font-size: 14pt;
   font-family:Lustria;
   color:#3c2f1f !important;
   overflow: visible !important;
   white-space:normal !important;
   height: auto !important;
   text-align:justify;
}

Add this also to remove the background.

.sm-page-node-TzmQcH .sm-tile-single .sm-tile-info {
background: none !important;
}

Allen · May 11, 2015

You can target each block individually using its widget ID and position the text.

[COLOR=Red].sm-page-widget-10327066[/COLOR] .sm-tile-single p {
   font-size: 14pt;
   font-family:Lustria;
   color:#3c2f1f !important;
   overflow: visible !important;
   white-space:normal !important;
   height: auto !important;
   text-align:justify;
   [COLOR=Red]padding: 0 220px 70px 30px;[/COLOR]
}

.sm-page-node-TzmQcH .sm-tile-single .sm-tile-info {
background: none !important;
}

Allen · May 11, 2015

One major problem with this method of showing the text over the photo is when shrinking the
browser the photo auto downsizes but the text does not. Here's an example, got'a be real bad
on a phone or pad.

photoclick · May 11, 2015

Perhaps, if you use "em" instead of "pt" the text will be shrink and expand proportionally.

Allen · May 12, 2015

photoclick wrote: »

Perhaps, if you use "em" instead of "pt" the text will be shrink and expand proportionally.

Doesn't seem to make a difference, still a constant size.

Off hand I don't see any way not using a photo with text part of it. I'd save my photos with the text on
a layer so it could be edited and re-upload. Even then as the browser approaches a phone the text
would be really small along with the photo.

FairyGodmother · May 12, 2015

Allen wrote: »

You can target each block individually using its widget ID and position the text.

[COLOR=Red].sm-page-widget-10327066[/COLOR] .sm-tile-single p {
   font-size: 14pt;
   font-family:Lustria;
   color:#3c2f1f !important;
   overflow: visible !important;
   white-space:normal !important;
   height: auto !important;
   text-align:justify;
   [COLOR=Red]padding: 0 220px 70px 30px;[/COLOR]
}

.sm-page-node-TzmQcH .sm-tile-single .sm-tile-info {
background: none !important;
}

Thank you Allen for your time!

It was realy exciting to play around and so far I have managed todefine common settings - so the text finally is as I want it to be.
However, as the aligment and possition differ among the images, I would need to define the settings individually.

I cannot find how can I change the settings for each photo separately? I think I have problems finding the right ID name and place to implement the settings to make it work:

How can I change individual settings for each text block and know which widget ID is the right one?

The progress so far:
http://www.thefairygodmotherproject.co.uk/Stunning-Corporate-Photography

Is there a way that scrooling does not appear instead text overflow and pushes the futher context down?

And is there a possibility to define if the page is viewed on mobile text appears under the picture? Or its totally new topic? At the moment on mobile the text shows up as just one line...

Lille Ulven · May 12, 2015

FairyGoodmother here are the id's for the photos that I can see have text from top to bottom:
1) sm-tile-image-yui_3_8_0_1_1431455968830_480
2) sm-tile-image-yui_3_8_0_1_1431455968830_503
3) sm-tile-image-yui_3_8_0_1_1431455968830_550
4) sm-tile-image-yui_3_8_0_1_1431455968830_620
5) sm-tile-image-yui_3_8_0_1_1431455968830_666
6) sm-tile-image-yui_3_8_0_1_1431455968830_690
7) sm-tile-image-yui_3_8_0_1_1431455968830_713

You can find them yourself if you add an extension to your browser - usually known as extensions for web development and available at least for Chrome, Firefox and Safari. Then you can just "mouse" over your site and by that identify which elements are active "below your mouse pointer".

For the definition of a different behavior for mobile-use you would specify your mobile-rules like this

@media only screen and (min-width: 700px){
p {
 text-align: center;
}
}

This way you would define a text-tag p presented as centered text if your screen is at least 700px wide. So you would have to "play" a little bit with the min-width to figure out when to start placing your text in the photo and when below.

Good luck

Lille Ulven

photoclick · May 12, 2015

Based on the information provided by SmugMug, "yui" identifiers are randomly generated and cannot really be used to target an element. It was my understanding that the only ID that SM says is a constant is the numeric ID, such as ".sm-page-widget-10327066". That was my understanding. Please, correct me if I am wrong.

Allen · May 12, 2015

photoclick wrote: »

Based on the information provided by SmugMug, "yui" identifiers are randomly generated and cannot really be used to target an element. It was my understanding that the only ID that SM says is a constant is the numeric ID, such as ".sm-page-widget-10327066". That was my understanding. Please, correct me if I am wrong.

That is correct, only the widget class name (red below) is constant and every widget on the site has
a different number. In the example below I right clicked on the photo, picked "Inspect Element",
yellow highlights that, then scrolled up to find the widget class name.

<div id="sm-page-widget-4RnZzwqh" class="sm-page-widget  
                            sm-page-widget-image [COLOR=Red]sm-page-widget-10327066[/COLOR]" data-typeid="10327066">

    <div class="sm-page-widget-content">
        <div class="sm-page-widget-header"></div>
        <div id="sm-page-widget-gv8LhRsW" class="sm-page-widget-body">
            <div id="yui_3_8_0_1_1431483664019_481" class="sm-tile-single sm-tiles-center-image sm-tiles-uncropped sm-tiles-O">

    <div id="yui_3_8_0_1_1431483664019_1151" class="sm-tile-wrapper sm-tile-photo " itemtype="http://schema.org/ImageObject" itemscope="">
        <div id="yui_3_8_0_1_1431483664019_1150" class="sm-tile" data-clientid="sm-image-model_5">
            <div id="yui_3_8_0_1_1431483664019_1149" class="sm-tile-content" data-clientid="sm-image-model_5">
[COLOR=Yellow]                <img id="sm-tile-image-yui_3_8_0_1_1431483664019_480" class="sm-image" title="" alt="Corporate WEB" data-clientid="sm-image-model_5" src="http://www.thefairygodmotherproject.co.uk/photos/i-94ncW5F/0/O/i-94ncW5F.jpg" itemprop="image"></img>[/COLOR]
            </div>

Lille Ulven · May 13, 2015

My bad - I did not knew about the randomize-yui-id's. They would have made things easier here.
But it seems FairyGoodmother has worked it out as it looks really good on her page now.

Text overlay photograph

Comments