CouchCMS Forum Bug Reporting and Troubleshooting
Problems, need help? Have a tip or advice? Post it here.
4 posts Page 1 of 1
Post a reply
Previous Next

youtube gallery bootstrap

avatar
adsalamon
Registered User
Hi

I'm creating a youtube gallery section on site that is responsive but I can't get thumbnails to show. I tried previously with the iframe method but could not get them to load in a modal pop up box when clicked as they would just play where they were.
.
I am now trying a youtubemodal plug in on a list of videos i get from this code which lets me enter the url in admin:


Code: Select all
<cms:template clonable='1' gallery='1' >
  <cms:editable name='videocode' label='Video code' type='textarea' no_xss_check='1' ></cms:editable>

  
 </cms:template>



I then show a list of them using this code. Looks ugly but been hacking away for ages.

Code: Select all
<div id="row">
<ul class="row">

<cms:pages masterpage='video.php' include_subfolders='0' >

 <cms:set listo="<li class='col-lg-3 col-md-3 col-sm-3 col-xs-4 thumbnail'>" />
  <cms:set listc="</li>" />
  
  <cms:embed code=listo />
           <a class="popup-youtube" href='<cms:show videocode/>'><img src=""'</a>
  <cms:embed code=listc />
   
</cms:pages>

</ul>
</div>


What i want to do is get the youtube video id using php and put that into the img src somehow.
Unless anyone knows a better way of making a youtube video gallery!

Re: youtube gallery bootstrap

User avatar
trendoman
Registered User
Hey, why don't you paste a working static sample of your gallery? Then we'll convert it to couch-powered.
Join COUCH:TALK channel here https://t.me/couchcms_chat
Ryazania — a framework to boost productivity with Add-ons viewtopic.php?f=2&t=13475
Support my efforts to help the community https://boosty.to/trendo/donate

Re: youtube gallery bootstrap

avatar
adsalamon
Registered User
Hi
This is a static version. with temp videos

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="js/bootstrap.youtubepopup.min"></script>


<script type="text/javascript">
   $(function () {
      $(".popup-youtube").YouTubeModal({autoplay:0, width:640, height:480});
   });
</script>

<style>
.wrapper {
    width: 50%;
}

ul{
   list-style-type:none;
   
}
</style>
</head>
<body>
<div class="container">

<div id="row">
<ul class="row">
<script type="text/javascript">

</script>


 
     
    <li class='col-lg-3 col-md-3 col-sm-3 col-xs-4 thumbnail'>   <a class="popup-youtube" href="https://www.youtube.com/watch?v=C0DPdy98e4c" title='title of video here'><img src='http://img.youtube.com/vi/C0DPdy98e4c/0.jpg'></a>
    </li>   


 
     
    <li class='col-lg-3 col-md-3 col-sm-3 col-xs-4 thumbnail'>   <a class="popup-youtube" href="https://www.youtube.com/watch?v=C0DPdy98e4c" title='title of video here'><img src='http://img.youtube.com/vi/C0DPdy98e4c/0.jpg'></a>
    </li>   


 
     
    <li class='col-lg-3 col-md-3 col-sm-3 col-xs-4 thumbnail'>   <a class="popup-youtube" href="https://www.youtube.com/watch?v=C0DPdy98e4c" title='title of video here'><img src='http://img.youtube.com/vi/C0DPdy98e4c/0.jpg'></a>
    </li>   
    <li class='col-lg-3 col-md-3 col-sm-3 col-xs-4 thumbnail'>   <a class="popup-youtube" href="https://www.youtube.com/watch?v=C0DPdy98e4c" title='title of video here'><img src='http://img.youtube.com/vi/C0DPdy98e4c/0.jpg'></a>
    </li>
    <li class='col-lg-3 col-md-3 col-sm-3 col-xs-4 thumbnail'>   <a class="popup-youtube" href="https://www.youtube.com/watch?v=C0DPdy98e4c" title='title of video here'><img src='http://img.youtube.com/vi/C0DPdy98e4c/0.jpg'></a>
    </li>

</ul>
</div>
</div><!-- gallery-wrapper -->
</body>
</html>

Re: youtube gallery bootstrap

avatar
adsalamon
Registered User
Messing around i got something working doing this? not elegant then again im new to this!!

Code: Select all
<?php require_once'couch/cms.php'; ?>


<cms:template clonable='1' gallery='1' >
  <cms:editable name='videocode' label='Video code' type='textarea' no_xss_check='1' ></cms:editable>
<cms:editable
    name='my_image_thumb'
    label='Image Thumbnail'
    desc='Thumbnail of main image'
    width='400'
    show_preview='1'
    assoc_field='videocode'
    type='thumbnail'
/>
  
  </cms:template>

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="js/fluidvids.js"></script>
<script src="js/bootstrap.youtubepopup.min"></script>
<script>
$(document).ready(function() {
fluidvids.init({
selector: ['iframe', 'object'], // runs querySelectorAll()
players: ['www.youtube.com'] // players to support
});
}); 
</script>

<script type="text/javascript">
   $(function () {
      $(".popup-youtube").YouTubeModal({autoplay:0, width:640, height:480});
   });
</script>

<style>
.wrapper {
    width: 50%;
}

ul{
   list-style-type:none;
   
}
</style>
</head>
<body>
<cms:php>
function youtube_id_from_url($url) {
    $pattern = 
        '%^# Match any youtube URL
        (?:https?://)?  # Optional scheme. Either http or https
        (?:www\.)?      # Optional www subdomain
        (?:             # Group host alternatives
          youtu\.be/    # Either youtu.be,
        | youtube\.com  # or youtube.com
          (?:           # Group path alternatives
            /embed/     # Either /embed/
          | /v/         # or /v/
          | /watch\?v=  # or /watch\?v=
          )             # End path alternatives.
        )               # End host alternatives.
        ([\w-]{10,12})  # Allow 10-12 for 11 char youtube id.
        $%x'
        ;
    $result = preg_match($pattern, $url, $matches);
    if ($result) {
        return $matches[1];
    }
    return false;
}   
</cms:php>
<div class="container">

<div id="row">
<ul class="row">

<cms:pages masterpage='video.php' include_subfolders='0' >


 
 <cms:set listo="<li class='col-lg-3 col-md-3 col-sm-3 col-xs-4 thumbnail'>" />
  <cms:set listc="</li>" />
  
    <cms:embed code=listo />

<a class="popup-youtube" href="<cms:show videocode/>"><cms:php>
$url = "<cms:show videocode />";
$videourl =  youtube_id_from_url($url);
echo "<img src='http://img.youtube.com/vi/".$videourl."/0.jpg'>";
</cms:php></a>
    <cms:embed code=listc />
   
</cms:pages>

</ul>
</div>
</div><!-- gallery-wrapper -->

</body>
</html>

<?php COUCH::invoke(); ?>
Post a reply
Previous Next
4 posts Page 1 of 1
Return to Bug Reporting and Troubleshooting