Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Page content, create div arund images, how?
#1
Big Grin 
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?
Reply
#2
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.
Reply
#3
(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.
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
#4
(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
Reply
#5
(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.


Attached Files
.php   empty_paragraph_remover.php (Size: 663 bytes / Downloads: 11)
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
#6
(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.
Reply
#7
(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. Smile Ty.

You are welcome!
I had a similar plugin, which removed the <p> around images, if there was no other content in the paragraph.
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply




Users browsing this thread: 3 Guest(s)