Jump to content


These Forums Are Now Read-Only


For TubePress support, please post a question here or open a support ticket and we will be glad to assist.


Photo

Multiple playlists: wont revert back to 1st panel [SOLVED]


  • Please log in to reply
24 replies to this topic

#1 maverick

maverick

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 19 August 2012 - 10:38 AM

Embedding tube press-shortcode in multiple tabs on a page single page:

All the playlists- work and display as they should: although when I change tabs on my page and view a separate PL > the PL sticks to 'Ex: thumbnail selection num 4' . When a new PL is selected I obviously need it to revert back to the start of thumbnails.

Secondly:

When changing selection thumbnail number i.e 'Next>>' the page refreshers and reverts me back to my first tab/ 1st playlist but just sticks on whatever thumbnail selection number I have chosen.

Any help would be much appreciated.

I did ask my theme creators to see if it may be a bud with the tab structure first but apparently not:

"Hey. I know that it does that. That is a problem that only the creators can fix. The theme has nothing to do with that error. Sorry. Ask who created the plugin."

Once I can see all my issues will work I'm going to upgrade to the pro version for the HQ thumbnails.

#2 maverick

maverick

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 20 August 2012 - 07:29 AM

Any Fix for this yet?

Thank You

#3 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 21 August 2012 - 08:58 PM

Hi,

It's tough to diagnose this issue without getting a first-hand look at the problem. Could you share a link to your gallery? Feel free to PM me the address if you can't share it with the world.

Thanks!

#4 maverick

maverick

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 22 August 2012 - 10:16 AM

Thanks Erik. Yes I PM'd You :)

#5 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 23 August 2012 - 12:07 PM

The issue is that TubePress uses a query parameter (e.g. tubepress_page=2) to control which page of a gallery that a user wishes to see. In your case, your page actually loads all three tabs when the page first loads, but only shows one tab at a time. When you go to a new page of thumbs for any of the tabs, the entire page refreshes and all three tabs process the tubepress_page parameters.

The solution is - and I don't mean to sound like a salesman here - upgrade to TubePress Pro. With TubePress Pro, you can use Ajax pagination to independently paginate your galleries. So changing the page on one tab won't affect the others.

Hope that answers your question?

#6 maverick

maverick

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 23 August 2012 - 01:19 PM

Thanks Eric

The solution is - and I don't mean to sound like a salesman here - upgrade to TubePress Pro. With TubePress Pro, you can use Ajax pagination to independently paginate your galleries. So changing the page on one tab won't affect the others.



I'm more than happy to purchase PRO version if it will provide a solution.
Would you mind just proving me the right shortcodes to use once I have purchased PRO to get it working to independently paginate the galleries.

Thanks for your help.

S

#7 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 23 August 2012 - 02:35 PM

Sure. To add Ajax pagination to any gallery, just add ajaxPagination=true to your shortcodes .e.g.

[tubepress ajaxPagination="true" mode="playlist" playlistValue="PL08F59FB3777EE3E4" playerLocation="shadowbox" orderBy="newest" title="true" description="false"]
That's all there is to it! Let me know what else I can do for you. Thanks.

#8 maverick

maverick

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 23 August 2012 - 04:01 PM

And there I was thinking it was going to be difficult!

Thanks Erik. I will purchase/ transfer to Pro over the next couple of days

S

#9 maverick

maverick

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 24 August 2012 - 11:51 AM

Another Q:

I'm sure not but, using the Ajax pagination - would I be able to display thumbnails from:

1. Two different YouTube Channel playlists under the same set of thumbnails

Or

2. Display A youTube and Vimeo playlist under the same set of thumbnails?

Thanks

#10 maverick

maverick

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 26 August 2012 - 11:08 AM

Hi Erik, I PM'd you also.

I Just purchased Pro and followed your code example.

I'm having a maybe worse issue now :)

