Photo's within text

Limpopoboy · November 26, 2016

Guys

Before I go further, is their any way to put a photograph within you page text? If you look here

http://www.africanwildlifeandnaturephotographs.com/Bird-Information/Black-Collared-Barbet

You will see I have placed the photograph at the bottom below the text as a separate content block as per the choices with the 'content block'allowed. Could I place it within the text and have the text surround it?

Thanks Guys as usual.

Limpopoboy

denisegoldberg · November 26, 2016

The only way I am aware of is to use an HTML block and specify the CSS to float the photo to either the right or left. This means that when you enter text you will also need to use HTML to reference the CSS elements.

I think it is simpler to maintain using a text block with an image following it - that way there is no need to use HTML to show photos or to format the text.

Perhaps someone else has a simpler solution.

Here's an example screen shot along with the HTML and CSS that was used to create it.

CSS from HTML/CSS block:

#floatRight img {
  float: right;
  margin: 0 10px 3px 10px; /* top right bottom left */
}
#clearRight img {
  clear: right;
}

#floatLeft img {
  float: left;
  margin: 0 10px 3px 10px; /* top right bottom left */
}
#clearLeft img {
  clear: left;
}

HTML from HTML/CSS block:

<div id="floatLeft">
  <img src="https://photos.smugmug.com/GardensFlowersThings/Sunflowers/i-CF7WFcQ/0/300x300/201609_XT1_2478L-S.jpg" alt="sunflower"/>
  Sometimes you want a photo to stand alone, but sometimes there is a desire to have words wrap the photo. 
  This technique is implemented by defining a CSS element that specifies that images are to be floated to the right or to the left. The CSS element is then referenced on the page that is used to show the photo. 
<br/><br/>
  In this example, an img CSS element named #floatLeft was used. That element looks like this:
<br/><br/>
  #floatLeft img { float: left; margin: 0 10px 3px 10px; } 
  </indent>
<br/><br/>
After all of the text is entered, a CSS element named #clearLeft was used to clear the float left characteristic. That element looks like:
<br/><br/>
#clearLeft img {  clear: left; }
<br/><br/>
The text was entered as HTML, beginning with a reference to the floatLeft div. 
The first entry in the text was an img src= statement to place the photo.
After all of the text was entered an ending div statement is followed by a reference to the #clearLeft element.
<br/><br/>
A second set of CSS elements can be used to float photos to the right.                                     
</div>
<div id="clearLeft"></div>

Photo's within text

Comments