How to format pictures in a Blog Post

  • 3
  • Question
  • Updated 10 years ago
  • Answered
Your recent upgrade inculded a blogging platform. I tried to create a blog post with a picture, but the formatting is odd. It seems like you can only type your text below or above the picture.

Is there a way to format the picture so you can wrap your text around it/ write text beside the picture and have it continue below?

Thanks so much.

Tina
Photo of TinaHunter

TinaHunter

  • 38 Posts
  • 1 Reply Like
  • looking forward to using the new platform

Posted 10 years ago

  • 3
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Hi Tina - there isn't a way to wrap text around a picture in a blog, however I will pass the suggestion on.

Thanks for the suggestion!
Photo of TinaHunter

TinaHunter

  • 38 Posts
  • 1 Reply Like
Thanks Marije. Please let me know if / when SynthaSite plans on making this available.

Tina
Photo of Guido Graphics

Guido Graphics

  • 558 Posts
  • 41 Reply Likes
You can use the 2 column widget (and also place other 2 column widgets within the first for multiple images or an image in the center of a block of text) Manipulate (click, hold, drag) the center bar of the widget to size the columns as needed.

Place the image in the text widget on one side of the 2 column, (size it as needed with the little red square - click, hold, drag) and type in the other side.

Click your image once it's on the page and click properties in the right sidebar to justify (right, center or left) within the one side of the widget.

Then add a regular single column text widget above and below and split your copy as needed.

Not perfect, but it will work.

See my links page for the end result. There are over 15 different widgets on the page to get the layout like it is. http://guidographics.synthasite.com

I used text widgets with no text to create the spaces above and below the images. You would not need to do that, and that way the text will be right on top (or below) of the image without space and look like wrap around.
Photo of TinaHunter

TinaHunter

  • 38 Posts
  • 1 Reply Like
Thanks Guido,

It looks like this would work great on web pages, but It doesn't work inside a blog post. The post is like one text box in itself. I think I'll wait for SynthaSite to add the ability to wrap text, i'm not in a massive rush.

Thanks for the idea though. I'll probably end up using this idea on another page.
Photo of Guido Graphics

Guido Graphics

  • 558 Posts
  • 41 Reply Likes
You welcome. (Didn't know that, I don't have a blog)
Photo of Cosmic Sensorium

Cosmic Sensorium

  • 102 Posts
  • 5 Reply Likes
Hey Tina,

One way to get a bit more options for formatting pictures inside a blog post is dropping an html table within the post. It is not as complicated as it may seem and this is probably not the best way to explain it, but here goes:


  1. Go to an online table generator, such as http://www.quackit.com/html/html_tabl...

  2. Generate a table, for example one with 1 row and 2 columns (for now, you might want to set table width to 100% to cover the width of your post, and border thickness to 1, that way you can see what your table structure looks like while you edit it in the next steps).

  3. When composing your post, switch to html view by clicking on the html button.

  4. Paste the code into the post body.

  5. You can now turn off the html view.

  6. If you click inside the area for editing the post, you'll notice that the table structure is there, with thin lines and little squares and arrows indicating the cell borders.

  7. Assuming you want your image on the left and text to the right and below it, insert your image on the left column, insert text on the right column, and insert text below the table.

  8. You can drag the table borders to adjust size and look. You can also format the alignment of your text and image as you would normally.

  9. Finally, go back to html view and set table border="0" so that your table becomes invisible.


you can see an example of how this looks on synthasite over here *Do note that I did not need any text below my pic on this example... but if needed, I could definitely type it in below the table and within the same post.

If you have access to dreamweaver or something similar, you can do all the table editing on there and then just paste it into your blog post.
Photo of Cosmic Sensorium

Cosmic Sensorium

  • 102 Posts
  • 5 Reply Likes
Here's another example of how this looks with text completely wrapped around the image. I set the table width to 100%, and the column with my image to 63% width. I did play around a bit with the paragraph so that it spanned the full image neatly, and then just decided to break it off. =)
Photo of TinaHunter

TinaHunter

  • 38 Posts
  • 1 Reply Like
Fantastic. I am throughly impressed. Thank you so much for sharing this useful formatting trick.

And congrats on your win. You deserve it.