Patches and Updates for the img_assist.module

I've been working on a patch for the img_assist.module that allows you to easily link uploaded images (using image.module, and upload.module, or compatible) into other node types. The img_assist.module is quite dandy and more or less indispensible in my book, but it is missing some very important features. img_assist.module only allows you to use certain predefined sizes (whatever's defined for images, that is smaller than img_assist.module's maximum size) and a custom size. It also only gives you two alignment options: float left, and float right.

This patch is a combination (and substantial reworking) of two patches. One provides the "none" alignment type, so you can wrap a div (or similar) around it and align it yourself. This is probably the easiest way to center an image under the current system. It works like this:

<div style="width: 500px; margin: 0 auto;">
(image tag here, with align=whatever changed to simply align=)
</div>

You could also use a span; in that case you must add the style display: block; to your span. Divs are already block-level elements but spans display inline.

Actually, if you take the argument out of the "align=whatever" bit of the img_assist tag, you can achieve the same thing, but first you have to insert, and then you can change it. This provides a "none" pulldown option. The other patch provides an option to use the original size but it looks very much like something changed between 4.7.3 and 4.7.4 that alters the way it behaves, although it's not clear (to me) if this change was in core, image.module, or img_assist.module - I updated them all in this time. I ended up going back to the drawing board and reworking that function entirely, using only two core API calls to fetch the image size. This means that my patch should be compatible (in theory) with any future release of 4.7.

Let me share with you the important parts of the patch, where the rubber meets the road:

+++ img_assist.drink/img_assist.css 2006-11-08 12:07:48.000000000 -0800
@@ -118,6 +118,11 @@ span.right {
   float: right;
   margin: 5px 0px 5px 5px;
}
+span.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
span.caption {
   display: block; /* put the caption under the image (not next to it) */
}

As you can see, I'm adding the aforementioned styles here. When you select center, it spits out a span with the style "center" in it. The rest of these patches apply to img_assist.module, not to img_assist.css.

Next, I added another permission. I'm not going to show you that because it's so bloody obvious. What wasn't obvious is how to fetch the size of the original image:

@@ -725,6 +725,7 @@ function img_assist_properties() {
     $node->title = str_replace("\n", ' ', trim($node->title));
     $node->body = str_replace("\r", ' ', strip_tags($node->body));
     $node->body = str_replace("\n", ' ', trim($node->body));
+    $image_info = image_get_info(file_create_path($node->images['_original']));

Here's my API calls to fetch the image size. The hash "images" in the node object lists all the filenames for the images, keyed by their format name. _original is of course the filename for the original image. The file_create_path(filename) function will create a fully-qualified path for any file inside the drupal hierarchy; image_get_info(filename) will use GD to retrieve a bunch of information about the file and of course it returns a structure - the important values are of course height and width.

@@ -769,6 +770,13 @@ function img_assist_properties() {
       }
     }

+    // Add a choice for 'original' if it's within the maximum size.
+    if ($img_assist_create_derivatives['custom_advanced'] && user_access('use original size')) {
+      if ($image_info['width'] <= $max_size[0] && $image_info['height'] <= $max_size[1]) {
+        $derivatives[$image_info['width']  .'x' . $image_info['height']] = t('original');
+      }
+    }

Here I show you what I'm doing with the new permission I created that I didn't show you ("use original size") and what I'm doing with $image_info (from image_get_info) here. Basically, if both width and height of the original image are less than the maximum width and height specified in the img_assist.module settings, and you have the proper permissions (you need the access advanced options and the use original size perms, both) then you also get an option to pull down the original size from the menu.

@@ -823,7 +831,7 @@ function img_assist_properties() {
     // Size
     $form[] = array('#value'=>"</td></tr><tr><td width="90%">\n");
     $form[] = array('#value'=>"<div class="form-item" id="size">\n");
-    $form[] = array('#value'=>"<label for="edit-size">Size:</label>\n");
+    $form[] = array('#value'=>"<label for="edit-size">Size: (orig " . $image_info['width'] . 'x' . $image_info['height'] . ", max " . variable_get('img_assist_max_size', '640x640') . ")</label>\n");

Here I change the form displayed once you've selected an image to insert. It prints out the original size of the image (whether you're allowed to use it or not) and the maximum allowed size of an image (for reference.) This will tell you at a glance if there's a reason that the original size isn't showing up in the pulldown.

@@ -854,7 +862,7 @@ function img_assist_properties() {
       '#type' => 'select',
       '#title' => t('Alignment'),
       '#default_value' => variable_get('img_assist_default_alignment', 'left'),
-      '#options' => array('left'=>'left', 'right'=>'right'),
+      '#options' => array('left'=>'left', 'right'=>'right', 'none'=>'none', 'center'=>'center'),

This little tweak adds the "none" and "center" alignment options.

@@ -1262,7 +1270,11 @@ function theme_img_assist_inline($node,
   $node->title = strip_tags($caption); // change the node title because img_assist_display() uses the node title for alt and title
   $img_tag = img_assist_display($node, $size);

-  $output  = "<span class="inline {$attributes['align']}">";
+  if ( $attributes['align'] == "center" ) {
+    $output = "<span class="inline {$attributes['align']}" style="width: {$attributes['width']}px;">";
+  } else {
+    $output  = "<span class="inline {$attributes['align']}">";
+  }

Here's where we actually handle the centering. Since the <CENTER> tag has been deprecated, we now have to center content with CSS. Some objects have alignment options; for example we can use the text-align to center text. (IE also erroneously uses it to center images contained within the text.) To center a block-level element you must give it a width and then set its left and right margins to "auto". You can specify the width in ems or pixels or whatever CSS supports, but it must have one. The very first bit of patch (up at the top of this story) contains the needed CSS that goes along with the one CSS style specified directly on the span element - the size. img_assist.module uses CSS exclusively to handle positioning because this is necessary to support captions properly. Otherwise, you could just set the align= property on the img element.


Updated 20061128: Rolled new version of the patch for the latest 4.7.x release. Attached below.

Add new comment