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

Search & Video Categories W/ Ajax

wordpress tubepress-pro tips vimeo

Best Answer eric, 05 June 2014 - 10:13 PM

Thanks for your detailed question. I believe I understand what you're after, and it should be very doable with TubePress Pro. First to answer your question:
 

I wasn't clear if it was or wasn't possible to have the Tubepress Pro search input only search the content displayed on the page? Similar to the function with categories - a search term would repopulate the thumbnails list.

 
Currently TubePress's interactive searching only works via the backend; if you want to filter the content currently shown on the page, you'll have to either (1) implement your own filter in JavaScript or (2) use Ajax to fetch a new set of results from TubePress and replace the current content. The former is obviously very limited in functionality, so I don't recommend that, and the latter sounds a lot more like what you're trying to build.
 
TubePress Pro doesn't offer this functionality exactly, but it comes very close with Ajax-enabled interactive searching. If you aren't familiar with this feature, please test it out now on your dev site. If you look at the HTML for the Ajax-enabled search input that TubePress produces, you'll see something like:

<form accept-charset="utf-8">
  <fieldset class="tubepress_search">
    <input type="text" ... />
    <button ...></button>
  </fieldset>
</form>
<script type="text/javascript">
    (function () {
        //TubePress JavaScript that performs the Ajax search when the user clicks the search button
    }());
</script>

This HTML is generated using the template at tubepress_pro_3_1_5/src/main/php/add-ons/procore/resources/templates/search/ajax_search_input.tpl.php. If I were in your shoes, I would modify this template to show a button (i.e. for "cats") instead of a text input and search button. You would then need to write a line or two of jQuery to fire off the search when the user clicks the cats button. e.g. your template might look like:

<button id="cats-button">Cats!</button>
<script type="text/javascript">
  jQuery('#cats-button').click(function () {
    jQuery('fieldset.tubepress_search input:first').val('cats');
    jQuery('fieldset.tubepress_search button:first').trigger('click');
 });
</script>
 
<form accept-charset="utf-8" style="display:none">
  <fieldset class="tubepress_search">
    <input type="text" ... />
    <button ...></button>
  </fieldset>
</form>
<script type="text/javascript">
    (function () {
        //TubePress JavaScript that performs the Ajax search
    }());
</script>

Notice that we are completely hiding the original form. I haven't tested that code but hopefully you get the idea? You could even narrow the search results down to your YouTube channel using a shortcode like:

[tubepress output="ajaxSearchInput" searchResultsDomId="#somediv" searchProvider="youtube" searchResultsRestrictedToUser="myYouTubeChannel"]

Does that make sense or did I manage to confuse us all further? One way or another, we should be able to figure something out for you!

Go to the full post


  • Please log in to reply
6 replies to this topic

#1 shadesofgraywpg

shadesofgraywpg

    Member

  • Members
  • PipPip
  • 21 posts

Posted 03 June 2014 - 10:56 PM

I read through the documentation on search and I just wanted to bounce an idea off of the team here to see what you might suggest.

 

Something I'm trying to achieve with Tubepress Pro controls:

 

Filter video content by categories, via a list of category buttons.

 

So let's say there's 3 videos. 1 is a video on cats, 1 on dogs and 1 on food. By clicking a button, I would be able to filter "cat" videos (terrible example, but you get the idea) and the page would either refresh or using ajax repopulate the thumbnails with videos in that category. Is this functionality possible given the toolsets?

 

Another question on search. After reading through some of the documentation, I wasn't clear if it was or wasn't possible to have the Tubepress Pro search input only search the content displayed on the page? Similar to the function with categories - a search term would repopulate the thumbnails list.

 

Looking forward to your thoughts. Thanks so much.



#2 brandon

brandon

    Advanced Member

  • TubePress Staff
  • 1989 posts

Posted 03 June 2014 - 11:13 PM

Hi ShadesOfGray,

 

I've forwarded your inquiry to Eric, as the level of customization you are asking about is beyond my abilities to help.

 

Thanks!


Want a faster, more personalized support experience? Open a ticket with us! We will be gradually phasing out forum-based support in favor of a proper ticketing system. Please help us help you!


#3 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 05 June 2014 - 10:13 PM   Best Answer

Thanks for your detailed question. I believe I understand what you're after, and it should be very doable with TubePress Pro. First to answer your question:
 

