[pmwiki-users] improved markup for floating images...?

[Patrick R. Michaud]

On Tue, Jul 26, 2005 at 06:15:15PM +0100, Ed W wrote:
> Hmm, well not fundamentally different, just a case of trying to figure 
> out the best syntax.

Okay, we're in agreement then.  :-)

> The left and right aligning might be a tiny bit of a red herring in that 
> what *I* really want is some nice thumbnailing ability and the ability 
> to put nice frames around selected content (basically I would be happy 
> with the wikipedia stuff, say).  It's not a limitation for *my* site to 
> have to upload the files in order to style and resize them.

If we set aside thumbnailing for just a moment, I should note that
the canonical method for doing decorative stuff like frames
in PmWiki is to use WikiStyles, and that by doing so we can decorate
more than just images.  For example, one can currently do

    %define=box border="1px solid black" padding=4px%

and then later

    >>box<<
    This content is boxed.
    >><<

but also

    %img box% Attach:image.gif

The nice thing about wikistyles is that they're easily combined and
they're extensible and redefinable by authors, so if someone wants a 
blue box:

    >>box bgcolor=#ccccff<<
    This content is in a blue box
    >><<

or white-on-green-text

    >>box white bgcolor=green<<
    More content
    >><<

So, when talking about things such as framing, margins, padding,
and floating, I naturally think in terms of wikistyles because they
seem to give a lot of flexibility.  It's really nice to be able to say

    %define=imright align=right margin-left=5px%
    %imright% Attach:something.jpg
    %imright border="1px solid blue" margin-left=10px% Attach:something.jpg

as well as give authors the capability to define custom styles that they
can repeat (without needing the wikiadmin to install a custom
CSS class):

    %define=pmright imright border="1px dotted green"%

    %pmright% Attach:something.jpg

Captioning may even become just an extension of this:

    >>imright box<<
    Attach:something.jpg\\
    Caption goes here
    >><<

and of course it's then possible for captions to contain links and
arbitrary markup

    >>imright box<<
    Attach:something.jpg\\
    ''Photo courtesy of [[(http://)www.pmwiki.org]]''
    >><<

> Agreed that not everyone likes the standard look of any given image 
> frame, but I suspect that most people either want pictures framed or 
> not, and they can fiddle with the CSS to get a site look to their 
> images.  

The thing I like about the wikistyles approach is that the fiddling
can take place at the author level (on a per-page or per-group basis)
as well as at the admin level.  And if PmWiki defines useful
default wikistyles (%thumb%, %imright%, %imleft%, %framed%, %captioned%) 
then it becomes really straightforward for authors to use yet 
still be extensible to accommodate new stylings.

> My first thoughts when I saw this were that the "alt text" looked 
> extremely "bolted on".  

Granted -- the current "alt text" was chosen as the least of many evils.  
I'm open for non-bolted-on suggestions.  :-)

> Things which would be useful for me would be:
> 
> * thumbnailing
> * frame
> * caption (implies a frame to be added)
> * resize without a thumbnail link
> * graphical links, ie the picture can be a hyperlink

By "thumbnailing" I'm assuming you're describing the ability
for a server to automatically generate and cache a smaller version
of an image in order to conserve bandwidth.  That will take some
work to achieve.  But I should point out that wikistyles already
make it possible to do thumbnailing as viewed by the browser:

    %define=thumb height=50px%

    %thumb% Attach:someimage.jpg

or if you want thumbnails always aligned right with a border:

    %define=thumb apply=img align=right height=50px border="1px solid black"%

    %thumb% Attach:someimage.jpg

Since width= and height= in wikistyles already have to be handled 
in a somewhat special manner for images, we might be able to get them
to automatically thumbnail images to save bandwidth.  

So, back to your list of "useful things", here are some possibilities 
(not all of these currently work in PmWiki, but it's what I can envision):

> * thumbnailing
> * resize without a thumbnail link

Without a thumbnail link:

    %height=75px% Attach:someimage.jpg
    %thumb% Attach:someimage.jpg

As a thumbnail link:

    %thumb% [[Attach:someimage.jpg | Attach:someimage.jpg]]

> * frame

    %imright framed% Attach:someimage.jpg
    %imright border="1px dotted green"% Attach:someimage.jpg

    %define=framedright imright border="1px dotted green"%
    %framedright% Attach:someimage.jpg

> * caption (implies a frame to be added)

    %define=captioned framed float=right%
    >>captioned<<
    Attach:someimage.jpg\\
    ''Caption''
    >><<

    %captioned% Attach.someimage.jpg\\''Caption''

> * graphical links, ie the picture can be a hyperlink

    [[http://www.google.com | Attach:google.gif ]]

    %thumb% [[http://www.google.com | Attach:google.gif]]
    %framedright% [[http://www.google.com | Attach:google.gif]]

> More advanced and slightly nice to have stuff would be:
> * Easy way to give the image a classid so that I can style 
> this image with some CSS

Already exists as:

    %img class='classid'%  Attach:image.gif

Actually, undefined wikistyles default to class='name', so this
can also be written as

    %img classid% Attach:image.gif

Or, you can even do just

    %classid% Attach:image.gif

and then use  "span.classid img" as your CSS selector.

> * Or ability to wrap the image in a DIV for the same reasons.

    >>classid<<
    Attach:image.gif
    >><<

> * Possibly hit both of the above by having some standard frame CSS which 
> makes it easy to hit, but with a unique (optional) outer div which 
> allows you to just pick out certain images.  

I think we can do this already with wikistyles but I'd need a
more concrete example of what you're looking for here.

> It looks like for simplicity we can discuss three cases here:
> * Attachments which are meant to be shown as attachments, ie not inline

    [[Attach:...]]

> * Attachments which are meant to be shown inline and have some resizing 
> ability at the server end (other formatting not considered yet)

I'm not sure what this should look like yet.  (To be pedantic, I would
phrase this as "attached images" as opposed to "attachments" in general.)

> * Inline images which can be formatted, captioned, etc, etc, including 
> the resized versions from the point above

I think that formatting/captioning etc. should be orthogonal to
resizing, so I'd use the approaches I described above.

Pm