[pmwiki-users] Image Captions

[Hans Bracker]

The pmwiki skin will cause this expansion when zooming. You need to use 
a skin which follows "responsive" layout, like 'pmwiki-responsive' or 
'amber' or perhaps some other, or an adaptation of such. Then the 33% 
width will refer to the wikitext division part of the page (the page 
less sidebar etc). Also if you use an image which is less than the 33% 
width, with reference to pixels, then such smaller image will not 
automatically be made larger to fill the 1/3 width.

Hans

On 31/10/2025 18:28, Martin Cuno wrote:
> Thanks, Hans! But now the graphic's width doesn't stay at 33% of the screen; it expands as I zoom. I'd prefer the former. What does the 33% refer to in your solutions? As you can see, I don't have a solid understanding of HTML and the like.
>
> Martin
>
> ===== Ursprüngliche Nachricht =====
> Von: Hans Bracker <design at softflow.uk>
> Am: 31.10.2025, 18:32:15 Uhr
> Betreff: Re: [pmwiki-users] Image Captions
>
> 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
>>
>>
> ===== Ursprüngliche Nachricht Ende =====
>
>
>