Jump to:

5519 Posts in 1734 Topics by 1223 members

Customising the CMS

SilverStripe Forums » Customising the CMS » putting images within divs

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1 2
Go to End
Author Topic: 2373 Views
  • redcirce
    Avatar
    Community Member
    22 Posts

    putting images within divs Link to this post

    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\Page.ss.

    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.

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: putting images within divs Link to this post

    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.

  • redcirce
    Avatar
    Community Member
    22 Posts

    Re: putting images within divs Link to this post

    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?

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: putting images within divs Link to this post

    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?

  • redcirce
    Avatar
    Community Member
    22 Posts

    Re: putting images within divs Link to this post

    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!

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: putting images within divs Link to this post

    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

  • redcirce
    Avatar
    Community Member
    22 Posts

    Re: putting images within divs Link to this post

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

  • Stefdv
    Avatar
    Community Member
    110 Posts

    Re: putting images within divs Link to this post

    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.

    2373 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.