Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Differentiate thumbnails by media icon (picture, video, pdf, sound,...)  (Read 7153 times)

0 Members and 1 Guest are viewing this topic.

cl9m

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 118

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?
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15760

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.
Logged

cl9m

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 118

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
(http://img38.imageshack.us/img38/6361/examplead.jpg)
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15760

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.
Logged

cl9m

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 118

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
Logged

cl9m

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 118

I try this in my theme.php

Code: [Select]

/******************************************************************************
** 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.
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15760

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]
        $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]
            $type = cpg_get_type($thumb['filename']);
            $thumb['image'] = str_replace('class="image"', "class=\"image thumbnail_type_{$type['content']} thumbnail_extension_{$type['extension']}\"", $thumb['image']);
Logged

cl9m

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 118

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

cl9m

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 118
Re: Differentiate thumbnails by media icon (picture, video, pdf, sound,...)
« Reply #8 on: December 02, 2012, 03:14:40 pm »

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

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15760
Re: Differentiate thumbnails by media icon (picture, video, pdf, sound,...)
« Reply #9 on: December 03, 2012, 11:05:48 am »

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]
        $i++;
        if ($mode == 'thumb') {
and below, add
Code: [Select]
            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']);
Logged

cl9m

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 118
Re: Differentiate thumbnails by media icon (picture, video, pdf, sound,...)
« Reply #10 on: December 05, 2012, 09:45:53 am »

Thank you so much André for your help!
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15760
Re: Differentiate thumbnails by media icon (picture, video, pdf, sound,...)
« Reply #11 on: January 25, 2013, 02:35:15 pm »

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).
« Last Edit: February 13, 2013, 03:42:30 pm by Αndré »
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15760
Re: Differentiate thumbnails by media icon (picture, video, pdf, sound,...)
« Reply #12 on: January 25, 2013, 04:24:30 pm »

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.
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15760
Re: Differentiate thumbnails by media icon (picture, video, pdf, sound,...)
« Reply #13 on: January 25, 2013, 05:01:42 pm »

The default template $template_thumbnail_view contains something like
Code: [Select]
                                <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]
                                <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.
Logged
Pages: [1]   Go Up
 

Page created in 0.426 seconds with 20 queries.