The Sun and The Air

Rocket League Gallery - How I Did That Bad Thing

I recently put together a little gallery page for Rocket League clips, and figuring out how as a completely incapable web-dev person was enjoyable! I'm writing it up here to share the hacks and probably so I can laugh at it later.

The page in question is here: Some Recent Rocket League Clips (be warned, it's a bunch of iframes holding a 720p video each, it's not trivial to render.)

I got most of the solutions to my problem through googling, but the solution can be broken up into the 3 usual webdev parts - HTML, CSS, JS. I could have skipped the JS part easily if I was happy with updating this page being a pain, but I'm not! So the bulk of this code is JS, I'm afraid.

HTML

There's nothing to it really.

<div class="gyg-gallery"><ul id="gyg-list"></ul></div>

<script>
  /* The JS Part */
</script>

<style>
  /* The CSS Part */
<style>

We make a div that we're going to style later with CSS, and put a list in it with a specific ID. Through-out this I'm calling things gyg-*, this is just because the Rocket League clip provider I'm using is called GYG.

CSS

The CSS is also pretty simple, but I absolutely had to steal it from elsewhere.

/* gyg embedding list */
.gyg-embed{ left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25% }
.gyg-iframe{ left: 0; width: 100%; height: 100%; position: absolute; border: 0;}
.gyg-gallery ul  {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
  padding: 20px 0;
  list-style: none;
}
.gyg-gallery li {
  position: relative;
  flex-basis: calc(50% - 20px);
}

gyg-embed and gyg-iframe just steal the style portion of the embed HTML provided by this iframe helper website. All this is doing is setting some positional parameters, and I didn't see the point in messing with them.

gyg-gallery ul and gyg-gallery li are stolen from the fantastic add-ons put together by Robert Birming for his Bear theme Bearming, and tweaked to manage the gallery layout I want. This really does a ton of work in very little code, and cleans things up beautifully.

Similar to how I would add his gallery to my blog, I added this CSS to my Theme at https://bearblog.dev/[account]/dashboard/styles/ exactly as written in the codeblock.

Javascript

Ok here's where the bullshit happens.

var gyg_list = [
  "StalwartUnclaimedDestindoraguille",
  "UnthawedPointingKolorado",
  "InsaneGlairyGordon",
  "GratisSturdiedBlooey",
  "ArtyPubicAzura",
  "MoneyedRhomboidBigboss",
  "InphaseCursedCardqueen",
  "SevereNicerFreyacrescent"
];

var target_ul = document.getElementById("gyg-list");

for (let i = 0; i < 8; i++) {
  var gyg_code = gyg_list[i];
  var src_string = "https://www.gifyourgame.com/ifr/" + gyg_code

  var makeIframe = document.createElement("iframe");
  makeIframe.setAttribute("src", src_string);
  makeIframe.setAttribute("class", "gyg-iframe");
  makeIframe.setAttribute("scrolling", "no");
  makeIframe.setAttribute("allow", "encrypted-media");
  makeIframe.setAttribute("allowfullscreen", true);

  var makediv = document.createElement("div");
  makediv.setAttribute("class", "gyg-embed");

  makediv.appendChild(makeIframe);
  target_ul.appendChild(makediv);
}

Originally I was going to implement this the quick and dirty way by just hand-making every single <li> each time, or god forbid do it in Excel, but then I saw this post by Ruby that got my terrible little script-kiddy brain ticking over.

All of this is just because I'd like to be able to copy-paste in a list of new ids with minimum faff. It's a pretty quick bit of formatting to get the ids out manually, bash them about in notepad++, then paste them in. I'd like to smooth this process out a bit more in future though.

We then grab our empty gyg-list from the page so we can tinker with it.

We loop over the list of GYG ids, paste each together with the GYG embed link, and get started on the ugly stuff. We make an iframe (basically a window into another webpage), and set some attributes:

This gives us the iframe object, but if we just jammed it in the list it'd be... horrific. Lovecraftian in how it'd encompass the page. We want to trap it in a div - as far as I understand, in HTML that's the crutch that lets you do cool things easily. It just means "a contained bit of the page", and the styling on this div will help set bounds on our iframes.

We make our div with document.createElement("div"), set it as a "gyg-embed" class, put the iframe in it, then use target_ul.appendChild(makediv) to add it to the end of the list we're displaying on the page.

The CSS takes care of the rest and we're... Kind of done?

The Finished Item

You can just go over to the page and look, but in case it breaks here's what it's supposed to look like:rl_css_crime

I'm pretty satisfied with the look of it, so won't be looking to improve that at all in the future.

Improvements

There are a few things that are obvious stumbling blocks here:

Comments

#blogmeta #css #html #javascript #rocketleague #webdev