I wasn't clear if it was or wasn't possible to have the Tubepress Pro search input only search the content displayed on the page? Similar to the function with categories - a search term would repopulate the thumbnails list.

 
Currently TubePress's interactive searching only works via the backend; if you want to filter the content currently shown on the page, you'll have to either (1) implement your own filter in JavaScript or (2) use Ajax to fetch a new set of results from TubePress and replace the current content. The former is obviously very limited in functionality, so I don't recommend that, and the latter sounds a lot more like what you're trying to build.
 
TubePress Pro doesn't offer this functionality exactly, but it comes very close with Ajax-enabled interactive searching. If you aren't familiar with this feature, please test it out now on your dev site. If you look at the HTML for the Ajax-enabled search input that TubePress produces, you'll see something like:

<form accept-charset="utf-8">
  <fieldset class="tubepress_search">
    <input type="text" ... />
    <button ...></button>
  </fieldset>
</form>
<script type="text/javascript">
    (function () {
        //TubePress JavaScript that performs the Ajax search when the user clicks the search button
    }());
</script>

This HTML is generated using the template at tubepress_pro_3_1_5/src/main/php/add-ons/procore/resources/templates/search/ajax_search_input.tpl.php. If I were in your shoes, I would modify this template to show a button (i.e. for "cats") instead of a text input and search button. You would then need to write a line or two of jQuery to fire off the search when the user clicks the cats button. e.g. your template might look like:

<button id="cats-button">Cats!</button>
<script type="text/javascript">
  jQuery('#cats-button').click(function () {
    jQuery('fieldset.tubepress_search input:first').val('cats');
    jQuery('fieldset.tubepress_search button:first').trigger('click');
 });
</script>
 
<form accept-charset="utf-8" style="display:none">
  <fieldset class="tubepress_search">
    <input type="text" ... />
    <button ...></button>
  </fieldset>
</form>
<script type="text/javascript">
    (function () {
        //TubePress JavaScript that performs the Ajax search
    }());
</script>

Notice that we are completely hiding the original form. I haven't tested that code but hopefully you get the idea? You could even narrow the search results down to your YouTube channel using a shortcode like:

[tubepress output="ajaxSearchInput" searchResultsDomId="#somediv" searchProvider="youtube" searchResultsRestrictedToUser="myYouTubeChannel"]

Does that make sense or did I manage to confuse us all further? One way or another, we should be able to figure something out for you!



#4 shadesofgraywpg

shadesofgraywpg

    Member

  • Members
  • PipPip
  • 21 posts

Posted 12 June 2014 - 06:00 PM

Hey Eric, this is brilliant. And it does work actually, the AJAX option.

This might be covered in the documentation, and I'm so close to getting here now.

 

*Edit* You answered my question already earlier above to the question I was about to ask re: limiting results to a user. Works for Vimeo too.

 

I'm curious if it's possible to limit to a Vimeo user AND a Vimeo Gallery? So: username + vimeo gallery # that it searches within. Can we add multiple limits to the results?



#5 eric

eric

    Lead Developer

  • TubePress Staff
  • 2787 posts

Posted 13 June 2014 - 12:15 AM

I'm curious if it's possible to limit to a Vimeo user AND a Vimeo Gallery? So: username + vimeo gallery # that it searches within. Can we add multiple limits to the results?

 
In short - no, not out of the box anyway. The Vimeo API is the big restriction here as it only allows us to filter search results by a user. Adding multiple filters would likely be possible with multiple requests to Vimeo and some internal processing, but that would require a good chunk of custom PHP to accomplish.

 

Let us know how else we can assist. Thanks.



#6 shadesofgraywpg

shadesofgraywpg

    Member

  • Members
  • PipPip
  • 21 posts

Posted 13 June 2014 - 08:32 AM

Hey Eric,

 

Ah interesting. Is it possible to keep the search results limited to a Vimeo Album? As opposed to filtering search by user.

 

What I'm trying to achieve is having the ability to search within a certain group of videos (tutorials in this case). Here's a working example of what I have right now as an example: http://tinyurl.com/l4mtjro. Maybe this better explains things. Ignore everything above the thumbnail gallery & categories on the left for now - those are all static on the page.



#7 brandon

brandon

    Advanced Member

  • TubePress Staff
  • 1989 posts

Posted 13 June 2014 - 08:17 PM

Hi Shadesofgray,

 

Unfortunately, the Vimeo API limits searches to only filter results by user.

 

Sorry!


Want a faster, more personalized support experience? Open a ticket with us! We will be gradually phasing out forum-based support in favor of a proper ticketing system. Please help us help you!