TUTORIALS FOR TDK

 

Quick reference for using categories and/or tags

Homepage

  • Big slideshow: videos/images are uploaded manually. No categories or tags are used.
  • Shows: each show connects to the top-most video in the Video Gallery page that has the corresponding category (Meditations for Assholes, Hollygood, GoodnightCap, etc).

Meditation for Assholes page

  • Manic button carousel: connects to videos in the Video Gallery page that have the Manic Button tag.
  • Conversations carousel: connects to videos in the Video Gallery page that have the Conversations tag.
  • Meditations carousel: connects to videos in the Video Gallery page that have the Meditations tag.
 

How categories and tags work to display your site's videos

 

How to organize videos in the Video Gallery

To be able to display any set of videos under the same tag from Newest to Oldest, each time you add a new video into the Video Gallery page, you'll need to drag it all the up the video column and make it the first video, or at least place it right before the last video you uploaded for a particular series.

In the following example, you have 3 videos under the Manic Button tag saved in the Video Gallery #3, #6 and #21.

Since #21 is at the very bottom of your video columns in the Video Gallery page, it will display as the oldest (the one in the bottom) in your Manic Button video list (even if it has a newer date).

To rearrange the order and make #21 the newest, you can drag it all the way up the video column in the Video Gallery page and place it where #1 is, or at least right before #3 which is the top-most video with the same tag.

If for example you want #3 to stay on top, but want #21 to be before #6, then you would need to drag #21 to any position after #3 but before #6 so it shows up in the middle of your video list.

Screen Shot 2017-11-20 at 5.23.01 PM.png
Screen Shot 2017-11-20 at 5.43.45 PM.png
 

How to add videos to the Homepage slider

1. Go to the Homepage, click Edit, stand over the slider and click Edit again. In the window that will show up, click on the "+" sign at the bottom.

 
Screen Shot 2017-11-20 at 5.51.23 PM.png
 

2. In the small pop up that will show up, select Video

 
Screen Shot 2017-11-20 at 5.51.31 PM.png
 

3. Fill out the corresponding info:

  • A – Click on the icon and in the new pop up window paste the code you get when you click on Share > Embed in a Youtube video.
  • B – Enter the title of the video. This one will appear as the blue text.
  • C – Enter a short description of the video. This one will appear under the blue text.
  • D – Upload a thumbnail. 1920 x 1080 works great, it can be smaller but make sure it's 16:9 ratio as per the recommendations in the "Options to add video blocks" section of this page.
  • E – Make sure to leave checked the Use thumbnail option only when using a thumbnail. If it's activated when there's no thumbnail uploaded, the video will be displayed as a black screen.
 
Screen Shot 2017-11-20 at 5.51.39 PM.png
 

4. Hit Save and then Apply and you're done!

 

Options to add video blocks on your site, outside of the Video Gallery page.

Regarding adding videos to the site, there are different ways to do it:

  1. Through the “Embed block” (not recommended).
    If using this method, make sure the code you’re embedding for the video has the width and height set as 16:9 (same Youtube ratio) to avoid getting black lines around it.

    For example, in this code: 
    <iframe src="https://player.vimeo.com/video/237312861" width="640" height="580" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

    The width/height ratio (640 x 580) isn’t 16:9 so you would get those annoying black lines at the top and bottom of the video.
    You can check here if you have the right ratio: http://size43.com/jqueryVideoTool.html
     

  2. Through the “Video block”, which is a much better option.
    Again, it's best to work with a video that has a 16:9 ratio to avoid any black lines, but if you can't change the ratio of the video, then simply upload a thumbnail image in 16:9 (1920 x 1080 works perfectly) and you're set!
     

  3. Through “Gallery blocks” if you want to create slideshows or carousels or anything like that.
    You can leave the video in it’s original format, but if you want to switch to rectangular you’ll have to set the 16:9 ratio just like you have to do when using the Embed block, and then you can upload a thumbnail in 16:9 as well. Keep in mind that if you don’t change the ratio inside the code but still upload a 16:9 thumbnail, it will get cropped.

    If you're specifically using the Grid gallery block, you can simply choose from the dropdown to display as "16:9 widescreen".
     

  4. Through “Summary blocks” to display videos found in the Video Gallery page.
    For the summary blocks, you can go into the block settings in the Layout tab and choose “16:9 widescreen” as well so it crops the video accordingly. However, if the video you’re displaying or loading from the Video Gallery page into the summary block doesn’t have the ratio fix + thumbnail trick from before, you will still see the black lines.