Re: Image Captions
Hans Bracker <[email protected]> Fri, 31 Oct 2025 17:32:15 +0000
| Newsgroups | gmane.comp.web.wiki.pmwiki.user |
|---|---|
| Message-ID | <[email protected]> |
This is a multi-part message in MIME format.
--===============2953579047916002723==
Content-Type: multipart/alternative;
boundary="------------ouEramd24m2IUFNgDyMzXw9F"
Content-Language: en-GB
This is a multi-part message in MIME format.
--------------ouEramd24m2IUFNgDyMzXw9F
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 8bit
rfloat and lfloat are css classes injected into the HTML header via
PmWiki's wikistyles.php script, like:
.lfloat{float:left; margin-right:1%;}
.rfloat{float:right; margin-left:1%;}
I would use float and not align, as that is what you try to do, so the
subsequent text will flow around the image. To make sure the width style
is only applied to the container and not the image as well, you could
use adiv wrapper, like:
>>float=right width=33pct margin=3pct p70i<<
[[Attach:test-03.jpg|Attach:test-03.jpg"Here you can read the tooltip text!"]]| This is a fine picture!
>><<
followed by your text paragraph(s).
You could use rfloat insted of float=right.
Or, alternatively, you could define your own css classes (in
pub/css/local.css for instance). As an example:
/* right-float with 33% width and some margin */ .rfloat33 {float:right;
width:33%; margin:2%; padding:5px;}
and then use that in the wikistyle markup, like:
%rfloat33 p70i%[[Attach:test-03.jpg|Attach:test-03.jpg"Here you can read the tooltip text!"]]| This is a fine picture!
and followed by your text...
The amber skin has got a file grid.css with a number of positioning
shorthand classes defined, created to help with responsive grid layouts.
Hope this may help a bit.
cheers,
Hans
On 31/10/2025 12:43, Martin Cuno wrote:
> Hi everyone!
>
> I frequently position images on websites and have become accustomed to doing so with the following specifications, e.g.: %align=right width=33pct hspace=3pct vspace=3pct p70i%
>
> For a while, I used "rfloat" and "lfloat" instead of "align," but I couldn't get it to work. Even now, I see that the position and size are incorrect. I found this confirmed here:https://www.pmwiki.org/wiki/PmWiki/Images-Talk (see: Why doesn't pct specification work in conjunction with lfloat?). Is there any clarification on this? While testing, I got the impression that it stops working above a certain image size (file size or pixels!).
>
> I would like to be able to insert captions using the syntax shown: "|This is the caption" appended to the image specifications. But this only works with rfloat/lfloat, and then the other settings are no longer correct.
>
> I'd prefer to stick with "align" because my websites are full of it. But how can I get captions?
>
> The problem is visible on my test page:https://www.edition-lgc.de/i.php?n=Sandbox.Testseite0001
>
> Does anyone know a simple solution that I can easily use in my daily work?
>
> Thanks!
>
> Martin
>
>
--------------ouEramd24m2IUFNgDyMzXw9F
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: 8bit
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p>rfloat and lfloat are css classes injected into the HTML header
via PmWiki's wikistyles.php script, like:</p>
<div
style="color: #cccccc;background-color: #1f1f1f;font-family: Consolas, 'Courier New', monospace;font-weight: normal;font-size: 18px;line-height: 24px;white-space: pre;"><div><span
style="color: rgb(215, 186, 125);">.lfloat</span><span
style="color: #cccccc;"> {</span><span style="color: #9cdcfe;">float</span><span
style="color: #cccccc;">:</span><span style="color: #ce9178;">left</span><span
style="color: #cccccc;">; </span><span style="color: #9cdcfe;">margin-right</span><span
style="color: #cccccc;">:</span><span style="color: #b5cea8;">1%</span><span
style="color: #cccccc;">;}</span></div><div><span
style="color: #d7ba7d;">.rfloat</span><span style="color: #cccccc;"> {</span><span
style="color: #9cdcfe;">float</span><span style="color: #cccccc;">:</span><span
style="color: #ce9178;">right</span><span style="color: #cccccc;">; </span><span
style="color: #9cdcfe;">margin-left</span><span
style="color: #cccccc;">:</span><span style="color: #b5cea8;">1%</span><span
style="color: #cccccc;">;}</span></div></div>
<p>I would use float and not align, as that is what you try to do,
so the subsequent text will flow around the image. To make sure
the width style is only applied to the container and not the image
as well, you could use adiv wrapper, like:</p>
<pre>>>float=right width=33pct margin=3pct p70i<<
[[Attach:test-03.jpg|Attach:test-03.jpg"Here you can read the tooltip text!"]]| This is a fine picture!
>><<
followed by your text paragraph(s).</pre>
<p>You could use rfloat insted of float=right.</p>
<p>Or, alternatively, you could define your own css classes (in
pub/css/local.css for instance). As an example:</p>
<div
style="color: #cccccc;background-color: #1f1f1f;font-family: Consolas, 'Courier New', monospace;font-weight: normal;font-size: 18px;line-height: 24px;white-space: pre;"><div><span
style="color: #cccccc;">/* right-float with 33% width and some margin */
.rfloat33 {</span><span style="color: #9cdcfe;">float</span><span
style="color: #cccccc;">:</span><span style="color: #ce9178;">right</span><span
style="color: #cccccc;">; width:33%; </span><span
style="color: #9cdcfe;">margin</span><span style="color: #cccccc;">:</span><span
style="color: #b5cea8;">2%</span><span style="color: #cccccc;">; </span><span
style="color: #9cdcfe;">padding</span><span style="color: #cccccc;">:</span><span
style="color: #b5cea8;">5px</span><span style="color: #cccccc;">;}</span></div></div>
<p>and then use that in the wikistyle markup, like:</p>
<pre>%rfloat33 p70i%[[Attach:test-03.jpg|Attach:test-03.jpg"Here you can read the tooltip text!"]]| This is a fine picture!
and followed by your text...</pre>
<p>The amber skin has got a file grid.css with a number of
positioning shorthand classes defined, created to help with
responsive grid layouts.</p>
<p>Hope this may help a bit.</p>
<p>cheers,<br>
Hans</p>
<p><br>
</p>
<div class="moz-cite-prefix">On 31/10/2025 12:43, Martin Cuno wrote:</div>
<blockquote type="cite"
cite="mid:[email protected]">
<pre wrap="" class="moz-quote-pre">Hi everyone!
I frequently position images on websites and have become accustomed to doing so with the following specifications, e.g.: %align=right width=33pct hspace=3pct vspace=3pct p70i%
For a while, I used "rfloat" and "lfloat" instead of "align," but I couldn't get it to work. Even now, I see that the position and size are incorrect. I found this confirmed here: <a class="moz-txt-link-freetext" href="https://www.pmwiki.org/wiki/PmWiki/Images-Talk">https://www.pmwiki.org/wiki/PmWiki/Images-Talk</a> (see: Why doesn't pct specification work in conjunction with lfloat?). Is there any clarification on this? While testing, I got the impression that it stops working above a certain image size (file size or pixels!).
I would like to be able to insert captions using the syntax shown: "|This is the caption" appended to the image specifications. But this only works with rfloat/lfloat, and then the other settings are no longer correct.
I'd prefer to stick with "align" because my websites are full of it. But how can I get captions?
The problem is visible on my test page: <a class="moz-txt-link-freetext" href="https://www.edition-lgc.de/i.php?n=Sandbox.Testseite0001">https://www.edition-lgc.de/i.php?n=Sandbox.Testseite0001</a>
Does anyone know a simple solution that I can easily use in my daily work?
Thanks!
Martin
</pre>
</blockquote>
</body>
</html>
--------------ouEramd24m2IUFNgDyMzXw9F--
--===============2953579047916002723==
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
Content-Disposition: inline
_______________________________________________
pmwiki-users mailing list
[email protected]
http://www.pmichaud.com/mailman/listinfo/pmwiki-users
--===============2953579047916002723==--