Now when multiple different playlist are embedded, it does not separate them by the tab content - just jumps down the page to them when selecting different tabs. Obviously I only want certain content within a tab to show. Update: I did find using a different 'tab Plugin', selecting a different thumbnail number did not change the tab number. But this tab plugin is horrid as you will see on the URL is PM'd. Using Ajax still does not resolve the situation and displays them all below each other?

I can provide FTP if it would make it easier to you to quickly access the page?

In addition - when I click on the thumbnails they do nothing? Update: Now think this is something to do with Shadowbox

And the font colour on thumbnail numbers has reverted from my default theme text colour to 'blue'?

Update: I'm trying to play around with short-code variations to resolve this as I have to demo the site to a client in 2 days time.
I found if I changed the playerlocation="shadowbox" to fancybox the video will now play although I am getting scroll bars around the frames (something I obviously do not want).

Using "Normal" - This works but I want a pop out player like shadowbox

Tinybox also works but looks messy as its embedding the YouTube player.

New Update: Ok, I don't know what I changed - maybe something in the Ajax settings under Tubepress settings but bottom line the tab selection is now not reverting back to the first tab when changing thumbnail numbers. Hooray. Is this because I disabled - "Ajax-enabled pagination" Setting?

The 2 problems I still have are:

1. Thumbnail Videos wont play when clicked in Shadowbox
2. Thumbnail number changer font colours have changed blue for some unknown reason (they were default theme colour when using with non Pro version)

Look forward to hearing from you

Thanks. S

#11 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 27 August 2012 - 11:18 PM

Hi,

1. Thumbnail Videos wont play when clicked in Shadowbox


Looks like you simply need to install Shadowbox - it's not bundled with TubePress Pro due to licensing restrictions. Here is how to install it. Should only take a minute.

2. Thumbnail number changer font colours have changed blue for some unknown reason (they were default theme colour when using with non Pro version)


Strange that this wasn't showing up in the free version, as both packages use the same CSS. Regardless, changing the font color just requires a bit of CSS. I would add the following to your WordPress theme's style.css:

div.tubepress_container div.pagination a {
    color: auto ! important;
}
Let's get these two issues worked out and then touch base to see what else is remaining. Sound good? Thanks!

#12 maverick

maverick

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 28 August 2012 - 06:16 AM

That's great, thank Erik - I will work on these two issues and get back to you.

Update: I have installed Shadowbox and that is now active when clicking thumbnails but is still displaying the scroll bars on each axis - which is cutting off most of the player. > TY

Update: I tried adding the above to my style.css but it unfortunately did not make a change to the font colour?

TY, S

#13 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 29 August 2012 - 10:17 PM

I have installed Shadowbox and that is now active when clicking thumbnails but is still displaying the scroll bars on each axis - which is cutting off most of the player.


I see that you're using FancyBox, but it's still showing the scrollbars. Here's how you can fix that.

  • Open up tubepress_pro_2_4_4/sys/ui/static/players/fancybox/fancybox-dev.js with your favorite text editor.
  • Around line 20 you'll see

    ...
    'title'                         : title
    ...
    change this to

    ...
    'title'                         : title,
    'scrolling' : no
    ...
  • Swap the contents of fancybox-dev.js with fancybox.js
If that works for you, I'd like to add this change permanently to TubePress as I can't see why anyone would ever want scrollbars!

I tried adding the above to my style.css but it unfortunately did not make a change to the font colour?


My mistake! Use this instead

div.tubepress_container div.pagination a {
    color: #4C4C4C ! important;
}


#14 maverick

maverick

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 30 August 2012 - 11:38 AM

Hi Thanks for your reply Erik.

1. The CSS colour change worked - TY

2. Yes I was trying out fancy box for the first playlist - if you look on the test I PM'd the tabs have different playlist within them. The last two tabs use Shadowbox.

Anyway. This is the code I see when I open the fancybox directory you specified. I see 'Title' along the Populate = function. Where would I add 'no scroll'?

