The Ponk Room Blog

Dated Title (Click to show)
2021-08-22 Raspberry Pi
2021-08-18 Vintage or Obsolete ?
2021-07-22 IFrames
2021-07-21 Placing images and captions
2021-07-19 HTML Text Editors
2021-07-14 Le Jardin
2021-07-08 Synology releases Version 7 of DSM
2021-07-04 England have been playing football
2021-07-01 To Vax or not to Vax ?
2021-06-22 Up To Date and a few moans
2013-11-10 Joomla
2013-11-10 Wordpress
2013-11-10 Try a VPS
2012-11-28 Mostar Bridge
2012-04-24 Fords smallest car

About The Blog

The list above shows tha last 15 entries. I'll probably change the selection method to a date based system once there are a few more entries. Click an entry title to see it.

This is the blog which used to be on another of my websites, now defunct (www.cobblers.org.uk). The last post was 8 years ago I moved it here without any problems. The editing functions have been brought up to date, so I can now add new entries and upload pictures. The display code (text) has been updated too e.g. the broken links are either removed or fixed.

25th June 2021

Placing images and captions   

Posted On: 2021-07-21 15:48:37

Using a table to position a caption and a related image
So, after deciding that the image plugins which come as add-ons to CK Editor ( viz EasyImage and EnhancedImage )  trade off too much other functionality , I suddenly thought of using a table, and here is the result
La Verdonnerie, near Descartes, France
La Verdonnerie a beautifully restored Farm House near Descartes in France

For certain types of layout ( eg the one on this page) you can use a table to position a caption under or above  a picture. The idea is not as flexible as it sounds, because CK tables don't behave like HTML tables. The column and row separators are not fixed. The shape and size of the cells changes to accomodate the text or pictures you put into them This makes it impossible ( at my current state of knowledge ) to put text outside the sides or top and bottom of a table. All the page  content has to go inside  table cells. It is a restriction, but a minor one I think. This page has a single column  with 4 rows.

You can type away in the row after the picture caption ( the row containing this text), but you cannot type into the space underneath the table. All the page content has to go inside the table. The table is as wide as this text. There is no center alignment available for the image, so you must  push it over with a left margin if required. The column and row separators are not visible outside of the editor The picture size can be easily changed through the image dialog box. The size you see above is the maximum size available.

Still I think it is a reasonable trade -off. I shudder to think what the mark-up looks like with all this in-line styling ! I wonder how you attach a class to this image ? Next problem !

And you can see on the picture above that there are two styles appplied - a shadow and a rounded edge. You do this by putting the class name in the Style classes box on the Advanced tab of the image dialog. Then add the selector and the style definitions to the header of the page containing the image and there you have it. Simple when you know how ! I've also justified the text. I much prefer justified text, but some people dislike it.

There's also a dialog box for Tables, and I presume you can use this to attach a style to a table. There are probably other elements you can do this with too - more research needed !