Differentiate thumbnails by media icon (picture, video, pdf, sound,...)

[cl9m]

it would be useful to differentiate the thumbnails photo, video, pdf, sound, and other...
juste make different class in css to put a different media icon on hover thumbnail it's possible in css3.

I'm the only one interested?

[Αndré]

So you want to add CSS classes for each filetype, e.g. for jpg thumbnails_jpg, for mp4 thumbnail_mp4 etc.? What exactly would be the benefit of those "hover thumbnail" respectively what exactly do you try to accomplish? As Coppermine adds the file name to the alt tag of each thumbnail image, it should be possible to add such classes already via a plugin.

[cl9m]

yes that's right, but how can you detect the file type? The file name don't help me.

I made a screenshot mockup for better explained
(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fimg38.imageshack.us%2Fimg38%2F6361%2Fexamplead.jpg&hash=2284562aca9d430c9349c16312921ccfcc34965a)

[Αndré]

There are two approaches I think.
1.) Add CSS classes for each file type (picture/audio/video/document)
2.) Add CSS classes for each file extension (jpg/pdf/mp4/mp3/......)

Of course both could be combined to make theme authors an easier life, as they don't have to specify every possible file extension. There's a Coppermine function cpg_get_type that returns the file type.

This is the feature requests board, so please don't expect support.

[cl9m]

I didn't kown this function cpg_get_type.
Now it's not a fearture requests
If you want you can move this topic to support board.

Thanks you

[cl9m]

I try this in my theme.php

Code Select Expand



/******************************************************************************
** Section <<<$template_thumbnail_view>>> - START
******************************************************************************/

// HTML template for thumbnails display
$template_thumbnail_view = <<<EOT
<!-- BEGIN header -->
        <tr
<!-- END header -->
<!-- BEGIN thumb_cell -->
  <div class="thumbgrid"> <a href="{LINK_TGT}">
  <?php 
  function cpg_get_type($file, 'movie') {
    echo 'movie';
}
?>
{THUMB}{CAPTION}</a>   
                                        {ADMIN_MENU}</div>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="middle" class="thumbnails" align="center">&nbsp;</td>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
        </tr>
        <tr>
<!-- END row_separator -->
<!-- BEGIN footer -->
       </tr>
<!-- END footer -->
<!-- BEGIN tabs -->
        <tr>
                <td>
                        <div id="paginationcontainer"><table width="99%" cellspacing="0" cellpadding="0">
                                <tr>
                                       {TABS}
                                </tr>
                        </table></div>
                </td>
        </tr>
<!-- END tabs -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - END
******************************************************************************/


please can you tell me how can I use function cpg_get_type?
I've found nothing on help doc and this forum.

[Αndré]

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

Code Select Expand

        $i++;
        if ($mode == 'thumb') {
and (depending if you want to apply that mod for the user gallery thumbnails or not) above or below, add

Code Select Expand

            $type = cpg_get_type($thumb['filename']);
            $thumb['image'] = str_replace('class="image"', "class=\"image thumbnail_type_{$type['content']} thumbnail_extension_{$type['extension']}\"", $thumb['image']);


[cl9m]

Thank you so much André for your help!
your are a king!

[cl9m]

How can I put it on the filmstrip's thumbnails?

[Αndré]

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

Code Select Expand

        $i++;
        if ($mode == 'thumb') {
and below, add

Code Select Expand

            preg_match('/alt="(.*)"/Ui', $thumb['image'], $matches);
            $thumb['filename'] = $matches[1];
            $type = cpg_get_type($thumb['filename']);
            $thumb['image'] = str_replace('class="strip_image"', "class=\"strip_image thumbnail_type_{$type['content']} thumbnail_extension_{$type['extension']}\"", $thumb['image']);

[cl9m]

Thank you so much André for your help!

[Αndré]

Committed similar approach in SVN revision 8538. This will be a core feature as of cpg1.5.24.

Reverted in SVN revision 8538 (until it's clear if it works as supposed).

[Αndré]

make different class in css to put a different media icon on hover thumbnail it's possible in css3.

I just tried that in my testbed, but I just found solutions where you need an extra (e.g. span) tag for the overlay image and a wrapper class. Have you solved it differently or solved for Coppermine at all? If so, can you (or anyone else) please share your solution? Thanks.

[Αndré]

The default template $template_thumbnail_view contains something like

Code Select Expand

                                <td align="center">
                                        <a href="{LINK_TGT}">{THUMB}<br /></a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>

The solution I found needs something like that to work:

Code Select Expand

                                <td align="center">
                                        <div class="thumbnail_wrapper">
                                                <a href="{LINK_TGT}">{THUMB}<span></span><br /></a>
                                        </div>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>

If we assign the new CSS classes to that new span element, the mod works for me as expected. As I'm far away from being a CSS guru, maybe someone has a better solution.