video embed fro youtube, vimeo etc

[danielholanda]

Hello,

I'm using prettyphoto to display pictures and I already linked it to PW. Good! Prettyphoto has the option of uploading youtube, vimeo and more video formats. I would like to have a field which accepts video. I've tried to use the field of images but it only accepts img formats.

Prettyphoto works in a simple way.

This would be the upload of an image:

<div class="single_left">
<a href="_img/examples/image-1.jpg" rel="prettyPhoto[gal1]" title="it works"><img src="_img/examples/thumb-1_50.jpg" alt="" /></a>
</div>

This of a video:

<div class="single">
<a href="http://vimeo.com/19880686" rel="prettyPhoto[gal1]" title="me with my friends in festival bu bu"><img src="_img/examples/thumb-6_50.jpg" alt="" /></a>
</div>

As you can observe the only thing that changes is the href from a url where the picture is hosted to the link given by vimeo in this example to embed in your website.

Therefore there should be a field or something which lets you print this link into href. I don;t know if to use a field or some manipulation...

In this moment this is the code for the list of pictures displayed with PW. It does work and I would like to create the same system for the videos if possible:

<?php 
foreach($page->photo as $image){
       echo "<div class='single'><a href='{$image->url}' rel='prettyPhoto[gal1]' title='{$image->description}'><img src='{$image->getThumb('thumbnail')}' width='50' height='50' alt='' /></a></div>";
}
?> 

[ryan]

I've done something like this before and just ended repurposing the image description field to store the external link URL. But if you want to be able to have both a description and a link, then you would put both your description and URL in the field, and just be consistent with how you put in the URL so that you can easily parse it out at runtime. For example, lets say you decided that you would always put in your description first, and follow it with the text "@http://domain.com/" (using the '@' to indicate to yourself it's a URL), so a full description might look like:

This is a video of a bird flying. @http://vimeo.com/something/

Then you might parse it out at runtime like this:

foreach($page->photo as $image) {
 $description = $image->description;
 if(strpos($description, '@') !== false) {
   list($description, $link) = explode('@', $description); 
 } else {
   $link = '';
 }
 $out = "<img src='{$image->url}' alt='$description'>";
 if($link) $out = "<a href='$link'>$out</a>";
 echo $out; 
}

[danielholanda]

Hello,

Just used your code and I do understand it. Strpos and explode was new for me so it took me a while. The videos do work correctly using this system. Everything fine but now I have another problem. I have 6 images uploaded and 2 of them have been converted into videos with your system. The videos are shown but the images are not displayed as an image. The thumbnails is shown for each image, but if you click them they do not work anymore as a link. So you cannot zoom via prttyphoto and the CSS does not apply.

This was the code I had before:

<?php
echo "<div class='single'><a href='{$image->url}' rel='prettyPhoto[gal1]' title='{$image->description}'><img src='{$image->getThumb('thumbnail')}' width='50' height='50' alt='DJFemke photo/video' /></a></div>";
?>

This is the actual code:

<?php

