Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Customising the CMS

putting images within divs

Go to End

13 Posts   2442 Views


24 February 2009 at 4:29pm Community Member, 22 Posts

Hello. I want images to be placed in a div and to be able to use the alt text as a caption. I assume I would do this in themes\themename\templates\Layout\

Not all pages will use an image and if an image is used, it may be placed anywhere in the text/page - it won't necessarily be directly below the title.

How do I set the "if image exists" control?

(The css I'm comfortable with - no worries with creating divs, etc.)

Thanks in advance.

Carbon Crayon

25 February 2009 at 4:34am (Last edited: 25 February 2009 4:35am), Community Member, 598 Posts

Hi Redcirce

Do you mean you want these images in the template or are these images that are being inserted through the tinyMCE content window in the CMS?

If they are being inserted through the TinyMCE editor then there is not a whole lot of control you can have over them other than editing the existing classes (in typography.css) or addind the divs via the HTML editor popup.

If you want to add images to pages using the Page.php class ($has_one etc.) then you have complete control over these images and you can simply do things like <% if Image1 %> and $Image1.URL etc. in your template.


25 February 2009 at 12:51pm Community Member, 22 Posts

Hi Aram

They will be inserted through tinyMCE. So other than going into the HTML editor, I'm unable to automatically have the image placed in a div?

What about captions? Can I tell SS to use the description as an image caption or would that need to be done through HTML editor also?

Carbon Crayon

25 February 2009 at 12:56pm Community Member, 598 Posts

As far as I know SS has no real control over anything inserted through the TinyMCE editor. There may be a way to setup TinyMCE to add divs etc, I think your best bet for info on that is the TinyMCE docs/forum :)

I know in 2.3 using the latest TinyMCE editor you can add classes to items via a dropdown.....but I dont think you can add divs. Just out of interest why do you need to add a div? If it is just wrapping around the image then its no different to targeting the image directly, no?


25 February 2009 at 1:26pm Community Member, 22 Posts

I wanted the end user to be able to add a caption to the images which would be contained in a div beneath the image. This way it would constrict the width of the caption div to the same width of the image. The width of the images on the site would vary, so this would ensure a nice looking caption.

I don't think the end user is au fait with HTML and I wanted to make it easier for her. This is also why I wanted to be able to use the description field that tinyMCE provides as a caption.

If you have any other possible solutions, I'd be really pleased!

Carbon Crayon

25 February 2009 at 1:32pm Community Member, 598 Posts

ahh I see. Well as far as I know thats not possible through SS, but it may well be by playing around with the tinyMCE core files......

Alternatively you could do it very easily with image fields or UncleCheese's new DataObject manager......but then your user would not have control over where the images are placed.

I would be interested to know if you find a solution, sure to post back :)


25 February 2009 at 1:35pm Community Member, 22 Posts

Thanks Aram. I'll give UncleCheese's DataObject manager a go!


6 January 2010 at 5:45am Community Member, 110 Posts

I also need to put some things in divs dynamicly.

I work in a company (don't we all ?) i need to create some Organigrams ( pictures of people positioned according to there status/function ). One person can work in different areas. ( main field of work, but also a member of the board, a coach for the football team...) Every person has_one Picture, has_many Jobs, a name and function.
So i need to have the ability to make different Organigrams (no problem there) but sometimes i need to use the same person on diffent pages in different positions.

Now creating the whole DB (used Modeladmin) isn't the problem. I need to position de data. I can't use Sortorder because than i cannot place the same person on 2 different pages in different positions ( being the Chief on the main Job , but just a player in the football team).

Now i discovered the module sortable_dataobject where an Admin can sort divs in the frontend, that's kinda terrific !!! But it still depends on Sortorder. So one person can have only one Sortorder?

The second challenge (for me that is...) is that i don't know how to place all the people on one page ( being in rows and columns ).

I figured that if i create some kinda standard grid lets say 10 cells (divs) wide and 8 cells (divs) high all filled with a standard background...
I could then get the 'Persons' DataObject for that specifiek area of work ( that's already working fine, no problem there) and place them in the grid.
Since there are 80 standard divs and i replace maybe 10 or 20 of those with Persons i should be able to position them in the frontend by shuffling them (sort them) around the grid.

Well that's about it...
So in short terms;
1) How do i give one person differnent Positions on the page.
2) How do i create the grid so that it replaces the standard divs with the Persons divs.

Go to Top