Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

Author Topic: Distinguish video files from image files  (Read 15222 times)

0 Members and 1 Guest are viewing this topic.

Hanna.

  • Coppermine frequent poster
  • ***
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 227
  • webstar
Distinguish video files from image files
« on: January 05, 2019, 06:41:50 am »

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

ron4mac

  • Administrator
  • Coppermine addict
  • *****
  • Country: us
  • Offline Offline
  • Posts: 2026
Re: Distinguish video files from image files
« Reply #1 on: January 05, 2019, 12:22:59 pm »

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

Hanna.

  • Coppermine frequent poster
  • ***
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 227
  • webstar
Re: Re: Distinguish video files from image files
« Reply #2 on: January 05, 2019, 05:39:11 pm »

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

ron4mac

  • Administrator
  • Coppermine addict
  • *****
  • Country: us
  • Offline Offline
  • Posts: 2026
Re: Distinguish video files from image files
« Reply #3 on: January 05, 2019, 06:22:07 pm »

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

Hanna.

  • Coppermine frequent poster
  • ***
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 227
  • webstar
Re: Distinguish video files from image files
« Reply #4 on: January 05, 2019, 06:29:04 pm »

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

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Distinguish video files from image files
« Reply #5 on: March 15, 2019, 08:23:26 pm »

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]
            $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]
        } else {  // mode != 'thumb'
Additionally, you need to modify $template_thumbnail_view. Find
Code: [Select]
<a href="{LINK_TGT}">{THUMB}<br /></a>and replace with
Code: [Select]
                                        <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]
$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]
<span class="thumbnail_type_movie thumbnail_extension_youtube" style="width: 200px; height: 200px; "></span>
Corresponing css code seems to be:
Code: [Select]
.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.
« Last Edit: June 28, 2019, 04:00:12 pm by Αndré »
Logged

Hanna.

  • Coppermine frequent poster
  • ***
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 227
  • webstar
Re: Distinguish video files from image files
« Reply #6 on: June 27, 2019, 02:51:53 pm »

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

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Distinguish video files from image files
« Reply #7 on: June 27, 2019, 03:01:27 pm »

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

ron4mac

  • Administrator
  • Coppermine addict
  • *****
  • Country: us
  • Offline Offline
  • Posts: 2026
Re: Distinguish video files from image files
« Reply #8 on: June 28, 2019, 03:05:35 am »

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>']
Logged

ron4mac

  • Administrator
  • Coppermine addict
  • *****
  • Country: us
  • Offline Offline
  • Posts: 2026
Re: Distinguish video files from image files
« Reply #9 on: June 28, 2019, 03:12:04 am »

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

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Distinguish video files from image files
« Reply #10 on: June 28, 2019, 03:56:15 pm »

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

Hanna.

  • Coppermine frequent poster
  • ***
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 227
  • webstar
Re: Distinguish video files from image files
« Reply #11 on: July 12, 2019, 11:34:25 pm »

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

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

ron4mac

  • Administrator
  • Coppermine addict
  • *****
  • Country: us
  • Offline Offline
  • Posts: 2026
Re: Distinguish video files from image files
« Reply #12 on: July 13, 2019, 03:22:06 pm »

Try this modified version of the thumbplus plugin (save your current version).
« Last Edit: July 13, 2019, 03:44:08 pm by ron4mac »
Logged
Pages: [1]   Go Up
 

Page created in 0.025 seconds with 19 queries.