Using "Allow dynamic image resizing"

[adamcharnock]

Hi Everyone,

I was hoping to make use of the "Allow dynamic image resizing?" config option in Serendipity, but I was not sure how it actually worked.

Is there a URL to a specific script that I need to use to load my images in order for the dynamic resizing to be done? At the moment I am just pointing my 'src' attributes directly to the location of the image file.

Thanks!

Adam

[garvinhicking]

Hi!

Actually, yes - you need to access the serendipity_admin_imageselector.php script for that. It takes a serendipity[iimage] GET parameter for the ID of the image you want to display.

Then you can use ?serendipity[resizeWidth] and ?serendipity[resizeHeight] to indicate the new size of that image.

?serendipity[show] can be set to 'redirect' if you want the script to redirect to the original image (without resizing) and 'redirectThumb' to redirect to the original thumbnail (without resizing). Those methods will only count the referrers of an image without resizing.

If serendipity[show] is set to 'full' it will resize the original image, 'thumb' resizes the thumbnail.

serendipity[disposition] can be set to 'attachment' or 'inline' to change the HTTP-Headers for the Mime Content-Disposition.

HTH,
Garvin

[adamcharnock]

Hi Gavin,

Thanks for the reply, I will give that a go shortly. Do you think there would be interest in a plugin to do this automatically?

For example, it could grep an entry for IMG tags just before it is displayed and replace the SRC attributes with calls to serendipity_admin_imageselector.php based on the tag's width/height attributes.

It would be a slight performance hit on the server, but makes the life of the author simpler. The plugin could also ignore an IMG tag if it contains no width/height attribtes.

If you think this would be handy then I will see if I can knock something out.

Thanks,

Adam

[adamcharnock]

I have also just noticed something else. It seems that when you call serendipity_admin_image_selector.php with the params you describe it does perform the image resizing correctly, but still returns the full (or thumbnail, depending on your params) size image. I was using the following:

serendipity_admin_image_selector.php?serendipity[image]=1&serendipity[resizeWidth]=300&serendipity[resizeHeight]=300&serendipity[show]=full&serendipity[disposition]=inline&serendipity[step]=showItem

I was not sure that this was intentional, so I made the following chance to add a 'resized' value for the show param.

Code: Select all

217a218,223
>             case 'resized':
>                 if($showfile){
>                     break;
>                 }else{
>                     $showfile = 'full';
>                 }

So the URL would now be:
serendipity_admin_image_selector.php?serendipity[image]=1&serendipity[resizeWidth]=300&serendipity[resizeHeight]=300&serendipity[show]=resized&serendipity[disposition]=inline&serendipity[step]=showItem

As I said, I am not sure if this is intended behaviour or not. It would also be possible to call this script and then address the resized file directory, but (in the case of the plugin I suggested) I do not think that this would be any faster (as a call would still have to be made for each image - so unless the same image was listed several times it would be no faster).

Does that all make sense?

Thanks!

Adam

Update: Made slight change to proposed patch (added else)

[garvinhicking]

Hi!

I definitely think a plugin (or core feature) using this would be fine. The script has been developed when I integrated the s9y mediadatabase into a nother CMS, so this additional coding was not really tightly implemented for serendipity as well.

If someone like you could hook it up with a plugin or so, that would be awesome.

I'm actually surprised that your initial call did not result in a resized image being shown. I know it worked for the foreign CMS to resize the image according to the URL parameters, so I think there must be something else wrong. Sadly I'm lacking the time to inspect the code today, but I can do so coming week.

So if the resized image is really not the image being shown, there's a bug. But mabe it's only a matter of how the URL variables are added, so I'd need to check that.

Regards,
garvin

[adamcharnock]

Ok, I promised myself I would actually go to bed rather than stay up working on this - but in the end I just went for it and came up with a plugin to do this:

http://porteightyeight.com:8080/svn/cod ... utoresize/

Or from this file:

http://porteightyeight.com/serendipity_ ... ize.tar.gz

It seems to work OK to me. It will rewrite a URL if:
1) It recognises it as a url in uploads/ or in templates_c/mediacache
2) The image tag has the height and/or the width attribute set.

Otherwise it will just leave the images alone.

I would welcome any feedback on this as it is my first proper plugin. Also, I am pretty tired at the moment so please excuse any stupid mistakes - I may have to tweak some things once I am rested

Oh, and it only works on the main article page at the moment, not the listing pages.

It also assumes that my modification in the previous post in this thread has been made.

Adam

[garvinhicking]

Hi!

Thanks for working on this, I greatly appreciate this. You seem well experienced, and fresh input is always something great.

I looked into the issue. As it turns out, you can work without patching the core s9y, if you simply do NOT submit any $serendipity['GET']['show'] variable; then $showfile will already be initialized. This is a bit tricky, I agree. So when you now use a 'show' value other than redirect,redirectThumb,full or thumb, it should already work without your patch. This was kind of funny, because when I used the URL:

