Krenar Krenar - 6 months ago 20
PHP Question

How to make visible all my videos with pagination in my Ziggeo application?

So I need some help from a Ziggeo user. I have registered 8 videos in my ziggeo server and now I want to display them in pages divided by 2 videos per page.
Here is what I wrote, but unfortunately it doesn't show me any video, but the compiler doesn't say any error.

<?php include('./ziggeo/pagination.class.php');?>
<?php $myvideos = $ziggeo->videos();
$myarray = array($myvideos);?>
<div class="gallery">
<?php if(count($myarray)){
$pagination = new pagination($myarray, (isset($_GET['page'])?$_GET['page']:1), 3);
$videos = $pagination->getResults();
if(count($videos)!=0) {
echo $pageNumbers = '<h2>'.$pagination->getLinks().'</h2>';
foreach ($videos as $video) {?>
<div class="wall-of-videos-container">
<ziggeo ziggeo-video="<?= $video->token ?>"
ziggeo-width=320 ziggeo-height=240 ziggeo-popup> </ziggeo>
<?= date("Y-m-d h:i a", $video->created) ?>
&middot;<?= $video->duration ?> seconds</div>
<? } echo $pageNumbers; } } ?>
</div><!-- End Gallery -->


I included all the files needed for the Ziggeo configuration.
Who can help me? Thank a lot!

Answer

Without seeing 'pagination.class.php' file contents and the output that you are creating it is difficult to know what went wrong, however to create pagination in PHP using Ziggeo PHP SDK, you would do something like this:

<?php
  require_once('Ziggeo.php');
  $ziggeo = new Ziggeo('YOUR TOKEN', 'YOUR PRIVATE KEY', 'YOUR ENCRYPTION KEY');
?>

Now looking at your code it seems that this is the call that you are not making correctly. To get the videos you should make the following call:

<?php $myvideos = $ziggeo->videos()->index(); ?>

It is good to remember that by default you will only get up to 50 videos, so if you are expecting to have more than that, you should set the limit parameter.

You can set limit, skip, reverse, states and tags

In case you want to get up to 100 videos (which is maximum per call) you would do something like this:

<?php
  $myArguments = array('limit' => 100);
  $myvideos = $ziggeo->videos()->index($myArguments);
?>

Now to list them, you would do something like this:

<?php
  foreach ($myvideos as $video) {
    ?>
      <ziggeo ziggeo-video="<?php echo $video->token; ?>" ziggeo-width=320 ziggeo-height=240 ziggeo-popup></ziggeo>
    <?php
  }
?>
  • You could add a check with count($myvideos) before foreach, however it should not be needed.

In general, to create a page with 2 videos per page you could use something like this:

<?php
  $i = 0; //to have two videos per page
  $j = 0; //to see how many we have
  foreach ($myvideos as $video) {
      $j++;
      if($i === 0) { ?>
        <div class="gallery_page">
      <?php } ?>
      <ziggeo ziggeo-video="<?php echo $video->token; ?>" ziggeo-width=320 ziggeo-height=240 ziggeo-popup></ziggeo>
    <?php
      $i++;
      if($i === 2) { ?>
        </div>
        <div class="page_number"><?php echo $j/2; ?> </div>
      <?php
        $i = 0;
      }
  }
  if($i !== 0) {
      ?>
        <div class="page_number"><?php echo (($j-1)/2)+1; ?> </div>
      <?php
  }
?>
  • It is good to point out that the above code is not a complete paging system - it is just a simple sample that shows you how you could do it, however it would need to be customized and worked upon further to match gallery style, and similar.

Looking at your code, I think that it should work using something like this:

<?php
  include('./ziggeo/pagination.class.php');
  $myvideos = $ziggeo->videos()->index();
?>
<div class="gallery">
<?php
  if(count($myvideos)) {
    $pagination = new pagination($myarray, (isset($_GET['page']) ? $_GET['page']:1), 3);
    $videos = $pagination->getResults();
    if(count($videos)!=0) {
      echo $pageNumbers = '<h2>'.$pagination->getLinks().'</h2>';
      foreach ($videos as $video) { ?>
        <div class="wall-of-videos-container">
        <ziggeo ziggeo-video="<?php echo $video->token; ?>" ziggeo-width=320 ziggeo-height=240 ziggeo-popup></ziggeo>
        <?php echo date("Y-m-d h:i a", $video->created); ?>
        &middot;<?php echo $video->duration; ?> seconds</div>
     <?php } echo $pageNumbers;
     }
  } ?>
