Apply link to play button added to media gallery plugin - php

Question

I am building a site that uses a plugin to create a gallery view a video feed. In the PHP file that generates the gallery view, I added a play button to display on top of the video thumbnails. While the button displays correctly, the plugin applies the video link directly to the thumbnail image, so if a user clicks directly on the button, it does not open the video modal.
<div class="media-thumb videoPreviewBox">
<div class="videoPreview">
</a><img src="<?php echo $image_path?>" href="#popup_prep" alt="<?php echo $file_src?>" class="<?php echo $playerID?>player_get<?php echo $i?> gallery_thumb" href="<?php echo $file_src?>"/>
<img class="playButtonHover" src="<?php echo $this->getThemePath()?>/images/playButtonHover.png">
<img class="playButton" src="<?php echo $this->getThemePath()?>/images/playButton.png">
</div>
</div>
While I'm not sure why there is a closing tag placed where it is, the plugin seems to work fine. I think the issue is that href="#popup_prep" is applied to the image. I tried to wrap the thumbnail image and play button states in < a href="#popup_prep"> (space added to show tag in post), both with and without the href applied to the image.
I'm stumped and don't want to screw anything up. Hoping a PHP person here can point out what I'm doing wrong. Many thanks!
The rest of this post is information I'm including for due diligence, since I'm not sure how much and what context is needed. First the CSS applied to these elements, followed by the full PHP file for the gallery view.
div.videoPreviewBox {
float: left;
display: inline-block;
width: 21%;
margin: 2%;
margin-top: 0%;
}
#media only screen and (max-width: 594px) {
div.videoPreviewBox {
width: 46%;
}
}
#media only screen and (max-width: 300px) {
div.videoPreviewBox {
width: 96%;
}
}
div.videoPreview {
position: relative;
}
img.videoPreviewImg {
width: 100%;
z-index: 1;
}
img.playButtonHover, img.playButton {
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
margin-top: -24px;
margin-left: -24px;
-webkit-transition: opacity .7s ease-in-out;
-moz-transition: opacity .7s ease-in-out;
-o-transition: opacity .7s ease-in-out;
transition: opacity .7s ease-in-out;
}
div.videoPreview:hover img.playButton {
opacity: 0;
}
div.videoPreviewBox p {
margin-top: 2%;
color: white;
line-height: 18px;
}
.player_wrapper{float: left;}
.player{float: left;clear: both;}
.scroller{margin-bottom: 35px; float: left;clear: both; width: 100%;}
.rssIcon{float: left;clear: both;}
.scroll_item{clear: left; float: left;}
.thumb_img{margin-right: 12px; margin-bottom: 25px; float: left; border-color: white; border-width: 2px; border-style: solid; background-color: #dddddd; height: 135px;}
.preview{ width: 600px; }.play_button{padding: 8px; background-color: #e9e9e9; border-color: #c9c9c9; border-width: 1px; border-style: solid; float: right;}
.rssIcon{width: 100%;}
.gallery_thumb{margin-bottom: 12px; margin-right: 12px; }
.gallery_thumb:hover{cursor: pointer;}
.mejs-container{margin-top: 20px!important}
And the full PHP gallery view file:
<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$btID = $b->getBlockTypeID();
$bt = BlockType::getByID($btID);
$uh = Loader::helper('concrete/urls');
$rssUrl = $controller->getRssUrl($b);
$textHelper = Loader::helper("text");
$fl = Loader::model('file_version');
$uh = Loader::helper('concrete/urls');
$mh = Loader::helper('media_type','promedia');
$bt = BlockType::getByHandle('promedia_list');
$height = '400';
$width = '600';
$spread = 4;
$playerID = rand(0,777777);
if (count($cArray) > 0) { ?>
<div class="scroller">
<div id="media_galery">
<?php
$t = 0;
for ($i = 0; $i < count($cArray); $i++ ) {
$t++;
$file = $cArray[$i];
$remote = null;
$name = $file->getFileName();
$file_path = BASE_URL.DIR_REL.$file->getDownloadURL();
$ak_d = FileAttributeKey::getByHandle('media_date');
$date = $file->getAttribute($ak_d);
$ak_a = FileAttributeKey::getByHandle('media_artwork');
$image = $file->getAttribute($ak_a);
if($image==null){
$image_path=$uh->getBlockTypeAssetsURL($bt).'/tools/mp3.png';
}else{
$image = File::getByID($image->fID);
$image_path=$image->getURL();
}
$file_src = BASE_URL.DIR_REL.$file->getRelativePath();
$ak_s = FileAttributeKey::getByHandle('media_audio');
$audio = $file->getAttribute($ak_s);
if($audio){
$audio_array = $mh->getMediaTypeOutput($audio);
$audio_path = $audio_array['path'];
$file_src = $audio_path;
}
$video = null;
$ak_s = FileAttributeKey::getByHandle('media_video');
$video = $file->getAttribute($ak_s);
if($video){
$video_array = $mh->getMediaTypeOutput($video);
$video_path = $video_array['path'];
//var_dump($video_array['id']);
$image_path = $mh->getMediaThumbnail($video_array['id'],$video_array['type']);
//$video_src = $video_path.'?width='.$width.'&height='.$height;
//$file_src = $video_src;
if($video_array['type'] == 'vimeo'){
$file_src = 'http://player.vimeo.com/video/'.$video_array['id'];
}else{
$file_src = $video_path;
}
}
?>
<div class="media-thumb videoPreviewBox">
<div class="videoPreview">
</a><img src="<?php echo $image_path?>" href="#popup_prep" alt="<?php echo $file_src?>" class="<?php echo $playerID?>player_get<?php echo $i?> gallery_thumb" href="<?php echo $file_src?>"/>
<img class="playButtonHover" src="<?php echo $this->getThemePath()?>/images/playButtonHover.png">
<img class="playButton" src="<?php echo $this->getThemePath()?>/images/playButton.png">
</div>
</div>
<?php
if($t == $spread){
$t=0;
echo '</tr>';
}
}
for($d=$t;$d<$spread;$d++){
echo '<td></td>';
if($t == $spread){
echo '</tr>';
}
}
?>
</div>
</div>
<div style="display: none;">
<div id="popup_prep">
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
$('.gallery_thumb').fancybox({
width: 'auto',
height: 'auto',
onClosed: function(){
$('video, audio').each(function() {
$(this)[0].player.pause();
});
}
});
});
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
$('.gallery_thumb').click(function(){
$('#popup_prep').html('');
var html = '';
var path = $(this).attr('alt');
//console.log(path);
var extension = path.substr( (path.lastIndexOf('.') +1) );
if(extension){
switch(extension) {
case 'm4v':
case 'mpeg':
case 'mpg':
case 'wmv':
case 'avi':
case 'mov':
case 'flv':
case 'f4v':
case 'mp4':
html = '<video class="player_box" id="play" controls="controls" src="'+path+'" width="<?php echo $width?>" height="<?php echo $height?>"></video><br style="clear: both;"/>';
break;
case 'mp3':
case 'm4a':
html = '<audio class="audioplayer" id="play" src="'+path+'" controls="controls" type="audio/m4a"></audio><br style="clear: both;"/>';
break;
default:
var iFrame = true;
html = '<iframe title="video player" width="<?php echo $width?>px" height="<?php echo $height?>px" src="'+path+'" frameborder="0" allowfullscreen></iframe>';
}
}
$('#popup_prep').append(innerShiv(html));
if(!iFrame){
var player = new MediaElementPlayer('video,audio');
}
});
/*]]>*/
</script>
<?php
}
if(!$previewMode && $controller->rss) {
?>
<div class="rssIcon">
<img src="<?php echo $uh->getBlockTypeAssetsURL($bt, 'rss.png')?>" width="14" height="14" />get this feed
</div>
<link href="<?php echo $rssUrl?>" rel="alternate" type="application/rss+xml" title="<?php echo $controller->rssTitle?>" />
<br/>
<?php
}
if ($paginate && $num > 0 && is_object($_fl)) {
$_fl->displayPaging();
}
?>
For full context, here is the page.

