We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 23299
    • 1,161 Posts
    There was a good thread on doing this. I even had it working for a while back there, but its stopped working totally.

    I think I need to start over:

    What I want to do is create an Album on a Vimeo account and then have a MODx (Evo) page automatically present the thumbnails for these videos and maybe open them with a javascript "box" when clicked.

    I know this can be done but I am hoping for documented details on how to get it all working...


    Thanks!
    • I’ve been needing to do this for a while now, so I started going through it step-by-step. Then I found this http://vimeo.com/widget

      I haven’t tried to deal with albums yet; not sure if this can be used for albums or only to display all videos. (the Badge widget does albums)

      Anyway, I’ll finish the tutorial (I just need to make an album and get its ID) and let you know what happens.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 23299
        • 1,161 Posts
        I have been messing around with this off and on for like ever it seems.

        I had a a system where I had one video page that I kept adding headlines, paragraphs and the imbedded iframe code that each Vimeo video produced. It worked but the silly TinyMCE plugin would always mess up the code. I then hid the code for all the videos in a chunk and that worked fine so long as you were ok editing the chunk code directly. Using TVs would also work with Ditto aggregating individual pages on one container video presentation page.

        I then had a system that was created by a fellow MODx coder for presenting videos from a Vimeo Album directly. There were limitations but the nice thing was you (or the client) did not have to edit the MODX page at all. Once set up the page would keep track of fresh videos that were added to the Vimeo Album. Nice! For some reason this stopped working for me. I tried several things but am now thinking that the Vimeo code has been updated which makes the MODx snippets fail?

        I am very interested in a new clean way of doing this...

          • 23299
          • 1,161 Posts
          Looking at that Widget page I think having access to hi def videos is a must. Being able to present individual Albums is a must as well. Creating custom Albums is nice as you might not want ALL of your Vimeo videos displayed on your MODx presentation page. The Vimeo Album concept is a powerful tool/ option and needs to be implemented in this task. Odds are you will have just one regular or one Pro Vimeo account. But nested in your account you can have different Albums.

          My $.02 anyway...
            • 23299
            • 1,161 Posts
            Ok, I tried both the Hubnut and the Badge widgets.

            The Hubnut will only display standard definition videos. If you upload a hi def video it will only display in SD on your site. The Hubnut widget is nice other wise. It will present your videos in a window on YOUR site. This is a big plus, but the severe limitation is SD only. I use 1080 hi def cameras so this is a no go...

            The Badge widget does a nice job of automatically presenting thumbnail links to your videos. The huge downside is that when you click on any video it will take you to your Vimeo account page and play the video there. Your HD videos will play but only on the actual Vimeo site. Your videos will not play on your (MODx) site. Also a no go...

            Be nice if we could have the best of both of these widgets?

            The search continues...
              • 23299
              • 1,161 Posts
              I used to have the first snippets code that Danzg offered here: http://modxcms.com/forums/index.php/topic,56285.0.html

              But then it stopped working? The MODx page would not display the videos or show the code that connected to the Vimeo Album ID#. I then tried his updated method which requires more connectivity with the Vimeo system. I could not get the token or whatever to work on the Vimeo end though...
                • 19369
                • 1,098 Posts
                I know this thread is 5 months old, but if you are looking for this, here is a Vimeo Snippet (tested on Evolution 1.0.5):

                <?php
                /**
                 * Snippet Name: vimeo
                 * Short Desc: Resize video e thumb per embed Vimeo
                 * Author: Lorenzo Stanco <[email protected]>
                 * Version: 0.0.1
                 * Last Edited: 17-10-2011
                 */
                
                // ---------------------------------------------------
                // CONFIG
                // ---------------------------------------------------
                // $type:     [string], you can use these values: 
                //                    - 'id': Video ID 
                //                    - 'title': Video Title
                //                    - 'description': Video Description
                //                    - 'url': Video URL
                //                    - 'upload_date': Date of upload
                //                    - 'mobile_url': Video URL for mobile devices
                //                    - 'thumbnail_small': Video Thumb URL (Small)
                //                    - 'thumbnail_medium': Video Thumb URL (Medium) 
                //                    - 'thumbnail_large': Video Thumb URL (Large)
                //                    - 'user_name': User Name.
                //                    - 'user_url': User URL
                //                    - 'user_portrait_small': User Thumb URL (Small) 
                //                    - 'user_portrait_medium': User Thumb URL (Medium)
                //                    - 'user_portrait_large': User Thumb URL (Large)
                //                    - 'user_portrait_huge': User Thumb URL (Huge)
                //                    - 'stats_number_of_likes': Number of Likes
                //                    - 'stats_number_of_plays': Number of Plays
                //                    - 'stats_number_of_comments': Number of Comments
                //                    - 'duration': Video Duration
                //                    - 'width': Video Width
                //                    - 'height': Video Height
                // $tvname:   [string] Vimeo share code (embed)
                // $width:    [int]    width dimension in pixel
                // $height:   [int]    height dimension in pixel
                //
                // ---------------------------------------------------
                // EXAMPLES
                // ---------------------------------------------------
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`video` &width=`640` &height=`360`]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`id` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`description` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`url` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`upload_date` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`mobile_url` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`thmbnail_small` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`thumbnail_medium` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`thumbnail_large` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`user_name` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`user_url` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`user_portrait_small` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`user_portrait_medium` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`user_portrait_large` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`user_portrait_huge` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`stats_number_of_likes` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`stats_number_of_plays` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`stats_number_of_comments` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`duration` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`width` ]]
                // [[vimeo? &tvname=`[*video-1:escapemodx*]` &type=`height` ]]
                //-----------------------------------------------------
                
                //$video = $modx->getTemplateVarOutput($tvname);
                //$video = $video[$tvname];
                
                $video = str_replace(
                    array('##w#', '##e#', '##a#'),
                    array('?'   , '=',    '&'   ), 
                    $tvname
                );
                
                // Chiedo il player?
                if ($type == 'video') {
                
                	// Ho già l'embed, cambio solo i parametri di dimensione
                	if (!empty($width) && !empty($height)) {
                		$pattern_w = '/ width=["]?([0-9]+)["]?/i';
                		$pattern_h = '/ height=["]?([0-9]+)["]?/i';
                		$video = preg_replace($pattern_w, ' width="'.intval($width).'"', $video);
                		$video = preg_replace($pattern_h, ' height="'.intval($height).'"', $video);
                	}
                        
                        // Tolgo il paragrafo descrittivo
                        $video = preg_replace('/<p>.*?<\\/p>/', '', $video);
                        
                	return $video;
                	
                }
                
                // Chiedo dati API?
                if ($type != 'video') {
                
                	// Se chiedo "url", chiedo in realtà la thumb
                	if ($type == 'thumb') $type = 'thumbnail_large';
                
                	// Prendo l'ID del video
                	$id = null;
                	$pattern = '/^<(iframe|embed).*"http.*?\\/video\\/([a-z0-9]*)/i';
                	$target_share_code = trim($video);
                	if (preg_match($pattern, $target_share_code, $id)) {
                		$id = $id[2];
                	} else {
                		return 'Vimeo error.';
                	}
                
                	// Chiedo tutti i dati in formato JSON
                        $data_url = 'http://vimeo.com/api/v2/video/' . $id . '.php';
                	$data = @file_get_contents($data_url);
                	if (!$data) return 'Vimeo error.';
                	$data = @unserialize($data);
                	if (!$data) return 'Vimeo error.';
                	$data = array_pop($data);
                	if (empty($data)) return 'Vimeo error.';
                	
                	// Ritorno quello che serve
                	return $data[$type];
                
                }
                
                return 'Vimeo error.';
                ?>


                You also need the "phx:escapemodx" Snippet:
                <?php
                return str_replace(
                    array('?'   , '=',    '&'   ),
                    array('##w#', '##e#', '##a#'),
                    $output
                );
                ?>


                Note: in the Template Variable you must use the vimeo "embed" code, not the vimeo url. [ed. note: microcipcip last edited this post 12 years, 4 months ago.]
                  • 23299
                  • 1,161 Posts
                  Interesting. Do you have a live URL with this working?
                    • 19369
                    • 1,098 Posts
                    Yes I do, see this website: http://goo.gl/U8UIY.
                      • 23299
                      • 1,161 Posts
                      Hi,

                      Can you explain (some more detail) how you set this up? You have two snippets. How does the snippet call look like? Any custom chunks or TVs? Are you doing anything special on the Vimeo side of things?

                      Would this work in Revo as well?

                      Thanks!