YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar sven.grossenbacher asked

[Tutorial] Widgetkit2 - Youtube Gallery


I have searched a way to make a Youtube Gallery with WK2. I knew it was possible by putting the youtube URL into the Media field and then select a poster image (image that I would have to create from the youtube video) - that second part seemed a bit too time consuming.

Now I created a video gallery with videos from various categories that you can mark with tags and sort them in tabs.
There is no need to create posters - but of course then the Lightbox feature is not working. But why a Lightbox if you can simply click on the video settings to view the video at full screen...

1) Goto Widgetkit - Click New - Select Content Type: Custom - select Gallery - click Create button
2) Click on Settings
a) Layout: Grid - Dynamic Grid - Choose Tabs Filter - Columns (my personal preferences): Phone Portrait: 1 - Tablet: 3
b) Media: No settings
c) Content: Show title - Show Content
d) Lightbox: Disabled
3) Click on Content
a) TITLE: Add Title
b) MEDIA: Add / (you must add some letter to make it work - I chose this one: / )
c) CONTENT: First go to youtube - and get your iframe embed code and add the uk-responsive-width class to it as follows) - I chose 690px width to show it full widht on mobile...

Youtube embed code:

<iframe width="690" height="388" src="https://www.youtube.com/embed/OqMFr5ysHGo" frameborder="0" allowfullscreen></iframe>  

Add responsive classe change to:

<iframe class="uk-responsive-width" width="690" height="388" src="https://www.youtube.com/embed/OqMFr5ysHGo" frameborder="0" allowfullscreen></iframe>

Now you can put this iframe in the CONTENT
4) Click on Manage Fields - first delete the Lightbox Content field if you have it - then click New Field and choose: Tags and click close
a) In the newly created Tag field you can add the category to which this video belongs. For example: Nature - so all other items you are going to create and you call Nature can be shown in a tab later in the Gallery View.... in my case I have displayed 36 videos using 6 different categories...

Click Save
Add as many items as you want...

Now I came across two design problems (my taste)
1) Title showed no margin bottom to video
2) Space between tabs and videos

I solved it by giving the Menu item a class and added some CSS

1) Go to Menus - Menu item that directs to your Video page - Page Display - Page Class - add: video-gallery
2) add the following CSS to your custom.css file inside your style:

.video-gallery .uk-panel-teaser {display:none;}  
.video-gallery .uk-panel-title.uk-margin-bottom-remove {margin-bottom:10px !important;}

Now add the Widget inside your article and enjoy the video gallery.

Instead of doing those CSS changes you could probably create a custom widget if you want a cleaner solution...

Hope you can use this

  • Widgetkit
  • Tutorial


7 Answers


Avatar joshgilson answered

@sven.grossenbacher THANK YOU! Seriously you saved me a ton of time. the simple trick of adding a symbol in the media area was key! 1,000 internet points to you!


Avatar akcreation answered

Awesome work sven.grossenbacher!

Thank you so much for this. I suggest you edit the title of this thread and add the word [TUTORIAL] at the start, that will help people find this excellent post. I'm sure this will be a massive help to the whole community.

Thanks again :)



Avatar jason.learned answered

I am using the current version of WK2 & Joomla and Finch.



Avatar jason.learned answered

Ok I figured out what was going on. I wasn't displaying titles and once I checked them on, everything displayed correctly!

Know someone who can answer? Share a link to this question via email or twitter.