Code for Fancybox
/**
 * Copyright 2006 - 2012 Eric D. Hough (http://ehough.com)
 * 
 * This file is part of TubePress (http://tubepress.org) and is released 
 * under the General Public License (GPL) version 3
 *
 * Shrink your JS: http://developer.yahoo.com/yui/compressor/
 */
var TubePressFancyboxPlayer = (function () {
	
	/* this stuff helps compression */
	var events	= TubePressEvents,
		name	= 'fancybox',
		doc		= jQuery(document),
		path	= getTubePressBaseUrl() + '/sys/ui/static/players/fancybox/lib/',
		
		invoke = function (e, videoId, galleryId, width, height) {

			jQuery.fancybox.showActivity();
		},
		
		populate = function (e, title, html, height, width, videoId, galleryId) {

			jQuery.fancybox({
				'content' 			: html,
				'height' 			: parseInt(height, 10) + 5,
				'width' 			: width,
				'autoDimensions' 	: false,
				'title' 			: title
			});
		};

	jQuery.getScript(path + 'jquery.fancybox-1.3.4.js', function () {}, true);
	TubePressCss.load(path + 'jquery.fancybox-1.3.4.css');
		
	doc.bind(events.PLAYER_INVOKE + name, invoke);
	doc.bind(events.PLAYER_POPULATE + name, populate);
}());

Also I require no scrollbars for shadowbox as well - please can you provide instructions on how to do this also.

Code for Shadowbox
/**
 * Copyright 2006 - 2012 Eric D. Hough (http://ehough.com)
 *
 * This file is part of TubePress (http://tubepress.org)
 *
 * TubePress is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * TubePress is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with TubePress.  If not, see <http://www.gnu.org/licenses/>.
 *
 */

/*global jQuery, TubePressAjax, TubePressEvents, getTubePressBaseUrl, TubePressCss, Shadowbox */
/*jslint sloppy: true, white: true, onevar: true, undef: true, newcap: true, nomen: true, regexp: true, plusplus: true, bitwise: true, continue: true, browser: true, maxerr: 50, indent: 4 */


var TubePressShadowboxPlayer = (function () {
	
	/* this stuff helps compression */
	var events	= TubePressEvents,
		name	= 'shadowbox',
		jquery	= jQuery,
		doc		= jquery(document),
		url		= getTubePressBaseUrl() + '/sys/ui/static/players/shadowbox/',

		boot	= function () {

			if (typeof Shadowbox === 'undefined') {
				setTimeout(boot, 400);
				return;
			}
		
			Shadowbox.path = url + 'lib/';
			Shadowbox.init({
				initialHeight	: 160,
				initialWidth	: 320,
				skipSetup		: true, 
				players			: ['html'],
				useSizzle		: false
			});
			Shadowbox.load();
		},
		
		invoke = function (e, videoId, galleryId, width, height) {
			Shadowbox.open({
				player:		'html',
				height:		height,
				width:		width,
				content:	' '
			});
		},
		
		populate = function (e, title, html, height, width, videoId, galleryId) {
			
			if (!jquery('#sb-player').length) {
				setTimeout( function () { populate(e, title, html, height, width, videoId, galleryId); }, 200);
				return;
			}
			
			jquery('#sb-player').html(html);
		};
		
	jQuery.getScript(url + 'lib/shadowbox.js', function () {}, true);
	TubePressCss.load(url + 'lib/shadowbox.css');

	boot();
	
	doc.bind(events.PLAYER_INVOKE + name, invoke);
	doc.bind(events.PLAYER_POPULATE + name, populate);
}());


Once this issue is fixed the only other tweek I would help with is how I can change the title video length (no description)- TY

Look forward to hearing from you.

S

#15 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 31 August 2012 - 08:07 PM

Where would I add 'no scroll'?


For FancyBox, change it to this:

