Custom Thumbnail for cpg1.5.x issue

[brynn]

Hi Friends,
Honestly, I'm not sure whether to post this in the official plugin support thread, or make a new topic.  After some....sort of diagnostic steps, I think this may not be purely about this plugin, so I'm starting a new topic.  I apologize if this is the wrong decision.  (But you can probably move it, if necessary, right?)

This is the file I downloaded, from the support topic:  http://forum.coppermine-gallery.net/index.php?action=dlattach;topic=60272.0;attach=33786, and installed to my CPG 1.5.24, which is bridged with SMF 2.06 (and Tiny Portal 1.107).  This album shows some images with the problem:  http://inkscapecommunity.com/ic_gallery/thumbnails.php?album=18  All the thumbnails in that album are custom.

The images to which I've assigned custom thumbnails are SVGs.  And since the SVGs, as far as CPG is concerned, are documents, the thumbs and intermeds are a generic icon (looks like a transparent cube to me).  So that's why I wanted to try this plugin.  [more info below*]

As guests, you won't be able to bring up the full size images, because of my configs.  But I'll be ready to PM anyone with credentials for a test membership.  I'd rather not post them openly, since editing is not allowed here.  Oh wait, I don't think PM is enabled here either.....  Yeah, it says I'm not allowed....  Ok, I'll post a reply with the creds after I post this.

Oh gosh!  Maybe it IS the SVGs??  Well let me tell you the problem 1st.  The biggest problem is that even though I check the "Create custom intermediate-sized image" box (in the Upload custom thumbnail dialog), it only creates a thumbnail.  There's a thumb in the album view and a thumbnail on the intermediate page.  You'll see this in the 2 Tweety Bird images and 2 flower-like images. 

But just now, I uploaded a PNG, and then I gave it a different PNG as a custom thumb (the one titled "test custom thumb" that looks like a silly turkey).  This time, it did create the proper sizes (thumbnail and intermed).  So I guess it must be the SVGs, that for some reason, the plugin can't create the intermediate size.

Note that I'm not trying to use an SVG as a custom thumb.  It's just the image which needs a custom thumb is SVG.

It seems like it must be something about the SVG that's causing this.  Because next, I took the same flower-like SVG and used the same silly turkey PNG for a custom thumb (the 1st silly turkey thumb, titled "mandala").  And even though the turkey PNG worked perfectly when assigned to another PNG (2nd silly turkey, titled "test custom thumb"), when it's assigned to an SVG, only the thumbnail size is created.

Well not exactly perfectly I guess.  It looks like it lost it's native proportions.  In the "test custom thumb" thumbnail (assigned to a PNG), the image is distorted.  However in the "mandala" thumb (assigned to an SVG), it looks about right...although there's no intermed size.

* Up until a couple hours ago, I had the SVG Support plugin installed.  It doesn't work properly, but I haven't been able to find anyone who has the skills and is interested in fixing it.  Details about the malfunctioning here:  http://forum.coppermine-gallery.net/index.php/topic,76674.msg370151.html#msg370151.  I was still using it because I thought I couldn't upload SVGs without it.  But in discussing the use of SVGs in my gallery with someone earlier today, I got the idea that maybe I don't need the SVG plugin after all.  I uninstalled it, and learned that SVGs indeed CAN be uploaded without the plugin.  But unfortunately, all the SVG images' thumbnails and intermediates were replaced with the transparent cube icon.  (I think this is because CPG considers SVG to be a document rather than an image.)  However, if you click on that icon in the album view (thumbnails) it does take you to the intermed page.  And if you click on the intermed, you actually DO get the full size SVG!  And that's what made me think to try this Custom Thumnail plugin.  It's really a nice solution, at least temporarily.  But it's got this issue where it doesn't create the intermediate.

And finally, a couple of more minor issues.  You see how the flower-like image shows a black background in the thumbs, but the image actually has a transparent bg.  It would be nice if the image could keep its transparent bg.  You can see in the silly turkey images, that it shows as transparent, but I don't know what's different, that might account for it.  (Both PNGs were exported from SVG in Inkscape, both with fully transparent bgs.)

