-
Posts
-
Hi!
I use a lot of videos in my site. I need to link from thumbnails in a gallery to these videos.
I would like to put videos in my galleries to play in LightBox.
If this is not possible… Is there a way to make an image in a gallery link to a video that will then play in LightBox?
I couldn’t find anything obvious. If anybody has any suggestions I would be very grateful!
Greetings,
Adrian
Hi,
I’m not sure if this is possible because you can’t put a specific link to gallery images. You can use the Image element. Lay them like a gallery using columns then link the image manually to a video like youtube or vimeo.
Let me tag the rest of the support team.
Regards,
Ismael
i asked the same question here:
https://kriesi.at/support/topic/video-portfolio-gallery-with-filter-and-lightbox
and devin said it’s possible in version 1.6
I’m still on 1.4 so i havent tested it yet
Hi Adrian,
Yes, this is possible with the additions in 1.6. You will use the new option on the individual portfolio item. Its a bit rough right now but ill be cleaned up in the next update (though it will still work for adding a link to the item right now).
Regards,
Devin
Hello Devin, Ismael, Logan,
Thanks for thinking about this!
I have found the functionality you refer to by updating to version 1.6
Alas, I don’t think it’s quite what I’m looking for.
This new feature allows a portfolio preview to link to a different location than the default, (which would be the portfolio entry itself).
What I am looking for is a way to use the gallery feature, in a page or a portfolio, to link to individual videos, which then display in LightBox on that page.
Currently, clicking on a preview image in a gallery grid simply displays an enlargement of that image.
I would like to be able to display a video by clicking on a preview image in a gallery gird.
I was really hoping there’s a work around for this!
Thanks again,
Adrian
Hey Adrian,
If you set the portfolio link to a video it will open up in a lightbox when clicked. Just make sure the Portfolio Grid is set to Open a preview of the entry (known as AJAX Portfolio) for the Link Handling.
Regards,
Devin
Hi Devin,
It is not in the Portfolio Grid but in the Avia Gallery that we want to be able to show video’s in the Lightbox.
We want to create our own thumbnail images for each video and than want to be able to link that image to a youtube, vimeo or selfhosted video. Have a look at http://www.vizspecialeffects.nl/projects/ford-focus/ . First image is a preview to a video but in the gallery we would like to have images as well as video’s that show/play in the lightbox.
We read the post https://kriesi.at/support/topic/linking-gallery-images-to-url and thought that might be a solution.
But we can’t get that solution working, and even than we would have to provide url’s for all images as well as videos.
Hope you can help, thanks Rob
In that case no, there isn’t anything that the theme currently offers that will allow for that easily at the moment.
just updated… Perfect for what I needed!
Adrian,
If I’m understanding you correctly, try this to see if it’s similar to what you’re looking for (main section, don’t pay attention to the other clutter):
http://www.theberryeffect.com/ford-focus/
If so, I’ll walk you through it.
It’s a similar look, it’s a gallery with thumbnails… when you click the thumbnail, it will load either a larger image in the lightbox or a video in the lightbox. I used two different size images just to show versatility
Hi Logan2d,
that’s perfect (I think), can you walk me through? I’m very interested how you did this.
Would this also work whith self-hosted videos and vimeo?
Thanks Adrian
Wow, I didn’t mean to get so long winded…
Youtube and Vimeo work, but I think I read in another post that you can’t use self hosted videos. The staff will have to comment on that.
I used the porfolio grid. If those features are what you want, and Devin said the Avia gallery can’t do it, then why not use the Portfolio Grid instead of Avia Gallery?
You have a nice looking website, so maybe you’ve already thought about this approach and chosen not to do it… but I think this would work well with your site…
I think of a “Portfolio Items” page as any page OR image/video that I want to show in a gallery. So I created a portfolio page as a “placeholder” page for each of the 3 images. Load a featured image (which is the thumbnail), then select the categories that you want (this is key, and i would recommend at least 3 which I’ll explain). For images, you’re done… For video, you still upload the thumbnail that you want to see in the gallery as your featured image, but then use the new preview url link field to set the youtube or vimeo http address.
I know… you could have hundreds of pages, BUT they only take a few seconds to create, they are easy to navigate and find (all listed in the admin “portfolio all” section, and edits can be done with the “quick edit”). You don’t have to worry about content. They are literally a title, featured image, a link if it’s a video, and categories. As I said before, the page is just a placeholder for media or dummy page that the user will never go to.
Right now you may only have portfolio pages for your actual portfolio (I’ll call them projects to avoid confusion) pages.
Ford Focus
Mechanisms
Animatronics
Etc….
And you have categories of the same name for each project, which your current portfolio grid page shows.
If you do the page per gallery image approach, think of this structure for each project…
Ford Focus (current project page)
– Focus Photography 1 (Gallery 1)
– Focus Photography 2
:
:
– Focus Photography 18
– Focus Test Shoot 1 (Gallery 2)
– Focus Test Shoot 2
:
:
– Focus Test Shoot 18
Mechanisms
– Mechanisms Photography 1
:
Animatronics
– Animatronics Photography 1
:
If you start the title of your image gallery placeholder pages with the same name as your Project, it will help to sort/find them on the Portfolio Item page.
Now think about categories.
You already have a portfolio grid for your actual portfolio. This is probably showing all categories. In order to keep all the new pages from showing up, only mark your current categories instead of “all” categories. You want different category names for your new pages. I would recommend something like
“Photo” or “Video” – type of media (just 2 categories)
“Ford Focus Media” (identifies each project page that you’re on, but different from the Ford Focus category that you already have. 8-10?)
“Ford Focus Photography” (Ford Focus Test Shoot, etc.) – one per image/video to match the gallery. you’ll have 3-4 of these categories for each project page. also equal to the total number of galleries on your website
You would keep the same categories for each Gallery, so your portfolio pages with their categories will be:
Ford Focus (current project page)- Ford Focus category
Ford Focus Photography 1 (Ford Focus Media, Photo, Video, Ford Focus Photography)
Ford Focus Photography 2 (Ford Focus Media, Photo, Video, Ford Focus Photography)
:
Ford Focus Test Shoot 1 (Ford Focus Media, Photo, Video, Ford Focus Test Shoot)
etc…
Now the easy part, to make it all work… anywhere that you have an Avia gallery, can be replaced by a portfolio grid and simply choose the category that you want to show. The options I used:
Category shown – Ford Focus Photography (your image gallery category)
4 row gallery
no filter
no pagination
Show image in lightbox
Size 180 x 180 (125 x 125 if you want smaller ones like your current gallery)
Since lightbox is chosen, all thumbnail images will open in the lightbox. Since the new preview url link was set on the video portfolio placeholder pages, it will override the thumbnail image in the lightbox and show the video in the lightbox instead. The extra time you might think you spend on the front side, saves time of adding videos to each individual
You can make it work with just one category per image, which is the one that identifies your gallery “Ford Focus Photography”. I threw in the photo, video, and Ford Focus Project because it would take no time to create and tag these additional categories, and it gives you nice filtering options if you wanted to do one massive photo/video gallery with all of your images and video. It would just be another portfolio grid page (like your current one) but choose the categories photo, video, and then your “Ford Focus Media”, “Mechanisms Media”, “Animatronics Media”.
If you made it through all that… Hope it helps you or someone else!
Hi Logan2d,
thanks for your elaborate explanation (and time!). We had also been thinking about this solution (but didn’t try it yet).
Nice thing is that the roll-over shows whether its a still or a video.
We’re afraid this will not be a practical solution for our problem because we want to place so many stills and videos (several hundreds).
We would have to create separate categories for each still & video and won’t be able to use the categories function in the way it was intended (and would work for us). We also want to have a solution to create projects (with galleries) fast to show client the progress on projects (tests & demo’s).
We think we will contact Kriesi to ask if it is possible to adapt gallery.php (avia) as a commissioned request.
We think it should be possible to use the caption field of the gallery entries as a destination link for a video to show in the lightbox.
We want to created separate thumbnail images with a video icon, so the user knows that it is a video.
If the caption field is empty, the normal attachment (still) should be shown in the lightbox.
Thanks again, Logan2d
Greetings Adrian & Rob
@Dude/Devin: can you have a look at the request above and let us know if it is possible to create a adaptation of gallery.php
Please contact us through mail to discuss possibilities, costs etc.
Hi,
I have a simple solution for you here but it will only play vimeo and youtube videos. Edit config-templatebuilder > avia-shortcodes > gallery.php, find this code on line 191
$thumbs .= " <a href='".$link[0]."' data-rel='gallery-".self::$gallery."' data-prev-img='".$prev[0]."' {$class} data-onclick='{$counter}' title='".$description."' ><img {$tooltip} src='".$img[0]."' title='".$title."' alt='".$alt."' /></a>";
$first = false;Replace it with
$thumbs .= " <a href='".$alt."' data-rel='gallery-".self::$gallery."' data-prev-img='".$prev[0]."' {$class} data-onclick='{$counter}' title='".$description."' ><img {$tooltip} src='".$img[0]."' title='".$title."' alt='".$alt."' /></a>";
$first = false;Now, on the Advance Layout Editor, insert the Gallery element. Click Add/Edit Gallery. Upload an image or select one on Media Library. Beside the image, look for ATTACHMENT DETAILS, fill in the Alt text with the youtube or vimeo link. The url should be complete, something like this http://www.youtube.com/watch?v=G0k3kHtyoqc.
It will open the videos on lightbox.
Regards,
Ismael
Hi Ismael,
thanks very much for your quick solution, this is almost exactly what we want.
One more adjustment would make it even more easy to to set up all our avia galleries (we want to create many): most of the thumbs will be pointing to the original full-size image in the lightbox. Only some 20% will be pointing to a video. Now we also have to look up the url’s for all full-size images.
Would it be possible that – if the alt field is empty – the thumb is automatically pointed to the full size-image of the thumb (in the lightbox)?
As mentioned, we would be willing to pay for adaptions because it would save us a lot of time setting up the galleries.
Thanks again, regards Rob & Adrian
Hi Rob & Adrian,
Alright. I got it working. Took me 20 minutes. Not gonna hustle you, since my World of Warcraft guild-master said it may lower my defensive spells and I need those. ;)
Please open up gallery.php and find line 173 that looks like this
$prev = wp_get_attachment_image_src($attachment->ID, $preview_size);and now find line (not sure which one) but probably 191 that looks like
//generate thumb width based on columnsDelete everything *between* those two lines above (or better yet comment it out) but leave the two lines themselves intact .
Paste the code below in between 173 and 191? without harming those 2 lines.
$caption = trim($attachment->post_excerpt) ? wptexturize($attachment->post_excerpt) : "";
//$tooltip = $caption ? "data-avia-tooltip='".$caption."'" : "";
$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
$alt = !empty($alt) ? esc_attr($alt) : '';
$title = trim($attachment->post_title) ? esc_attr($attachment->post_title) : "";
$description = trim($attachment->post_content) ? esc_attr($attachment->post_content) : "";
$tooltip = "data-avia-tooltip='".$title."'";
if($style == "big_thumb" && $first)
{
$output .= "<a class='avia-gallery-big fakeLightbox $imagelink' href='".$link[0]."' data-onclick='1' title='".$description."' ><span class='avia-gallery-big-inner'>";
$output .= " <img src='".$prev[0]."' title='".$title."' alt='".$alt."' />";
if($caption)
{
$output .= " <span class='avia-gallery-caption>{$title}</span>'";
} else {
$output .= " <span class='avia-gallery-caption>{$title}</span>'";
}
$output .= "</span></a>";
}
if ($caption) {
$thumbs .= " <a href='".$caption."' data-rel='gallery-".self::$gallery."' data-prev-img='".$prev[0]."' {$class} data-onclick='{$counter}' title='".$description."' ><img {$tooltip} src='".$img[0]."' title='".$title."' alt='".$alt."' /></a>";
$first = false;
} else {
$thumbs .= " <a href='".$link[0]."' data-rel='gallery-".self::$gallery."' data-prev-img='".$prev[0]."' {$class} data-onclick='{$counter}' title='".$description."' ><img {$tooltip} src='".$img[0]."' title='".$title."' alt='".$alt."' /></a>";
$first = false;
}
}
$output .= "<div class='avia-gallery-thumb'>{$thumbs}</div>";
$output .= "</div>";Add the url to the caption in this format for videos (vimeo ok too)
http://www.youtube.com/watch?v=W0MBzxFHOyoleave caption blank for normal images.
and add the caption itself (the words that display in the tooltip) in the title tag of the images. ( http://i.imgur.com/V1dW0zm.png ) In the alt text below the title tag (see previous image) you can enter a title i guess that will float above to the left of the lightbox
The End.
Thanks,
:)
Nick
Hi Nick,
thanks very much! This is exactly what we were looking for. But know there is an other problem.
I had it working yesterday but now it doesn’t work any more.
Yesterday the gallery showed tooltips above all thumbs on rollover.
Today it only shows the tooltip with thumbs that link to a video. And the tooltip contains the url that is added to the caption field.
Look at: http://www.vizspecialeffects.nl/projects/ford-focus/
The first thumb of the first gallery should open a video but I can’t get it working any more.
I don’t understand how this has happened. All I changed in this theme is header.php (google font), custom.css & gallery.php.
I have recreated gallery.php several times following your instructions yesterday evening, but can’t get it to work any more!
Any clues, I’m getting a bit desperate meanwhile?
Can I send you wordpress/ftp login through private message yo have a look?
Thanks very much, regards
Rob (& Adrian)
- The topic ‘PLAYING VIDEOS FROM THE GALLERY’ is closed to new replies.