Answer 1

I'm not exactly a php expert, but I notice some problems in this line of code:
</a><img src="<?php echo $image_path?>" href="#popup_prep" alt="<?php echo $file_src?>" class="<?php echo $playerID?>player_get<?php echo $i?> gallery_thumb" href="<?php echo $file_src?>"/>
First of all, I'm not sure why there is a "/a" there. That is normally the end tag of a hyperlink. (if I put the <> there it disappears from the answer and gets read like html so lets pretend the "" is the same as <>).
Secondly, it looks like you got the stuff inside the quotes for href and alt mixed up. href is the link, alt is the description. Unless you want the description to be the same as the image link, but I would recoment something more fitting such as alt="Play Video".
Thirdly, check the number of spaces in the class. For example, if $playerID="123" and $i=1. The class would be the following: 123player_get1 gallery_thumb (notice the space between $i, or in this example the number 1, and gallery_thumb). Again I might be wrong but I don't think that space should be there and it can be fixed by eliminating the space beside the closing php tag.
Fourthly, you have two href="" in this img tag. Like I said I'm not an expert, but I'm assuming the first one need not be there and probably is causing trouble, as href is the link it will take you to when the image is clicked.
Fifthly, I'm not sure if it really matters or not, but normally an img tag doesn't have a /> at the end, it only requires a >.
Try substituting it for this line of code:
img src="<?php echo $image_path ?>" href="<?php echo $file_src ?>" alt="YOUR DESCRIPTION HERE" class="<?php echo $playerID ?>player_get<?php echo $i ?>gallery_thumb">
*edit: If it works make sure you understand why!