Page content, create div arund images, how?

Page content, create div arund images, how? - Printable Version

+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: Scripts & Components (http://get-simple.info/forums/forumdisplay.php?fid=11)
+--- Thread: Page content, create div arund images, how? (/showthread.php?tid=5232)

Page content, create div arund images, how? - yardan74 - 2013-10-01

Hi.

When user creates a page and puts an image on it, the result is currently this:

Code:
<p>

   <img src="" alt="">

</p>

I'd like to change this so, that GetSimple would automagically create a div around it, like this:

Code:
<p>

   <div id="content-image">

     <img src="" alt="">

   </div>

</p>

That would make some css-things easier to do, I hope.
How can I achieve this? What to edit and how?

RE: Page content, create div arund images, how? - Timbow - 2013-10-01

You can give the image a class easily with the ck edtor, the Advanced tab of image properties iirc. Don't know about a div with an id.

RE: Page content, create div arund images, how? - mvlcek - 2013-10-01

(2013-10-01, 18:52:49)yardan74 Wrote: Hi.

When user creates a page and puts an image on it, the result is currently this:

Code:
<p> <img src="" alt=""> </p>

I'd like to change this so, that GetSimple would automagically create a div around it, like this:

Code:
<p> <div id="content-image"> <img src="" alt=""> </div> </p>
That would make some css-things easier to do, I hope.
How can I achieve this? What to edit and how?

I hope you know that this is invalid HTML - no div is allowed inside a p.

RE: Page content, create div arund images, how? - yardan74 - 2013-10-02

(2013-10-01, 21:04:07)Timbow Wrote: You can give the image a class easily with the ck edtor, the Advanced tab of image properties iirc. Don't know about a div with an id.

Yes. Thank you for your reply.
I'm aware that you can do all kinds of divs, classes and whatnots straight from CK editor, and even edit your page in plain html. - That's the plan B.

What I was looking for, is a way to automate that.
So every time when user, who doesn't want to know anything about HTML, adds and image on the page there would be a div (or class) around it without any horrifying experience of seeing html tags.

(2013-10-01, 21:15:49)mvlcek Wrote: I hope you know that this is invalid HTML - no div is allowed inside a p.

Sorry, I obviously let your hopes down there. I wasn't thinking. I guess you have to shoot me now. Tongue

(Thanks for the heads up.)

Another question crossed my mind:
Is there a way to prevent CK editor adding spaces in between <p>-tags if the paragraph it otherwise empty? So I could use

Code:
p:empty{display:none}

in css to clean the empty paragraphs away?

BTW: I think I posted this on the wrong forum.. Blush

RE: Page content, create div arund images, how? - mvlcek - 2013-10-04

(2013-10-02, 16:19:22)yardan74 Wrote: Another question crossed my mind:
Is there a way to prevent CK editor adding spaces in between <p>-tags if the paragraph it otherwise empty? So I could use

Code:
p:empty{display:none}
in css to clean the empty paragraphs away?

The attached plugin removes paragraphs containing only white space before displaying a page.

RE: Page content, create div arund images, how? - yardan74 - 2013-10-04

(2013-10-04, 05:25:31)mvlcek Wrote:
(2013-10-02, 16:19:22)yardan74 Wrote: Another question crossed my mind:
Is there a way to prevent CK editor adding spaces in between <p>-tags if the paragraph it otherwise empty? So I could use

Code:
p:empty{display:none}
in css to clean the empty paragraphs away?

The attached plugin removes paragraphs containing only white space before displaying a page.

Oh, many thanks!
Did you just code that, or did you have this lying around somewhere?
Tried it and it works like a charm. Smile

Ty.

RE: Page content, create div arund images, how? - mvlcek - 2013-10-04

(2013-10-04, 17:02:38)yardan74 Wrote:
(2013-10-04, 05:25:31)mvlcek Wrote: The attached plugin removes paragraphs containing only white space before displaying a page.

Oh, many thanks!
Did you just code that, or did you have this lying around somewhere?
Tried it and it works like a charm. Ty.

You are welcome!
I had a similar plugin, which removed the <p> around images, if there was no other content in the paragraph.