Also, as I mentioned, in 1 case, the thumbnail does not have its proper proportions.  And the last issue -- very, very minor, and really hardly worth mentioning.  But I think it's interesting anyway.  Full size PNGs open in a new window, while full size SVGs open in a new tab.   

Ok then.....Thank you very much!  I'll appreciate any comments or assistance.  If I've left out any details, lmk and I'll fill in the blanks.  I'll be right back and post credentials to a test membership.  Oorrr....actually it's pretty late here.   I'll do that first thing tomorrow 

Thank you very much for any comments or assistance 

[brynn]

Ok, sorry for the delay.

Here's member creds that you can use:

username:  ranger
password:  efghijkl

Attached is an SVG image that you can use to test with, if you don't have any.  Oh, well it doesn't list SVG as an allowed file type, so that attachment might not work.  If it doesn't....well you can just grab one from my gallery.  Open this page:  http://inkscapecommunity.com/ic_gallery/albums/userpics/10001/mand2plain.svg.  Then right-click > Save Page As, and be sure to save as SVG.

And a PNG is attached for your convenience, if necessary.

If you need to configure your test gallery to accept SVGs, I can tell you how I set mine.  Although you all probably know how to do that already 

And if you need anything else, let me know 

Thank you very much!

[Αndré]

The biggest problem is that even though I check the "Create custom intermediate-sized image" box (in the Upload custom thumbnail dialog), it only creates a thumbnail.  There's a thumb in the album view and a thumbnail on the intermediate page.  You'll see this in the 2 Tweety Bird images and 2 flower-like images.

As far as I can tell the intermediate-sized images are created correctly: http://inkscapecommunity.com/ic_gallery/albums/userpics/10001/normal_my_tweety.jpg

It seems that the main issue is, that Coppermine doesn't use it for your intermediate-sized pages. Can you please confirm via FTP, if intermediate-sized files are created as expected?

[brynn]

Thanks André

slightly off topic -- Even though I had uploaded PNGs for the custom thumbs (for SVGs) the plugin apparently created JPGs.  Is that expected?  Hhmmm, it looks like if the image to which the custom thumb is applied is a PNG, the new custom thumb and intermed are also PNGs.  But if I assign a PNG as a custom thumb/intermed, to an SVG, it looks like JPGs are created (for the custom thumb/intermed).

Ok yes, all the normal_filename.jpg files are on the server, for all the SVGs to which I assigned custom thumb/intermed (PNGs).  So yes, it looks like they are created, but not used.  But this appears to be so, only if the uploaded image to which the custom thumb is assigned, is an SVG.  If I assign a PNG custom thumb/intermed to another PNG, the plugin not only creates PNGs, but they are the proper size, and they are displayed.

[Αndré]

I just made some tests. The reason why the thumbnail image is always used is the following code:

Code (include/themes.inc.php) Select Expand

    } elseif ($mime_content['content']=='document') {
        $pic_thumb_url = get_pic_url($CURRENT_PIC_DATA,'thumb');
        $pic_html = "<a href=\"{$picture_url}\" target=\"_blank\" class=\"document_link\"><img src=\"".$pic_thumb_url."\" border=\"0\" class=\"image\" /></a><br />" . $LINEBREAK;
        //PLUGIN FILTER
        $pic_html = CPGPluginAPI::filter('html_document', $pic_html);
    }

As you can see, the parameter 'thumb' is passed to the function get_pic_url. You'd expect that the intermediate-sized version is used if you use

Code Select Expand

        $pic_thumb_url = get_pic_url($CURRENT_PIC_DATA,'normal');
but it won't, as there's additional code:

Code (include/functions.inc.php) Select Expand

    if ($mime_content['content'] != 'image' && $mode == 'normal') {
        $mode = 'fullsize';
    }
which sets the mode to full-sized for non-image files.

This means, the original SVG image is used on the intermediate-sized page. This is probably what you actually want, but I don't know if it causes issues on other/older browsers. However, it seems to work as expected with Firefox 17 (that's the only browser I currently can test with).

Please apply the above change in your theme's theme.php file (function theme_html_picture) if you want to use it.

