How To Couple a TOC Box to an Image

TOC boxes are designed to be freely positioned in posts using a short code.

Recently, I’ve been approached with a request for instructions on an interesting use-case: Positioning a TOC box together with an image.

Here’s how I’d do it.

The Case

I’ll explain the case where a TOC is below an image, and both are sticky at the right side. The TOC will be block-aligned under the image, but you can play with the class TOC parameter (class=toc-left and class=toc-right) to see how it affects the layout.

Positioning the TOC above the image, or making them sticky to the left is analogous – and left as an exercise to the reader. 😉

The Code

<div style="float:right; margin-left:5px">
<div align="center">
<img src="image.jpg" align="center"/>
</div>
[toc style="margin-top:5px"]
</div>

A DIV element is used as container which is made sticky via style="float:right". When floating, the DIV will adjust its size to tightly enclose the contained elements. The TOC box will take as much horizontal space as the image, except the TOC entries would make the box wider than the image, in which case the image will appear horizontally centered around the middle of the box. It is this latter case why the image is wrapped in an auxiliary DIV element with an align="center" attribute.

The Sample

You can see how the TOC box looks like with several class parameter values:

class=toc-left(none)class=toc-right

Sample Chapter

Lorem ipsum graecis aliquando at has, quaeque complectitur duo in. Quo amet nobis facete ut, eos ea simul doming invenire. Sale detracto theophrastus at usu, pri ut congue audiam efficiendi. Mea an veritus insolens sensibus, no eros graeci qui. Eu has congue salutandi conclusionemque, est posse periculis neglegentur te, persecuti ullamcorper ne vel. Nec labitur definiebas dissentiet cu, ne ius ipsum cetero epicuri.

Ex scaevola facilisis similique his, tota oblique mandamus cum ad. Modo tibique percipit duo id, an vim diam scripserit necessitatibus, alia iisque adipisci vim te. Noster adversarium duo ne, possit lobortis cum at, ex nam alii sanctus corpora. Cibo possim ocurreret quo in, te clita affert vis. Choro dicant dicunt eam id, unum graeci fuisset an qui.

9 Comments

• 
  Alex May 24, 2009 at 9:05 pm

  Hello,

  Sorry to ask you that but I m a newbie !!! where I have to put exactly the code on css style ? if yes under wich line ?.

  Best ,

  Alex
  • 
    Hackadelic May 25, 2009 at 3:44 pm

    Alex, it’s really easy:

    (1) Copy the sample code to the clipboard (use the “copy to clipboard” link at the top of the code element)
    (2) In your WordPress post editor, switch to HTML mode, and go to the place where you want the TOC/image couple to appear,
    (3) Paste the code from the clipboard
    (4) Replace “image.jpg” with the actual image URL
    (4) Optionally, replace “float:right” with “float:left”, if you want them to stick to the left, instead of to the right
• 
  findigart May 16, 2009 at 6:43 pm

  OK… in the toc options page the style was set to toc-right. when i removed it the thing with IE arranged itself.

  however this caused the width of the toc to be flexible according to the length of the sections – not good. so i added width:200px into the toc div style of the code you offer and that settled it completely 🙂

  any remarks?
  • 
    Hackadelic May 17, 2009 at 10:28 am

    findigart, perfect. 🙂
• 
  findigart May 16, 2009 at 4:57 pm

  Hey there,

  thanks for your reply 🙂 and the guidance of owe… i’m not cynical – it helped me to read that post and share the authors point of view that was not that much clear to me. and i’ll be sure to donate according to my limited capabilities at the moment (i’m currently unemployed and pretty much in debts…but optimistic 🙂 )

  anyhow, concerning the issue above, i copied the exact code that you offer and it works the same in FF, however IE does something else yet again with these instructions… as you can see in that same link as before.
  when changing the align for the image to “right” the image shifted to the right indeed but the post itself did not start to fill that space but rather only after the toc ended…
• 
  findigart May 16, 2009 at 1:37 am

  So perhaps I am doing something wrong? Were you able to take a look at my site by a chance?
  Perhaps some other plugin that might collide and cause this only in IE or something?
  Whatta you think?
  • 
    Hackadelic May 16, 2009 at 11:51 am

    findigart, I examined your appointed page, and yes, you were doing something wrong. It took me a while to find out (so I’d say you owe me one), but now I know you did not stick to the instructions in this post. You applied a “toc-right” to the TOC box when you shouldn’t, and you haven’t applied the right attributes (align=”right” instead of align=”center”, as stated in the instruction). After copying and re-pasting the code from above as is, your issue should be gone.
• 
  findigart May 15, 2009 at 4:20 am

  Hello there 🙂

  Thanks for the Great plugin – it really helps. Great works man.

  Now, I have been trying to do that thing you do with coupling an image and toc and it works perfectly in FF but IE7 messes it all up. the toc floats on the left side of the image instead of being beneath it and it breaks everything, being the microsoft that it is…

  any thoughts on how to fix this?

  you can check it in my under construction site at:
  http://findigart.co.il/fear-art

  thanks in advance for any help 🙂
  • 
    Hackadelic May 15, 2009 at 7:59 pm

    findigard, the strange thing is that IE does work on this post?!? Yes, there are some minor visual issues, but image and TOC appear as they should (more or less). I’ll run some more tests…