/**
* Copyright 2006 - 2012 Eric D. Hough (http://ehough.com)
* 
* This file is part of TubePress (http://tubepress.org) and is released 
* under the General Public License (GPL) version 3
*
* Shrink your JS: http://developer.yahoo.com/yui/compressor/
*/
var TubePressFancyboxPlayer = (function () {
   
   /* this stuff helps compression */
   var events   = TubePressEvents,
      name   = 'fancybox',
      doc      = jQuery(document),
      path   = getTubePressBaseUrl() + '/sys/ui/static/players/fancybox/lib/',
      
      invoke = function (e, videoId, galleryId, width, height) {

         jQuery.fancybox.showActivity();
      },
      
      populate = function (e, title, html, height, width, videoId, galleryId) {

         jQuery.fancybox({
            'content'          : html,
            'height'          : parseInt(height, 10) + 5,
            'width'          : width,
            'autoDimensions'    : false,
            'title'          : title,
            'scrolling' : 'no'
         });
      };

   jQuery.getScript(path + 'jquery.fancybox-1.3.4.js', function () {}, true);
   TubePressCss.load(path + 'jquery.fancybox-1.3.4.css');
      
   doc.bind(events.PLAYER_INVOKE + name, invoke);
   doc.bind(events.PLAYER_POPULATE + name, populate);
}());
For Shadowbox, you simply need to edit tubepress_pro_2_4_4/sys/ui/static/players/shadowbox/lib/shadowbox.css. Around line 10 change it from

#sb-player.html {
    height: 100%;
    overflow: auto;
}
to

#sb-player.html {
    height: 100%;
    overflow: hidden;
}

Once this issue is fixed the only other tweek I would help with is how I can change the title video length (no description)


Let's get the Shadowbox and FancyBox issues squared away then we'll tackle that one. Thank you!

--Eric

#16 maverick

maverick

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 01 September 2012 - 07:04 AM

Ok. I copied over code with the one you provided but 'fancybox' is still displaying scrollbars? no matter.

1) The shadowbox method worked fine - I will just use that player for now so that is fine.
Is there a way to add social sharing icons within each player - I guess similar to the vimeo sharing feature embedded?

Yes, let me know if you can help with the title length.

2) Would you also mind explaining in a little more detail how to embed and use the search feature.
I am going to have 3x ajaxPagination playlist on each page.
Each page will be devoted to a separate category. i.e. 'Cars', Bikes
I need a search box on each page which when a users searches a video titles keywords i.e. Honda or Renault.
It will display a new selection of thumbnail with that keyword in the title.

Is this possible? If so can you explain how to embed it within a pages html.

3) Lastly I want to add 1single Youtube video to display - but I don't want to use the original Tubepress player. Is there another player design which is just the thumbnail image and then when they click it opens shadowbox - very much the same as when clicking a thumbnail when viewing a playlist. Hopefully that makes sense.

Thanks for your help so far, Look forward to hearing from you.

S

#17 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 04 September 2012 - 10:31 AM

Hi,

Is there a way to add social sharing icons within each player - I guess similar to the vimeo sharing feature embedded?


This isn't offered as an out-of-the-box feature, but there are a few feature requests filed for this type of functionality. Feel free to star any of them to vote for the idea and track updates. Features with the most votes will be implemented first.

Yes, let me know if you can help with the title length.


Here is a forum thread that describes how to limit the number of characters in the title that appears below gallery thumbnails. That is what you're after, yes? Let me know if you need any help implementing this.

Would you also mind explaining in a little more detail how to embed and use the search feature.


Here is the TubePress documentation on how to use Ajax interactive searching. In your case, you'll need to have a unique
under each tab where you'd like the search results to show up. So under the cars tab you might use the following shortcode to display the search input:

[tubepressoutput="ajaxSearchInput"searchResultsDomId="#car_results_div"searchProvider="youtube"]
And somewhere on that tab you would have

<div id="car_results_div"> ...
to hold the results.

Is there another player design which is just the thumbnail image and then when they click it opens shadowbox - very much the same as when clicking a thumbnail when viewing a playlist.


