WikiPatches/UploadWithAlignementAndCaption

This Patch allows picture alignement (left, center and right) together with caption for ilustration. There's two cuestions about a good css flow: a) clear floats and b) enclose a floated element. These questions in regard to css deserves further study on my part. The b) is pretty complex to achieve success in all browsers.

Markup is upload:right|center|left:caption:image.ext with backward compatibility, i.e. upload:image.ext has the same behavior than before the patch.

There're also three three issues to be completing the images management: file system a la GetPageDirectory, delete image and index of all images.

Maybe you're also interested in WikiPatches/UploadWithAlignementCaptionAndExternalURL?.

The Patch

--- upload-1.0.4.pl 
+++ upload-patch.pl 
@@ -1,17 +1,54 @@
-
 sub UploadLink {
   my ($filename) = @_;
+  my ($param, $caption, $imgName);
+  my $image;
+  
+  my @image = split (/:/, $filename);
+  
   my ($html, $url);
+
+  my $id  =  $OpenPageName;
  
   return $filename  if ($UploadUrl eq '');  # No bad links if misconfigured
   $UploadUrl .= '/'  if (substr($UploadUrl, -1, 1) ne '/');  # End with /
-  $url = $UploadUrl . $filename;
-  $html = '<a href="' . $url . '">';
-  if (&ImageAllowed($url)) {
-    $html .= '<img src="' . $url . '" alt="upload:' . $filename . '">';
-  } else {
-    $html .= 'upload:' . $filename;
+  if (($image[1] ne '') && ($image[2] ne '')) {
+    $url = $UploadUrl . $image[2];
   }
-  $html .= '</a>';
-  return $html;
+  if (($image[1] eq '') && ($image[2] eq '')) {
+    $url = $UploadUrl . $image[0];
+  }
+   if (($image[1] ne '') && ($image[2] ne '')) {
+     $html .= '<div class=clearfix>';
+  }
+  if ($image[0] eq 'left') {$html .= '<div style="float: left;>';}
+  if ($image[0] eq 'right') {$html .= '<div style="float: right;>';}
+  if ($image[0] eq 'center') {
+    $html .= '<div style="clear:both; "></div>
+    <div margin-left:auto; margin-right:auto; align=center>';
+    }
+  $html .= '<a href="' . $url . '">';
+  if (($image[1] ne '') && ($image[2] ne '')) {
+    if ( &ImageAllowed($url) ) { 
+  $html .= '<img class=graph src="'. $url 
+    . '" alt="upload:' . $image[2] . '">';
+  $html .= '  </a>';
+	$html .= '<br>' . '<p style=text-align:center;>' . $image[1]. '</p>';
+    } else {
+    $html .= 'upload:' . $image[2];
+    }
+  }
+  if (($image[1] eq '') && ($image[2] eq '')) {
+    if ( &ImageAllowed($url) ) { 
+  $html .= '<img class=graph src="'. $url
+    . '" alt="upload:' . $image[0] . '">';
+  $html .= '  </a>';
+    } else {
+    $html .= 'upload:' . $image[0];
+    }
+  }
+ if (($image[1] ne '') && ($image[2] ne '')) {
+   $html .= '</div></div>';
+   }
+   $html .= '</a>';
+   return $html;
 }
\ No newline at end of file

sub GetFooterText {
  my ($id, $rev) = @_;
  my $result;

  if (&GetParam('embed', $EmbedWiki)) {
    return $q->end_html;
  }
  + $result = '<div class=clear></div>'; # prevents bad fit of div.footer due to images-floats
  - $result = '<div class=wikifooter>';
  + $result .= '<div class=wikifooter>';

In wiki.css:

div.clear {
  clear:both;
  /*overflow: auto;*/
  overflow: hidden;
  width: 100%;
  padding:0;
  margin:0;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */


.clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */

--JuanmaMP