Distinguish video files from image files

[Hanna.]

Hi all, in connection to my thread on how to successfully upload .mp4 videos and add thumbnails to them, I thought I'd separate the cosmetics so that it does not go off topic with all my requests/wishes. That thread is awating assistance on how to turn off autoplay.

Now, for the cosmetic part: It is very important to me to be clear on what kind of files my viewer is dealing with (I have above 50,000 images and I am now expanding to videos as well)

-- I need my video files (mp4) to be recognized even on the outside - customizable, somewhere indicate that the video files-thumbnails are links to video, not image.

My idea would be to put a small video icon somewhere in the thumbnail area and/or do the same with the photos (or the option too). This is probably a function that needs to be set up in my theme.php but I am hoping someone will have time to assist me.

Thank you!

[ron4mac]

On a given gallery, you could always use the same image of the star (that you've overlaid with a video icon) for each video thumbnail. That would be much easier and less messy than picking a frame from each video to use as a thumbnail. And I could add a feature to ThumbPlus to display the media type when the dimensions are 0x0.

[Hanna.]

On a given gallery, you could always use the same image of the star (that you've overlaid with a video icon) for each video thumbnail. That would be much easier and less messy than picking a frame from each video to use as a thumbnail. And I could add a feature to ThumbPlus to display the media type when the dimensions are 0x0.

That would work in the case of separation video files from images, but I will be having albums with a grid of thumbnails like image, image, image, video, image, video. It is highly important to make a distinction.

I don't mind making the thumbnails for video manually, but it would help if somewhere I could flag you know "hey, this is a video" - because majority of my files will be images.

[ron4mac]

Right ...
So you just use something like the attached for every video thumbnail ... with other images or not.  That, combined with it saying 'Video' in the dimensions area, should remove all doubt whether it is a video or not.

[Hanna.]

That looks like a watermark? Perhaps you are right. It would work.

My thumbnails are made/cut out by coppermine up to max height/width of 360px - however, I have a CSS line resizing them on display in their thumbnails class to smaller. I was hoping to get that film icon like a layer, a div on top thumbs that are video files. (example in attachment)

In my attachment where it says "2 files" - something like that.

[Αndré]

I've done that a lot of years ago in one of my private cpg1.5.x galleries. In function theme_display_thumbnails (copy it to your theme's theme.php file if it doesn't exist yet), I added

Code Select Expand

            $type = cpg_get_type($thumb['filename']);
            preg_match('/width="([0-9]+)" height="([0-9]+)"/', $thumb['image'], $matches);
            $params['<span></span>'] = "<span class=\"thumbnail_type_{$type['content']} thumbnail_extension_{$type['extension']}\" style=\"width: {$matches[1]}px; height: {$matches[2]}px; \"></span>";

before

Code Select Expand

        } else {  // mode != 'thumb'

Additionally, you need to modify $template_thumbnail_view. Find

Code Select Expand

<a href="{LINK_TGT}">{THUMB}<br /></a>
and replace with

Code Select Expand

                                        <div class="thumbnail_wrapper">
                                                <a href="{LINK_TGT}">{THUMB}<span></span><br /></a>
                                        </div>
or simply add the following to your theme's theme.php file, if $template_thumbnail_view doesn't exist yet.

Code Select Expand

$template_thumbnail_view = <<<EOT

<!-- BEGIN header -->
        <tr>
<!-- END header -->
<!-- BEGIN thumb_cell -->
        <td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">
                <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                                <td align="center">
                                        <div class="thumbnail_wrapper">
                                                <a href="{LINK_TGT}">{THUMB}<span></span><br /></a>
                                        </div>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>
                        </tr>
                </table>
        </td>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="top" 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 colspan="{THUMB_COLS}" style="padding: 0px;">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                       {TABS}
                                </tr>
                        </table>
                </td>
        </tr>
<!-- END tabs -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;

Result looks like:

Code Select Expand

<span class="thumbnail_type_movie thumbnail_extension_youtube" style="width: 200px; height: 200px; "></span>

Corresponing css code seems to be:

Code Select Expand

.thumbnail_wrapper span.thumbnail_type_movie {
    position:absolute;
    top:3px;
    left:3px;
    opacity:0.7;
    background:url(images/play-button.png) center center no-repeat;
}

Not sure if this works out of the box or if other modifications are needed.

[Hanna.]

I just got the chance to test this, and I get no result in the thumbnail page whatsoever.

Thumb #4 and #5 here are .mp4 files that should display the CSS I have in now:

Code Select Expand


.thumbnail_wrapper span.thumbnail_type_movie {
    position:absolute;
    top:3px;
    left:3px;
    opacity:0.7;
    background: #aaa; border: 1px solid black;
width: 50px;
height:20px;
}


It should

[Αndré]

I cannot find the string "thumbnail_type" in the HTML output of your gallery, so the mod is either not applied correctly in your gallery or something else overwrites it. Please post your modified theme_display_thumbnails function.

[ron4mac]

I cannot find the string "thumbnail_type" in the HTML output of your gallery ..

There is nothing in your code that uses the contents of $params['<span></span>']

[ron4mac]

That looks like a watermark? Perhaps you are right. It would work.

Are you using the thumbplus plugin?  If so, about 7 lines added to the plugin (plus some theme CSS) would add a play button to the video thumbnails.

[Αndré]

There is nothing in your code that uses the contents of $params['<span></span>']

You're right. There's a modification to $template_thumbnail_view required. I'll updated my above post.

[Hanna.]

Here is the section from 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 -->

        <td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">

                <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                                <td align="center">
                                           <div class="thumbnail_wrapper">
                                                <a href="{LINK_TGT}">{THUMB}<span></span><br /></a>
                                        </div>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>
                        </tr>
                </table>

        </td>

<!-- END thumb_cell -->

<!-- BEGIN empty_cell -->
                <td valign="top" 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 colspan="{THUMB_COLS}" style="padding: 0px;">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                       {TABS}
                                </tr>
                        </table>
                </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
******************************************************************************/

And here is a link to an album with mp4 files

[ron4mac]

Try this modified version of the thumbplus plugin (save your current version).