Text wrap and images and more!


  • iagbegreg
    Posts: 1
    1st in a series of basic questions! ;)

    so how do i get text to appear beside an image instead of beneath it?

    And how do I change text size?

    Thanks in advance!
  • ChainsawXIV
    Posts: 530
    Here's how you can do this with some very basic HTML. Some of this is probably possible via Textile too, but I find that doing it this way is more flexible and powerful. Easier too.

    To position an image to the left or right of your text on the page, you can use the _float_ CSS property in the image tag's _style_ attribute. You can float it to the left or right of the text, as you prefer. The image will appear on the page wherever the tag is, so place the image tag just before the text you want to run beside it. Here's the code:

    To change the size or any other properties of a given section of text, you can use the _span_ tag with CSS in the _style_ attribute, similar to the example for floating images above. There's plenty of information on styling text with CSS around, so I"ll just stick to a simple example of what you asked for. Just replace the '8pt' with whatever size you like:

    Your text goes here...
  • Challak
    Posts: 1
    So how would you do that for images hosted/loaded onto OP? Would it work? Where do you confirm the image source?
  • GamingMegaverse
    Posts: 2,972
    Yes it works for images on OP. I use it all the time- I pre-size the image (on my site typically 300px-400px wide), load it to OP, and just float image to left or right side. My players also do it for their logs. Check them out "here":http://www.obsidianportal.com/campaign/a-god-rebuilt/wikis/campaigns
    "A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
    "Duskreign's First Ever COTM":http://www.obsidianportal.com/campaigns/wyrmshadow/wiki_pages/112011
    "OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/

    Just trying to help out.

  • madartiste
    Posts: 328
    There's a way to do this natively with OP too.
    When you use the picture tool to insert a picture, just click on the black down arrow under the actions column all the way to the right of the picture you want to insert. You should get some options showing up under your picture including radio buttons saying left, center, and right. The left and right options will cause the text to flow around your imagine just as if you had used the CSS Killervip gave you to "float" it.
  • SkidAce
    Posts: 46
    So, researching.

    Is there anyway to have text flow around a picture that is centered?
  • Basileus
    Posts: 589 edited April 2016
    There is no equivalent to "float: center". The simplest and most universally reliable method of accomplishing roughly the same effect is probably to make a table with three columns.

    I know there is lots of discussion about how to do basically this same thing out there, but I haven't found a method I like.

    @| text | image | text |@

    |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lobortis orci in justo gravida porttitor eget quis justo. Curabitur elementum tincidunt urna non interdum. Nunc pellentesque et ipsum ut bibendum. Cras rhoncus ex vitae elit auctor auctor ut vel ligula. Donec rhoncus libero sit amet est bibendum, eget volutpat diam suscipit. Fusce vel cursus enim, ac sollicitudin sapien. Nam dignissim aliquam feugiat. Sed nec lobortis augue. Aliquam orci eros, semper non mi nec, rutrum eleifend mauris. Etiam tristique feugiat euismod. Phasellus non purus efficitur, gravida purus id, rutrum magna. Phasellus velit risus, efficitur quis consequat ac, euismod nec mauris. In rhoncus augue eget mollis blandit. Maecenas at neque tristique, porta dolor mattis, pellentesque neque. Aliquam sodales consectetur facilisis. Morbi neque dui, faucibus blandit nulla at, tempus rutrum purus.|!https://pbs.twimg.com/profile_images/1923032199/sun-icon.png!|Nullam eleifend lacinia odio, at aliquet quam imperdiet sit amet. Fusce ornare mauris sit amet nisl laoreet, eu aliquet sapien blandit. Sed sed sem egestas, tincidunt erat ut, semper elit. Praesent nec ultricies mi, ac vulputate tortor. Morbi ultricies accumsan blandit. Suspendisse vel porttitor urna. Integer condimentum lectus nulla, eu cursus libero pretium ut. Praesent sit amet dolor eu erat hendrerit suscipit id id metus. Pellentesque rhoncus pretium nibh, et maximus urna scelerisque vel. Cras sit amet elit sodales, pulvinar sem ac, congue justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas cursus mattis sodales. Etiam a malesuada lacus.|
    Post edited by Basileus on
  • SkidAce
    Posts: 46
    Hmm. I could use that method, and manually move the text from cell to cell to make it look like its flowing around.

    Thanks for the input.
Sign In or Register to comment.

November 2022
Curse of the Crimson Throne

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!