• Registered: 2016-02-08
  • Posts: 6

Topic: Basic Page video gallery sizing issues. [SOLVED]

Hi!

So I can't figure out a way to display a nice grid layout for a video portfolio page...

I'm using the Basic Page as a starter, and embedding Vimeo links.  Which works fine, but I don't want just a list of vids down the page, like this...

[img]alexlim.com/images/column.jpg[/img]

I want a grid of 2 or 3 embedded vids side by side.  I tried using the 2-column override option, but it seems to set to a fixed page height ?, my videos get cut in half even though they have specified embed pixel dimensions, example:

[img]alexlim.com/images/twocolumn.jpg[/img]

I also thought I would use 1-column Wide override, and write my own code for a multi-column layout, but again it ignores my embed size and instead displays the vids at full browser width, example:

[img]alexlim.com/images/onewide.jpg[/img].

My question is how can I use a Basic Page to create something like this?  (photoshop mockup):

[img]alexlim.com/images/example.jpg[/img].

Thanks for any suggestions!

  • Registered: 2012-12-16
  • Posts: 950

Re: Basic Page video gallery sizing issues. [SOLVED]

A grid of videos is not something that Showkase has native support for so you'd certainly need to find some kind of manual solution.

The first thing to bear in mind is that Showkase fits videos using the FitVids JavaScript library.
If you want to disable the loading of this JavaScript file, open the 'showkase/_themes/base/pagetypes/basetheme.tpl' file in a plain text editor and remove line 170:

<script src="{$ss_themesUrl}/base/js/jquery.fitvids.js"></script>

Now, your videos will no longer be resized by Showkase and will always be at whatever dimensions you assign to them in their iframes.
You should now be able to position your videos side by side using code such as the following:

<iframe allowfullscreen="" frameborder="0" height="200" mozallowfullscreen="" src="https://player.vimeo.com/video/12345678?color=ffffff" style="margin-right: 20px;" webkitallowfullscreen="" width="300"></iframe>
<iframe allowfullscreen="" frameborder="0" height="200" mozallowfullscreen="" src="https://player.vimeo.com/video/12345678?color=ffffff" style="margin-right: 20px;" webkitallowfullscreen="" width="300"></iframe>
<iframe allowfullscreen="" frameborder="0" height="200" mozallowfullscreen="" src="https://player.vimeo.com/video/12345678?color=ffffff" webkitallowfullscreen="" width="300"></iframe>

Note the style attributes of the iframes (margin-right: 20px;), adding a little space between videos (not required for the last one).

Just use the regular '1-column wide' body text layout for this.

I hope this helps.

Please note that the line number above refers to the current version of Showkase (v1.6.1).

  • Registered: 2016-02-08
  • Posts: 6

Re: Basic Page video gallery sizing issues. [SOLVED]

Awesome, thanks so much for the help and speedy response Steven!

  • Registered: 2012-12-16
  • Posts: 950

Re: Basic Page video gallery sizing issues. [SOLVED]

You're welcome!