This isn't officially supported, but I would try something like this:

[tubepress mode="tag" tagValue="Mx1tiq15Hqs" resultCountCap="1" playerLocation="shadowbox"]
That should show a thumbnail for the video with ID Mx1tiq15Hqs, and play the video in Shadowbox when the user clicks it. Give that a try?

Thanks!

#18 maverick

maverick

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 04 September 2012 - 11:26 AM

Here is a forum thread that describes how to limit the number of characters in the title that appears below gallery thumbnails. That is what you're after, yes? Let me know if you need any help implementing this.



As I require some playlists to have a fully title and only a few to have a limited character title, would you agree it may be better to create a custom separate tubepress template to have fewer characters. If so how would I achieve this? Basically keeping the default settings but changing the title characters to ...lets say 10 (I can play around later). How would I then embed this template as opposed to the default, when using normal shortcode?

[tubepress output="ajaxSearchInput" searchResultsDomId="#car_results_div" searchProvider="youtube"]
And somewhere on that tab you would have

<div id="car_results_div"> ...
to hold the results.



Still a little confused on this. This code worked, so I understand how is functions and positions itself now - TY

1) What I require is a separate search to display/ bring up results from 1 YouTube Channel. results based on title or descriptions.

2) Then I need multiple separate search inputs (displayed on different relevant pages) to just bring the results back from individual playlist within that channel.
i.e. Playlist 1) named cars = page 1
Playlist 2) named houses = page 2
etc

So if a search was performed on page 2 = "Houses with car parking" for example
It would not display any of the videos within playlist 1, only videos within playlist 2.

I know it was just to demonstrate but the code above was bring results back from all of YouTube

*How would I only display the thumbnail upon a search and not the player above. - thumbnails should play in shadowbox when clicked again.

[tubepress mode="tag" tagValue="Mx1tiq15Hqs" resultCountCap="1" playerLocation="shadowbox"]
That should show a thumbnail for the video with ID Mx1tiq15Hqs, and play the video in Shadowbox when the user clicks it. Give that a try?



This worked great - TY - Awesome video!

Also sometimes my playlist have trouble loading and I have to hit refresh - would you recommend any other the cashe advanced settings to make them load better?

Thanks for your help.

S

#19 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 11 September 2012 - 02:44 PM

Hi,

Sorry that I'm only getting back to you now!

As I require some playlists to have a fully title and only a few to have a limited character title, would you agree it may be better to create a custom separate tubepress template to have fewer characters. If so how would I achieve this? Basically keeping the default settings but changing the title characters to ...lets say 10 (I can play around later). How would I then embed this template as opposed to the default, when using normal shortcode?


That's exactly what's described in this thread. And yes I would recommend doing this is a custom TubePress theme so your changes are preserved on update. In your theme's copy of gallery.tpl.php, find the area where the title is displayed. In the default theme, it's around line 44...

<?php echo htmlspecialchars($video->getTitle(), ENT_QUOTES, "UTF-8"); ?>
Simply change that line to:

<?php$title = $video->getTitle();$limit = 10;$title = (strlen($title) > $limit) ? substr($title, 0, 10) . '...' : $title;echo htmlspecialchars($title, ENT_QUOTES, 'UTF-8');?>
Makes sense?

What I require is a separate search to display/ bring up results from 1 YouTube Channel. results based on title or descriptions.


You can use the "searchResultsRestrictedToUser" option. e.g.

[tubepressoutput="ajaxSearchInput"searchResultsDomId="#car_results_div"searchProvider="youtube"searchResultsRestrictedToUser="someYouTubeChannel"]
That will restrict searching to the specified YouTube channel.

Then I need multiple separate search inputs (displayed on different relevant pages) to just bring the results back from individual playlist within that channel.


Unfortunately this isn't possible, either through YouTube or Vimeo's API. They both only offer the ability to restrict search results to videos uploaded by a particular user.