foreach($page->photo as $image){
$description = $image->description;
$img = $image->url;
if(strpos($description, '@') !== false) {
list($description, $link) = explode('@', $description);
} else {
$link = '';
}
$out = "<img src='{$image->getThumb('thumbnail')}' width='50' height='50' alt='DJFemke photo/video'>";
if($link) $out = "<div class='single'><a href='$link' rel='prettyPhoto[gal1]' title='$description'>$out</a></div>";
echo $out;

?>

As you can see in the image the videos have applied the style of class="single" and the video works as such. I tried by placing in the href of the link the variable $img you see in the second example. This did not work.

I would like that the user can decide to put images and if they want to put videos they can do it with the system description@link.com. Suggestions?

Thanks in advance!

[danielholanda]

Hello,

I found a solution for displaying video and photo as the client wishes. Please let me know how I could have a cleaner code as it seems a bit lousy.

<?php 
foreach($page->photo as $image){
$description = $image->description;
$img = $image->url;
if(strpos($description, '@') !== false) {
list($description, $link) = explode('@', $description);
} else {
$link = '';
}
$thumb = "<img src='{$image->getThumb('thumbnail')}' width='50' height='50' alt='DJFemke photo/video'>";
if($link) $out = "<div class='single'><a href='$link' rel='prettyPhoto[gal1]' title='$description'>$thumb</a></div>";

if(!$link) $out = "<div class='single'><a href='$img' rel='prettyPhoto[gal1]' title='$description'>$thumb</a></div>";
echo $out;
?>

Thank you very much!!!

[ryan]

There is some redundancy there, so you can shorten it up to this:

foreach($page->photo as $image){
 $description = $image->description;
 if(strpos($description, '@') !== false) {
   list($description, $link) = explode('@', $description);
 } else {
   $link = $img->url;
 }
 $thumb = "<img src='{$image->getThumb('thumbnail')}' width='50' height='50' alt='$description'>";
 echo "<div class='single'><a href='$link' rel='prettyPhoto[gal1]' title='$description'>$thumb</a></div>";
}

[danielholanda]

Hello again Ryan,

First, thanks for the support. The code is a bit longer and for sure it can be done a bit nicer, nice try! The issue with your code is that it works with video but not with the images. The images path is not working. That why in my code I did the following:

Insert variable $img:

[color=#000000]$img [/color][color=#666600]=[/color][color=#000000] $image[/color][color=#666600]->[/color][color=#000000]url[/color][color=#666600];[/color]

Give to options, one if it video and one if its a photo

[color=#000088][font=monospace][size=2][background=rgb(248, 248, 248)]if[/background][/size][/font][/color][color=#666600][font=monospace][size=2][background=rgb(248, 248, 248)]([/background][/size][/font][/color][color=#000000][font=monospace][size=2][background=rgb(248, 248, 248)]$link[/background][/size][/font][/color][color=#666600][font=monospace][size=2][background=rgb(248, 248, 248)])[/background][/size][/font][/color][color=#000000][font=monospace][size=2][background=rgb(248, 248, 248)] $out [/background][/size][/font][/color][color=#666600][font=monospace][size=2][background=rgb(248, 248, 248)]=[/background][/size][/font][/color][color=#000000][font=monospace][size=2][background=rgb(248, 248, 248)] [/background][/size][/font][/color][color=#008800][font=monospace][size=2][background=rgb(248, 248, 248)]"<div class='single'><a href='$link' rel='prettyPhoto[gal1]' title='$description'>$thumb</a></div>"[/background][/size][/font][/color][color=#666600][font=monospace][size=2][background=rgb(248, 248, 248)];[/background][/size][/font][/color][color=#282828][font=monospace][size=2][background=rgb(248, 248, 248)] [/background][/size][/font][/color][color=#000088][font=monospace][size=2][background=rgb(248, 248, 248)]if[/background][/size][/font][/color][color=#666600][font=monospace][size=2][background=rgb(248, 248, 248)](![/background][/size][/font][/color][color=#000000][font=monospace][size=2][background=rgb(248, 248, 248)]$link[/background][/size][/font][/color][color=#666600][font=monospace][size=2][background=rgb(248, 248, 248)])[/background][/size][/font][/color][color=#000000][font=monospace][size=2][background=rgb(248, 248, 248)] $out [/background][/size][/font][/color][color=#666600][font=monospace][size=2][background=rgb(248, 248, 248)]=[/background][/size][/font][/color][color=#000000][font=monospace][size=2][background=rgb(248, 248, 248)] [/background][/size][/font][/color][color=#008800][font=monospace][size=2][background=rgb(248, 248, 248)]"<div class='single'><a href='$img' rel='prettyPhoto[gal1]' title='$description'>$thumb</a></div>"[/background][/size][/font][/color][color=#666600][font=monospace][size=2][background=rgb(248, 248, 248)];[/background][/size][/font][/color][color=#282828][font=monospace][size=2][background=rgb(248, 248, 248)] [/background][/size][/font][/color][color=#000000][font=monospace][size=2][background=rgb(248, 248, 248)]echo $out[/background][/size][/font][/color][color=#666600][font=monospace][size=2][background=rgb(248, 248, 248)];[/background][/size][/font][/color]

I also find my code a bit not elegant. I was asking for a code which has the two possibilities, if a video or if a picture and displayed in a more elegant way. If you have any suggestions please let me know.

Thanks