</div><!-- End Gallery -->

I did presume however that you have the headers set in the HTML HEAD of the page where the gallery will be shown:

<link rel="stylesheet" href="//assets-cdn.ziggeo.com/v1-latest/ziggeo.css" /> 
<script src="//assets-cdn.ziggeo.com/v1-latest/ziggeo.js"></script>
<script type="text/javascript">ZiggeoApi.token="YOUR TOKEN"</script>

If not present, the HTML code will be created from the above PHP code, however your videos would not be shown due to Ziggeo framework not being loaded on client side.

UPDATE (2016/05/31)

As the above is just general way to do this, it is not including CSS nor JavaScript.

As such I am adding the full code that can be used and as it shows another way to collect the page numbers and leaving the above so that someone can see both.

<script type="text/javascript">
  //Basic code needed to switch pages
  var currentPage = 1;
  function showPage(number) {
    //If we are on the same page as the selected one, we just break away from the function, so that we do not hide the same.
    if(currentPage === number) { return false; }

    var toShow = document.getElementById('page_' + number);
    var toHide = document.getElementById('page_' + currentPage);

    toShow.style.display = 'block';
    toHide.style.display = 'none';

    currentPage = number;
  }
</script>

<style type="text/css">
  /* Code to hide the pages (all) and show first one only, as well as a bit of styling so that it has some basic frame */
  .gallery_page > ziggeo {
    float: left;
  }
  .gallery_page {
    background-image: linear-gradient(-45deg, lightGray, white);
    border-radius: 10px;
    box-shadow: 0 0 2px gray;
    box-sizing: border-box;
    display: none;
    min-height: 400px;
    margin: 20px 0;
    padding: 40px;
    width: 720px;
  }
  .gallery_page:first-child {
    display: block;
  }
  .page_number {
    box-shadow: 0 0 3px gray;
    float: left;
    margin: 0 4px;
    text-align: center;
    width: 2em;
  }
</style>

<div class="gallery">
  <?php
  //How many videos per page do we want to have?
  $numberOfVideos = 2;
  //How many videos was there in total?
  $totalNumberOfVideos = 0; //only if we need it for something later on
  //How many videos are approved / are shown
  $totalNumberOfApprovedVideos = 0; //only if we need it for something later on
  //which page are we working on?
  $currentPage = 1;
  //Will serve as buffer for page number elements
  $pageNumbers = '';
  //temporary videos counter
  $i = 0;

  foreach ($myvideos as $video) {
    //to only show approved videos
    if($video->approved === true) {
      if($i === 0) { ?>
        <div class="gallery_page" id="page_<?php echo $currentPage; ?>">
      <?php } ?>

      <ziggeo ziggeo-video="<?php echo $video->token; ?>" ziggeo-width=320 ziggeo-height=240 ziggeo-popup></ziggeo>

      <?php

      $i++;
      if($i === $numberOfVideos) { ?>
        <br style="float:none; clear:left;">
        </div>
        <?php
        $pageNumbers .= '<div onclick="showPage(' . $currentPage . ');" class="page_number">' . $currentPage . '</div>';
        $currentPage++;
        $i = 0;
      }

      $totalNumberOfApprovedVideos++;
      $totalNumberOfVideos++;
    }
    else {
    //$video->moderation_reason
    //If you want to check if there was a reason why the video was not approved, you can check the above, or alternatively, you could do something else at this point.
      $totalNumberOfVideos++;
    }
  }
  if($i !== 0) {
    $pageNumbers .= '<div onclick="showPage(' . $currentPage . ')" class="page_number">' . $currentPage . '</div>';
  }
  ?>
</div><!-- End Gallery -->

<?php echo $pageNumbers; ?>

<?php
  //This is not needed for pagination to work, however you might want to show it, etc
  echo '<br><br>';
  echo 'Approved videos: ' . $totalNumberOfApprovedVideos . '<br>';
  echo 'Total videos: ' . $totalNumberOfVideos . '<br>';
  echo 'Total number of pages: ' . $currentPage . '<br>';
  echo $numberOfVideos . ' videos per page<br>';
?>
  • It is good to point out that this is just a framework - so the code mentioned before will work just as the followup code does, however both require additional styling and code to make it look nice and behave as we want it.
Comments