Not logged in. · Lost password · Register
Forum: General Help and Support Templates and Layout RSS
New ways to display images using css?
Avatar
tobiaseigen #1
Member since Feb 2007 · 21 posts
Group memberships: Members
Show profile · Link to this post
Subject: New ways to display images using css?
Hey folks,

We are converting a manual from microsoft word to dokuwiki. The document uses icons to highlight different kinds of content (see attached screenshot) and would like to try to get similar presentation on the dokuwiki. Each bit of text has an icon on the left side. We'd be most grateful for suggestions from others who have been here before. :-)

Currently we've got the icons uploaded and are inserting them as we would any images. We're having layout problems though. The text is not wrapping around the images correctly unless the paragraph is longer than the image is high, or we align it to the right (and we want it to be aligned to the left!). The images are clickable links and by default display image info which is not at all needed.

We're using the monobook template.

So... the obvious questions are as follows:

1) is there syntax for having no link at all for images?
2) is there syntax for forcing the next paragraph to not wrap around an image?

And the less obvious idea:

Is there a plugin out there (or could we create one relatively easily) to use syntax to insert icons in certain places that behave the way we need them to? Something like <icon ttgo:overview.png>? 

Cheers,

Tobias
Tobias Eigen

Kabissa - Space for Change in Africa
http://www.kabissa.org
The author has attached one file to this post:
ttgo-icons-sample.png 89.9 kBytes
You have no permission to open this file.
Avatar
tobiaseigen #2
Member since Feb 2007 · 21 posts
Group memberships: Members
Show profile · Link to this post
Subject: Example of image wrapping strangely for me in dokuwiki
I don't think it's possible to add more than one attachment to a posting, so here's another posting with an example of the formatting issues I'm having in dokuwiki.

The syntax I use is like this:

== Level 5 Headline ==
{{ttgo:i_important.png?75 }}This paragraph is too short and it does not wrap correctly - next image comes right in under this. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah

When I leave no blank after the image name and size, it aligns even more strangely - with only hte first line wrapping and the rest of the paragraph going below the image.

Cheers for any advice -

Tobias
Tobias Eigen

Kabissa - Space for Change in Africa
http://www.kabissa.org
The author has attached one file to this post:
ttgo icon wrapping in dokuwiki.png 44.2 kBytes
You have no permission to open this file.
chi #3
Member since Jun 2006 · 1851 posts · Location: Munich Germany
Group memberships: Members, Super Mods, Wiki Managers
Show profile · Link to this post
In reply to post #1
Hi,

Quote by tobiaseigen:
1) is there syntax for having no link at all for images?

yes, you can use the following to omit the linking:

{{image?nolink}}
{{image?200x200&nolink}}

Quote by tobiaseigen:
2) is there syntax for forcing the next paragraph to not wrap around an image?

Well, there`s more than one way: You can either use enough line breaks between the paragraphs (maybe not the best solution) or you have a look at the clearfloat plugin [1] or the div/span shorthand plugin [2].

Is there a plugin out there (or could we create one relatively easily) to use syntax to insert icons in certain places that behave the way we need them to? Something like <icon ttgo:overview.png>? 

I think [2] could help you with this too :-).

[1] http://wiki.splitbrain.org/plugin:clearfloat
[2] http://wiki.splitbrain.org/plugin:div_span_shorthand
Please add [SOLVED] to the initial thread subject if you feel your question has been answered.
If my answer doesn't make sense maybe your question didn't either - just visit http://facepalm.org.
Avatar
tobiaseigen #4
Member since Feb 2007 · 21 posts
Group memberships: Members
Show profile · Link to this post
<phew> THANKS for the tip re "nolink" - that's a huge help. The wiki page on link syntax could use updating. Should I do that or is there an editorial hierarchy?

I will investigate the clearfloat and div/span suggestion. That might do the trick. 

Cheers,

Tobias
Tobias Eigen

Kabissa - Space for Change in Africa
http://www.kabissa.org
Avatar
andi (Administrator) #5
User title: splitbrain
Member since May 2006 · 3423 posts · Location: Berlin Germany
Group memberships: Administrators, Members
Show profile · Link to this post
In reply to post #1
Chi beat me with the answer... Well then I just answer this:

Quote by tobiaseigen:
Is there a plugin out there (or could we create one relatively easily) to use syntax to insert icons in certain places that behave the way we need them to? Something like <icon ttgo:overview.png>? 

Writing one should be simple, have a look at the tutorial and existing plugin code. But maybe you want to use the note plugin instead?
Read this if you don't get any useful answers.
Lies dies wenn du keine hilfreichen Antworten bekommst.
Avatar
tobiaseigen #6
Member since Feb 2007 · 21 posts
Group memberships: Members
Show profile · Link to this post
Hi Andi -

Thanks for the reply. I looked at the note plugin and that was in fact what made me think a new plugin might be possible.

Using it as is won't work for us, since we're talking not about notes in separated boxes but rather placing icons for basically every bit of text in the document, not indented or in different colors. 

I'll keep exploring. If others are interested in collaborating on a new plugin for this, let me know. It seems to me it could be very flexible and broadly useful.

Cheers,

Tobias
Tobias Eigen

Kabissa - Space for Change in Africa
http://www.kabissa.org
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2019-05-26, 22:18:33 (UTC +02:00)