[brynn]

Thank you very much, Andre 

I don't understand much about your comments, but I'm trying hard.  Are you saying that the problem is not with the Custom Thumbnail plugin, but rather with....well, something else (I don't know what "includes" is) which can be fixed by editing theme.php file?

You're saying the thumb size is being used because SVG is considered a document rather than an image (as far as CPG is concerned), right?  And somehow by being a document, the Custom Thumbnail plugin....I guess is sort of confused?

Keeping in mind that I know very little about php, is this what you mean for me to do:

1 -- Open theme.php
2 -- Paste in the following:

Code Select Expand


function theme_html_picture ()
{
} elseif ($mime_content['content']=='document') {
        $pic_thumb_url = get_pic_url($CURRENT_PIC_DATA,'normal');
        $pic_html = "<a href=\"{$picture_url}\" target=\"_blank\" class=\"document_link\"><img src=\"".$pic_thumb_url."\" border=\"0\" class=\"image\" /></a><br />" . $LINEBREAK;
        //PLUGIN FILTER
        $pic_html = CPGPluginAPI::filter('html_document', $pic_html);
} if ($mime_content['content'] != 'image' && $mode == 'normal') {
        $mode = 'fullsize';
    }


3 -- Save, upload/overwrite

If by some wild chance I've inferred and....well, guessed correctly, does it matter where in theme.php I put it?  It looks like the end of various sections in theme.php seem to be defined with EOT;  Should I just put it right after one of those?

Although I seriously doubt my understanding is correct, lol.  If not, would someone please be so kind as to tell me which code needs to be....well on thing I'm pretty sure about, is that the code needs to be just added in, rather than replacing something, because I can't find any of the code Andre provided already in theme.php.

Thanks again 

(I'll be able to test on IE11, once I get the proper edit done.  And I have members who can test with Chrome.  I'll let you know if any probs )

[Αndré]

Keeping in mind that I know very little about php, is this what you mean for me to do:

1 -- Open theme.php
2 -- Paste in the following:

Code Select Expand


function theme_html_picture ()
{
} elseif ($mime_content['content']=='document') {
        $pic_thumb_url = get_pic_url($CURRENT_PIC_DATA,'normal');
        $pic_html = "<a href=\"{$picture_url}\" target=\"_blank\" class=\"document_link\"><img src=\"".$pic_thumb_url."\" border=\"0\" class=\"image\" /></a><br />" . $LINEBREAK;
        //PLUGIN FILTER
        $pic_html = CPGPluginAPI::filter('html_document', $pic_html);
} if ($mime_content['content'] != 'image' && $mode == 'normal') {
        $mode = 'fullsize';
    }


3 -- Save, upload/overwrite

Sorry, I thought I replied to someone else who already knows his/her way around with the theme engine. That's why I posted just the technical stuff. There's nothing wrong with the plugin, but that's just the way how Coppermine currently works. Here are the full instructions how to change this:

Copy the function theme_html_picture from themes/sample/theme.php to your theme's theme.php file, if it doesn't exist. Then, find

Code Select Expand

$pic_thumb_url = get_pic_url($CURRENT_PIC_DATA,'thumb');
and replace with

Code Select Expand

$pic_thumb_url = get_pic_url($CURRENT_PIC_DATA, ($mime_content['extension'] == 'svg' ? 'normal' : 'thumb') );

As I already tried to explain, Coppermine now uses the full-sized SVG image on the intermediate-sized (which seems to work without an issue at least with Firefox 17). I adjusted the code, so it won't apply for other document types than SVG. Depending if you want to use the intermediate-sized custom picture on the intermediate-sized pages, you need to apply an additional fix I haven't created yet.

[brynn]

Happy dance, happy dance!!  Kiss on cheek for Andre    Thank you SO much 

Yes, now I get full size image on intermed page.  See the last image in this album:  http://inkscapecommunity.com/ic_gallery/thumbnails.php?album=18, titled "spiro-colors".  That's the custom thumbnail, and I left the intermed box unchecked.  And then here's the full size image on the intermed page:  http://inkscapecommunity.com/ic_gallery/displayimage.php?album=18&pid=202#top_display_media

But I think I would like the intermediate size, if you have some spare time to make the code.  Because you can see what a very large image does on the intermed page.

Also, it seems to work just fine in IE11.

And another question.  If I set up a custom thumbnail for an image, and then later decide to change or delete it, is there any way to do that?   It looks like the only way would be to delete the whole image, and then upload it again.  But maybe I just haven't found the right button yet?  I tried just uploading another custom thumb, but it didn't work.

And finally, I want to change the password on the test member ranger.  Do you still need it anymore?

[Αndré]

Undo the above change. Instead, apply the following change.

Copy the function theme_html_picture from themes/sample/theme.php to your theme's theme.php file, if it doesn't exist. Then, find

Code Select Expand

$pic_thumb_url = get_pic_url($CURRENT_PIC_DATA,'thumb');
and below, add

Code Select Expand

        if ($mime_content['extension'] == 'svg') {
            $pic_thumb_url_normal = str_replace('/'.$CONFIG['thumb_pfx'], '/'.$CONFIG['normal_pfx'], $pic_thumb_url);
            if (file_exists($pic_thumb_url_normal)) {
                $pic_thumb_url = $pic_thumb_url_normal;
            }
        }

[brynn]

Hhmm, not so much success this time.  It's behaving the way it was before you gave me the 1st new code.

After the 1st change in code, the change in the gallery took place retroactively, meaning that it worked on SVGs that already were uploaded.  However, I did upload the new file to show you that using the Custom Thumbnail plugin worked properly (since I can't seem to be able to delete or change a custom thumb).

This time, there doesn't seem to be any retroactive behavior, and the full size image on the intermed page disappeared (as I would expect).  However, no intermed image appears.  And I also uploaded a fresh SVG to test, and still no intermed image.

Oh wait....maybe it does work after all, although now I'm confused (big surprise!).  When I made the 1st change in the code, which put the full size SVG on the intermed page, it not only took place retroactively, but the full size image was there (on intermed page), whether I used the Custom Thumbnail button or not.  Now after this 2nd change, I do have to use the Custom Thumbnail button to get the intermed image.

Is that how it's supposed to work?  If so, then I guess I'm good to go....except for the question about changing or deleting a custom thumb.  Although I am curious why the custom thumbnail button is needed for the intermed image, when it wasn't needed for the full size image.

Oh wait!  I think I know why!  Or at least I have a general idea.  So never mind    And assuming the answer to how to change or delete a custom thumbnail, is that it can't be changed or deleted, then I really am good to go.

Thank you SO much, Andre!

PS -- Ironically, someone just contacted me who thinks they might be able to fix the SVG plugin (I mean just 5 minutes ago!).  If they can, and their fix works, I'll see to it you all get a copy.

Thanks again   

[brynn]

I forgot to show you a newly uploaded file using intermed size custom thumbnail:  http://inkscapecommunity.com/ic_gallery/displayimage.php?pid=203

Thanks again 

[brynn]

Uh-oh!  Slight problem.  Well first, here's a new link to the new test image:  http://inkscapecommunity.com/ic_gallery/displayimage.php?pid=205.

The custom thumbnail and custom intermed look fine.  But when I click on the intermed to get the full size, the full size does not show the black background.  So I deleted the first one, and uploaded again, just to be sure.  But still, the background doesn't show as black.

Is that something that can be fixed?  There were some other cases where the background was supposed to be transparent, but the custom thumbnail and intermed showed black backgrounds.  Is this a problem with CPG??  Or there's some explanation?

Arrgghh!  Ok, I already changed the test member ranger pw.  So give me a second and I'll change it back, so you can look at the full size.

In case it's a browser image, I'm using Firefox, and I'll also test on IE.

[brynn]

Ok, to see full size of this image:  http://inkscapecommunity.com/ic_gallery/displayimage.php?pid=205, log in as

username:  ranger
password:  efghijkl

The background shows white for the full size in both Firefox and IE (supposed to be black).  Is this fixable, or at least explainable?

TA

[Αndré]

Not sure why you post login data, as I can see all images as guest (intermediate and full sized).

However, as the full-sized SVG file is rendered by your browser, that's nothing Coppermine can fix, as that's out of Coppermine's scope.

[brynn]

Not sure why you post login data, as I can see all images as guest (intermediate and full sized).

I don't think you can see full sized images if you're not logged in.  Because under Config > User Settings > Allow unlogged users, I have Yes: thumbnail and intermediate checked off.

It must be because this is an SVG image.  I guess Coppermine doesn't recognize SVG as an image file, in any sense.  (which really is crazy, since an SVG/XML file, as text, has only 1 purpose, to display an image)  Tell me, without logging in, can you see the full size of this image, which is a PNG:  http://inkscapecommunity.com/ic_gallery/displayimage.php?album=18&pid=206#top_display_media?  It's the same size as the SVG.

However, as the full-sized SVG file is rendered by your browser, that's nothing Coppermine can fix, as that's out of Coppermine's scope.

Then what about the custom thumbnail for this image:  http://inkscapecommunity.com/ic_gallery/displayimage.php?album=18&pid=192#top_display_media.  Coppermine did create that, right?  It shows a black background, when the SVG image actually is a transparent background.  Can that be fixed?  Or is it the browser that adds the black background?

[Αndré]

Tell me, without logging in, can you see the full size of this image, which is a PNG:  http://inkscapecommunity.com/ic_gallery/displayimage.php?album=18&pid=206#top_display_media?

No. Works as expected and indeed seems to be an issue with SVG, as it's no image, but document type.

Then what about the custom thumbnail for this image:  http://inkscapecommunity.com/ic_gallery/displayimage.php?album=18&pid=192#top_display_media.  Coppermine did create that, right?  It shows a black background, when the SVG image actually is a transparent background.

Probably the custom thumbnail plugin created it, if you haven't done that manually. However, it shows a white background to me, please clear your browser cache or try again with a different browser.

[brynn]

No I didn't make it with a black background.  The PNG (which was created in Inkscape, by exporting the SVG) has a transparent background.  I could upload the PNG, if you need to see it.

I cleared my Firefox cache, and refreshed the album page, but all of the custom thumbs (that were made with that PNG) show a black background.  I also looked at the album with IE, but still shows black background on all the thumbnails which were made from that PNG, with the Custom Thumbnail plugin.
______________

Also, I just noticed another issue.  Maybe it's somehow a problem with the browser?  Can you tell me?  If you look at the custom intermediate image here:  http://inkscapecommunity.com/ic_gallery/displayimage.php?album=18&pid=205#top_display_media, then click to get the full size SVG (http://inkscapecommunity.com/ic_gallery/albums/userpics/10001/spirocolorsblack.svg) it's not just that the black background is missing.  Each of those spirograms have been moved around somehow.  They are not in the same position in the full size SVG as they are in custom thumb, custom intermed and original SVG.  How did that happen??

The only way that I know of, for that to happen, is that the SVG/XML doc would have to be editted.  After I post this, I'll compare the page source to the original SVG file.  Maybe I can find some clues.

[brynn]

Oh, my bad.  I had accidentally uploaded a different file.  So the spirograms didn't get moved around after all.

[Αndré]

I cleared my Firefox cache, and refreshed the album page, but all of the custom thumbs (that were made with that PNG) show a black background.

Sorry, I overlooked the word "thumbs". I just re-checked and you are correct, all thumbnails of that picture have a black background. The reason can be found in the known issues docs:

Resizing gif/png with transparent background doesn't preserve alpha info

So you either need to add a background color of your choice before using the custom thumbnail plugin, or use the following workaround. At first, upload the custom thumbnail while creating also an intermediate-sized picture like before. Then, export your PNG a second time from Inkscape, but use a smaller resolution which fits your Coppermine settings, so the plugin doesn't need to resize the image. Upload this file as custom thumbnail while not creating an intermediate sized picture.

[brynn]

Oh, so that explains why that tiny peace icon image maintained its transparent background.  It's too small to need resizing!

Is there any estimated time for fixing that issue?  Or somewhere I can read about it myself?

Thank you very much for all your help with this!  I'll mark solved now.