Full scripting walkthrough with some explanation for the Bootstrap Jekyll Github blog plus some js modifications

aschatria(66)

Published in

#utopian-io

Words

586

Reading

3 min

Listen

Play

Yesterday I took another short marathon (lol) and installed yet another topical blog on my Github website. I used to explore a lot about the various myths and mythological creatures, so I thought it will be a great idea to install my previous video blog into the Github and make it all flashy with some nifty scripts and Bootstrap.

I was met with a few demands, but all of them were resolved rather fast. It could be a few demands that still have to be resolved, device-wise and a few things to add here and there. But, it has a final shape and all scripts are working.

The front page of my new sub-blog is shown in the cover image, and I have to say I am extremely satisfied with the result. The Bootstrap is amazing.

The posts thumbnails are all made with the Bootstap's cards incorporated with the grid layout ( columns).

Preview available here:
https://aschatria.github.io/mythology/norse-mythology/
Link to Github repository here:
https://github.com/aschatria/aschatria.github.io/blob/master/mythology/norse-mythology.html

The header of a page requires some script to make the whole Bootstrap work smoothly. Recently I upgraded to the latest version, so some pages might not have all the same scripts in their headers.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

The cards are placed inside of a col-sm div components and responsive change to a device width is made with the fluid containers.

<div class="card" style="width:100%;background:black; color: white;">
  <img class="card-img-top" src="https://img.youtube.com/vi/ra5Qi7hb30E/sddefault.jpg" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Top 10 Creatures</h5>
    <a href="https://aschatria.github.io/top-10-coolest-creatures-from-norse-mythology/" class="btn btn-primary">Watch</a>
  </div>
</div></div>
<br/>

Styling can be modified with the additional .css stylesheet but I decided to use the easier method, in-HTML styling to add a necessary gap between vertical cards in the mobile layout.

The images for the cards are pulled out of the YouTube videos with the thumbnail link.

Example:

src="https://img.youtube.com/vi/49525PlcObc/sddefault.jpg"

An actual source is :

src="https://img.youtube.com/vi/YOUTUBE-VIDEO-CODE/sddefault.jpg"

I made a separate layout for the post pages featuring a responsive video display with the:


<style>
       .video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
  </style>

Or in case I wish to use a cover image, a responsive image programmatically cut-out to a default height with the:

 <style>
  #myfluid {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 450px;
  margin-bottom: 1rem;
}
  </style>

Both scripts are called into a Bootstrap jumbotron above the post's title and excerpt.

{% if page.image %}
<div class="jumbotron-fluid" style="padding: 5px;">
  <img src="{{ page.image}}" class="img-fluid" id="myfluid" alt="Responsive image">
  </div> <br/>
   {% else %}
      {% endif %}
  
    {% if page.video %}
    <div class="jumbotron-fluid" style="padding: 5px;">
      <div class="video-container">
      <iframe  width="560" height="315" src="https://www.youtube.com/embed/{{page.video}}?rel=0&controls=0&showinfo=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
      </div></div> <br/>
      
    {% else %}
{% endif %}

Preview of a post page here: https://aschatria.github.io/top-10-coolest-creatures-from-norse-mythology/
Github post layout source: https://github.com/aschatria/aschatria.github.io/blob/master/_layouts/myth.html

A post page has a comment section and a sidebar featuring list of recent posts in that category cut to correspond a final number of the posts shown, in this case, two posts but I will add more when I add more texts to the posts.

<div class="posts">
    
    {% assign count = 0 %}
  {% for post in site.posts %}
    {% if post.mythology == 'mythology' %}
    
     {% assign count = count | plus:1 %}
      <div class="post">
        {% if post.video %} <img style="width:95%; height:auto;" src="https://img.youtube.com/vi/{{post.video}}/sddefault.jpg"/> {% else %} {% endif %} 
        {% if post.image %} <img style="width:95%; height:auto;" src="{{post.image}}"/> {% else %} {% endif %}<br/>
        <b class="post-title"><a href="{{ post.url }}">{{ post.title }}</a></b> <br/><span class="text-muted">{{ post.date | date_to_string }}</span>
</div>
     {% if count == 2 %}{% break %}
  {% endif %}
  
  
    {% endif %}
  {% endfor %}
</div>

All posts are published through the Jekyll and use the front meter to build necessary parts of a page, including image, video, excerpt, title, date, and content written in the post body.

Soon I will upgrade my page with more interesting parts and more tools for everyone to use.
To preview all parts of my page go to the https://aschatria.github.io/ and take a look at it and what I have there.

I know that what I wrote in here is pretty complex, so if you need something for your own Github ( or any blog ) please let me know.