forum.coppermine-gallery.net
Support => cpg1.5.x Support => cpg1.5 miscellaneous => Topic started by: cl9m on June 20, 2012, 10:58:12 am
-
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?
-
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.
-
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) (http://imageshack.us/photo/my-images/38/examplead.jpg/)
-
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.
-
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
-
I try this in my theme.php
/******************************************************************************
** 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"> </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.
-
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
$i++;
if ($mode == 'thumb') {and (depending if you want to apply that mod for the user gallery thumbnails or not) above or below, add
$type = cpg_get_type($thumb['filename']);
$thumb['image'] = str_replace('class="image"', "class=\"image thumbnail_type_{$type['content']} thumbnail_extension_{$type['extension']}\"", $thumb['image']);
-
Thank you so much André for your help!
your are a king!
-
How can I put it on the filmstrip's thumbnails?
-
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
$i++;
if ($mode == 'thumb') {and below, add
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']);
-
Thank you so much André for your help!
-
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).
-
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 (http://www.sitepoint.com/forums/showthread.php?684144-How-to-set-an-image-over-an-image-using-css#post4624424) solutions (http://www.cutcodedown.com/for_others/kvijayhari/) 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.
-
The default template $template_thumbnail_view contains something like
<td align="center">
<a href="{LINK_TGT}">{THUMB}<br /></a>
{CAPTION}
{ADMIN_MENU}
</td>
The solution I found needs something like that to work:
<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.