serendipity_admin_image_selector.php?serendipity[image]=280&serendipity[show]=resized&serendipity[disposition]=inline&serendipity[step]=showItem&serendipity[resizeWidth]=320&serendipity[resizeHeight]=240

I at first was surprised to see that my image got properly rescaled; because my installation doesn't have a "resize" case.

Now as to your plugin: I don'T see any problems with that. However I would like to ask if you could imagine adding that code into the serendipity_event_imageselectorplus plugin? It think it fits fairly well into there, and then doesn'T raise the isolated plugin count in our repository.

You could pretty easily merge your code there, maybe add a config switch to indicate whether someone wants to use that img replacement or not? Because of the performance impact, not everyone might want to have that.

As for future improvements, the plugin could be changed so that it would work with the entryproperties-caching method. If you want to dig into this (it's a bit diving into), you could have a look at the nl2br or bbcode plugins; both interact with caching through the "cachable_events" stuff and a Frontend_display_cache event hook. It's pretty hard to describe in words, but if you look at it in code, I'm sure you'll get the ghist of it.

Best regards,
Garvin

[adamcharnock]

Hi Garvin,

I have moved my changes over to the image selector plus plugin and added a config option to enable/disable it. I have added a couple of constants to lang_en.inc.php file, but my foreign language are pretty poor so I will have to leave the translations to someone else.

The patch can be found here:

http://porteightyeight.com/serendipity_ ... plus.patch

I noticed that, after I ported it over, the changes started being applied 'on save' rather than 'on display', so I guess it is now caching now. However, this did happen a bit magically so it would be great if you could check that it is working as advertised.

If you need anything else please let me know.

Adam

[ormus7577]

Can't wait to test this! I recently started using the imageselector+ plugin and the dynamic resize will be really useful for the Mimbo theme with all it's different sized preview pictures... How does it handle the aspect ratio when using both width and height, best fit or stretch?

Did I say thank you for your effort yet?

[adamcharnock]

Hey,

No problem, I thought it would be handy!

If both width and height are specified it will resize to the best fit (I.e. it the final image will fit within the boundaries given by width and hieght)

Adam

[garvinhicking]

Hi!

Thanks a lot, I committed your patch.

Minor things:

- I added a space after between "if" and "(" as well as after the ")" to better match with our coding style, if you can adapt to that style in the future, that would be great

- I added a serendipity_db_bool() call around the usage of your get_config calls, this is required to be compatible with pgsql.

- You had a "//" disabling statement for operating on the eventdata['body'], I removed that?

Regards,
Garvin

[adamcharnock]

Hi Garvin,

Thanks for making those changes, I will bear them in mind in the future. And yes, that line should not have been commented out (I was just doing some testing on my blog). So that section of the patch should look like this:

Code: Select all

395a403,413
>                     
>                     // auto resizing images based on width and/or height attributes in img tag
>                     if($this->get_config('autoresize')){
>                         if (!empty($eventData['body'])){
>                             eventData['body'] = $this->substituteImages($eventData['body']);
>                         }
>                         if (!empty($eventData['extended'])){
>                             $eventData['extended'] = $this->substituteImages($eventData['extended']);
>                         }
>                     }
>                     

[ormus7577]

Ok, I've installed and tested the plugin (at my local s9y, so I can't give you a link). Can't make it work though.

First of all it does grab a wrong id from the database (0 instead of 6). Probably a minor problem.

If I take the generated url and replace the id with the correct one it will not show a resized version of the image but some image overview page (containing the image, the media properties, exif etc., pretty much what the media library will show when selecting properties of an image). So the generated output by the url is html and not a valid image, therefor nothing is displayed in the entry. Here's the (local) url, linebreaks added for easier reading:

Code: Select all

http://localhost/serendipity/serendipity_admin_image_selector.php?
serendipity[image]=6
&serendipity[show]=resized&serendipity[disposition]=inline
&serendipity[step]=showItem&serendipity[resizeWidth]=270

Any ideas?

Oh, and a question: The markup is only applied to entry/extended entry, right? Is there any way to apply it to the entire document?

[garvinhicking]

Hi!

Did you enable the s9y config option "Allow dynamic image resizing"?

Oh, and a question: The markup is only applied to entry/extended entry, right? Is there any way to apply it to the entire document?

What do you mean with entire document? A document only consists of body and extended entry...

Regards,
Garvin

[ormus7577]

Hi!

Did you enable the s9y config option "Allow dynamic image resizing"?

Yeep, otherwise the img src wouldn't have been changed

What do you mean with entire document? A document only consists of body and extended entry...

Sorry, I meant the body. I would like to use the resize functionality in .tpl-generated html as well (as mentioned in the Mimbo thread).

Another thing I've noticed for the plugin: It selects the id by using the name and extension. This can lead to a wrong id, when the name.extension is not unique because of subfolders. Adam, why are you using the id and not the actual image url for the GET parameter? The real image url would be more versatile, wouldn't it?

*edit* Shouldn't serendipity_admin_image_selector.php be changed as well? The serendipity[show]=resized param is not handled in the current version...