*First things first:* You can use the following shortcodes on **every page** and in **every post** as often as you like directly in between of your written contents. They are most likely the *easiest way to enrich your contents* with suitable media, you can add **captions**, **descriptions** and **links** to them and they also *seamlessly adapt to the screen size of your visitors* to avoid breaking the look and feel. Below I'll just add a few images, videos and audio files for reference purposes and will try to describe how it works. ### Images Let's begin with an **image** which has been already added to the `images` folder inside the theme directory which is mandatory for this type of media by the way. {% include media-image.html file="shortcode-image.jpg" title="Shorcode Preview" caption="This is how each of the shortcodes look like — the ideal image width should be at least 796px by the way" link="http://themeforest.net/user/indiqo" %} ### YouTube videos Next up, a **video on YouTube** — I really like Jack Johnson's music and listened to it pretty much all of the time while working on this theme, so why not share a video with you. {% include media-youtube.html file="https://www.youtube.com/watch?v=PeFJlk8eOhQ" title="You And Your Heart" caption="Just add the video url and the shortcode will do everything else for you" link="http://jackjohnsonmusic.com" %} ### Vimeo videos Of course it's also possible to do just the same with **Vimeo videos**. {% include media-vimeo.html file="http://vimeo.com/20344943" title="Love Snowboarding" caption="All contents automatically adjust their size depending on the visitors screen resolution" link="http://protectourwinters.org" %} ### Soundcloud music Adding **music from Soundcloud** is that easy too. {% include media-audio.html file="https://soundcloud.com/avicii-tomorrowland-2013/avicii-live-at-tomorrowland-2013" title="Great Sound" caption="Quite convenient.. for a static site generator." link="http://www.tomorrowland.com" %}

Adding media with captions

Adding images, videos and audio files to a website shouldn't be difficult. That's why Hashtag for Jekyll includes some simple short codes which make it easy to add all of that — even better, you can also add captions and links to each one.

Published May 7, 2014 in guides
Scroll

First things first: You can use the following shortcodes on every page and in every post as often as you like directly in between of your written contents.

They are most likely the easiest way to enrich your contents with suitable media, you can add captions, descriptions and links to them and they also seamlessly adapt to the screen size of your visitors to avoid breaking the look and feel.

Below I’ll just add a few images, videos and audio files for reference purposes and will try to describe how it works.

Images

Let’s begin with an image which has been already added to the images folder inside the theme directory which is mandatory for this type of media by the way.

Shorcode Preview

Shorcode Preview

This is how each of the shortcodes look like — the ideal image width should be at least 796px by the way

Visit Website

YouTube videos

Next up, a video on YouTube — I really like Jack Johnson’s music and listened to it pretty much all of the time while working on this theme, so why not share a video with you.

You And Your Heart

Just add the video url and the shortcode will do everything else for you

Visit Website

Vimeo videos

Of course it’s also possible to do just the same with Vimeo videos.

Love Snowboarding

All contents automatically adjust their size depending on the visitors screen resolution

Visit Website

Soundcloud music

Adding music from Soundcloud is that easy too.

Great Sound

Quite convenient.. for a static site generator.

Visit Website

Now that you should be familiar with YAML and basic front-matters, it should be easy to adjust the sites global settings.

In order to do so, please open up the _config.yml file in your favorite code or text editor.

Similar to front-matter of posts and pages, the area between both triple-dashes includes various options to configure the site.

Default Settings

Default Settings

This is how the default config file looks like — not too complex though

Some of them, such as title, name, description, url or copyright should be self-explaining, so let’s have a look at the others below.

  • baseurl: The baseurl can remain empty by default and is just required if you’re going to host your site in a subfolder of your webspace such as /blog for example. In this case, you would have to add /blog as value of this option to make sure paths will be correct.
  • paginate: Defines the amount of posts displayed per page on the homepage.
  • paginate_path: This option defines the folder structure for paginated index pages. It’s slightly more advanced and you can just leave it as it is — for more details, please feel free to have a look at this page on the Jekyll website.
  • twitter: Please feel free to add your Twitter username without the @ here or leave it empty. The username will be used for Twitter Cards supported by the theme.
  • disqus: Sign up for a free account on Disqus and add your unique shortname to this option in order to enable comments for each post.
  • analytics: Add your Google Analytics Tracking ID here to enable statistics and tracking of each post and page.

Configuration

Wether you'd like to change the sites title, description and contact email address or just like to enable the comment system or Google Analyticsall of it can be done in one single place.

Published May 6, 2014 in guides