How would I only display the thumbnail upon a search and not the player above. - thumbnails should play in shadowbox when clicked again.


Just add playerLocation="shadowbox". e.g.

[tubepressoutput="ajaxSearchInput"searchResultsDomId="#car_results_div"searchProvider="youtube"searchResultsRestrictedToUser="someYouTubeChannel"playerLocation="shadowbox"]

Also sometimes my playlist have trouble loading and I have to hit refresh - would you recommend any other the cashe advanced settings to make them load better?


What behavior or you seeing that causes you to refresh? And what are your current cache settings?

Thank you!

#20 maverick

maverick

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

Posted 12 September 2012 - 01:03 PM

[quote name="eric"]Hi,

Sorry that I'm only getting back to you now!

[/quote]

No, not a problem I understand it must be difficult trying to continue to develop TubePress but also admin support.

[quote name="eric"]
[quote name="maverick3000"]As I require some playlists to have a fully title and only a few to have a limited character title, would you agree it may be better to create a custom separate tubepress template to have fewer characters. If so how would I achieve this? Basically keeping the default settings but changing the title characters to ...lets say 10 (I can play around later). How would I then embed this template as opposed to the default, when using normal shortcode?
That's exactly what's described in this thread. And yes I would recommend doing this is a custom TubePress theme so your changes are preserved on update. In your theme's copy of gallery.tpl.php, find the area where the title is displayed. In the default theme, it's around line 44...[/quote]

<?php echo htmlspecialchars($video->getTitle(), ENT_QUOTES, "UTF-8"); ?>
Simply change that line to:

<?php$title = $video->getTitle();$limit = 10;$title = (strlen($title) > $limit) ? substr($title, 0, 10) . '...' : $title;echo htmlspecialchars($title, ENT_QUOTES, 'UTF-8');?>
Makes sense?
[/quote]

OK I'm still not getting the limited characters on a custom theme so I will try and describe what I have done so far.

Created new directory:
wp-content/tubepress-content/themes/titlelimit

Copied > gallery.php into this directory > made the amendments to line 44 above

In WP page: [tubepress theme="limittitle"] - it shows the default player but the thumbnails titles still show full title not just 10 characters. - I am obviously missing a step but cant quite figure it out.

[quote name="eric"]
[quote name="maverick3000"]What I require is a separate search to display/ bring up results from 1 YouTube Channel. results based on title or descriptions.[/quote]
You can use the "searchResultsRestrictedToUser" option. e.g.[/quote]

[tubepress output="ajaxSearchInput" searchResultsDomId="#car_results_div" searchProvider="youtube" searchResultsRestrictedToUser="someYouTubeChannel"]
That will restrict searching to the specified YouTube channel.

[quote name="maverick3000"]How would I only display the thumbnail upon a search and not the player above. - thumbnails should play in shadowbox when clicked again.[/quote]
Just add playerLocation="shadowbox". e.g.

[tubepress output="ajaxSearchInput" searchResultsDomId="#car_results_div" searchProvider="youtube" searchResultsRestrictedToUser="someYouTubeChannel" playerLocation="shadowbox"]
[/quote]

The Search results work great now. Thank you for the Div suggestion for the tabs embed (great touch for keeping a page clean)
Only issue: Its still showing the big YouTube default play. I only want it to display thumbnails after a search & these to open in shadowbox. Just thumbnails without the video player.

[quote name="eric"]
[quote name="maverick3000"]Also sometimes my playlist have trouble loading and I have to hit refresh - would you recommend any other the cashe advanced settings to make them load better?[/quote]
What behavior or you seeing that causes you to refresh? And what are your current cache settings?
[/quote]

Sometimes "no playlist can be found" - I think that's how its worded.
I'm going to be having quite a bit on content from YouTube on each page so was more wondering if there was any API settings I can put into settings to make these load better.
I have not changed any cache settings within the player. Normal Google Chrome cache settings if that is what you are referring to.

Thank you!