<!DOCTYPE html>
<html>

<head>
<!-- Meta -->
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="generator" content="Jekyll">


<meta itemprop="description" name="description" content="Featured images in WordPress is something I always wanted for my Jekyll blog as well. I liked how images to show up on the index page automatically. But I had no idea how to fetch images from Jekyll posts. Now my blog index uses this method through which the images are grabbed automatically from Jekyll posts." />



<meta itemprop="keywords" name="keywords" content="fetch images from Jekyll post, grab images from Jekyll post, get images from post Jekyll" />


<title>How to grab first image from Jekyll post?</title>
<!-- Open Graph -->
<meta property="og:locale" content="en_US">
<meta property="og:type" content="article">
<meta property="og:title" content="How to grab first image from Jekyll post?">

<meta property="og:url" content="http://blog.webjeda.com/how-to-fetch-first-image-from-jekyll-post">
<meta property="og:site_name" content="WebJeda Blog">

<meta property="og:description" content="Featured images in WordPress is something I always wanted for my Jekyll blog as well. I liked how images to show up on the index page automatically. But I had no idea how to fetch images from Jekyll posts. Now my blog index uses this method through which the images are grabbed automatically from Jekyll posts.">

<!-- Twitter Cards -->
<meta name="twitter:title" content="How to grab first image from Jekyll post?">



<meta name="twitter:description" content="Featured images in WordPress is something I always wanted for my Jekyll blog as well. I liked how images to show up on the index page automatically. But I had no idea how to fetch images from Jekyll posts. Now my blog index uses this method through which the images are grabbed automatically from Jekyll posts.">

<meta name="twitter:site" content="@webjeda" />
<meta name="twitter:creator" content="@sharathdt">
<meta name="twitter:card" content="summary">

<!--Apple touch icons-->
<link rel="apple-touch-icon" href="/img/apple-touch-icon-iphone-60x60.png">
<link rel="apple-touch-icon" sizes="60x60" href="/img/apple-touch-icon-ipad-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/img/apple-touch-icon-iphone-retina-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/img/apple-touch-icon-ipad-retina-152x152.png">

<!-- CSS & fonts -->
<link rel="stylesheet" href="/css/main.css">
<!-- RSS -->
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="ATOM Feed" />
<!-- Favicon -->
<link rel="icon" href="/img/favicon.ico">
<!-- Language Tag -->
<link rel="alternate" href="http://blog.webjeda.com" hreflang="en-us" />
<!-- Bing Auth-->
<meta name="msvalidate.01" content="9A4C187133260C06C0F9C821178FB3A0" />

</head>


<body>

<div id="wrap">
<!-- Navigation -->
<nav itemscope itemtype="http://schema.org/SiteNavigationElement" id="nav">
<div id="nav-list">

<a itemprop="url" href="/"><span itemprop="name">Home</span></a>

<!-- Nav pages -->
<a itemprop="url" href="/archive/" title="Archive"><span itemprop="name">Archive</span></a>
<a itemprop="url" href="/about/" title="About"><span itemprop="name">About</span></a>
<a itemprop="url" href="/tags/" title="Tags"><span itemprop="name">Tags</span></a>
<!-- Nav links -->
<a itemprop="url" target="_blank" href="http://price.webjeda.com"><span itemprop="name">Pricing</span></a>
<a itemprop="url" target="_blank" href="http://blog.webjeda.com/contact/"><span itemprop="name">Contact</span></a>
<a itemprop="url" target="_blank" rel="dofollow" href="http://blog.webjeda.com/sitemap.xml"><span itemprop="name">Sitemap</span></a>



</div>
<!-- Nav footer -->
<footer class="navfooter">
<span>version 1.1.0</span>

</footer>
</nav>

<!-- Icon menu -->
<a href="#" id="nav-menu">
<div id="menu"></div>
</a>

<!-- Header -->
<header id="header">
<a href="/">
<img src="data:image/png;base64,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" alt="webJeda Logo">
<h1 itemscope="" itemprop="copyrightHolder" >webjeda</h1>
</a>
<hr id="line">
</header>


<!-- Main content -->
<div id="container">
<main>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<article itemscope itemtype="http://schema.org/TechArticle" id="post-page" >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- text-resp-top -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4146856286076977"
data-ad-slot="5075211846"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div><br></div>
<a href=""><h2 itemprop="headline">How to grab first image from Jekyll post?</h2></a>
<div class="post-tags">
Tags:
<a class="" href="/tags/#Jekyll">Jekyll</a>
</div>
<time itemprop="datePublished" datetime="2016-01-30T00:00:00+00:00" class="by-line" >30 Jan 2016</time>
<div itemprop="articleBody" class="content" >
<p><img alt="fetch images from Jekyll post" title="grab images from Jekyll post" itemprop="thumbnailUrl" src="/images/how-to-fetch-images-from-jekyll-post.jpg" /></p>

<p>If you observe the screenshot below, I have used a card-style container to fit in everything. It looks better with proper shadow. Now my idex page grabs the first image from my post and shows it in the list along with its title. The best part is that, the images are grabbed automatically from every post of my Jekyll blog.</p>

<p><img src="/images/how-to-grab-image-from-jekyll-post.jpg" alt="How to fetch image from jekyll" /></p>

<h2 id="why-fetch-image-from-jekyll-post">Why fetch image from Jekyll post?</h2>
<p>I always wanted to have a homepage with images representing certain post. Just like WordPress blog page. This seemed almost impossible in Jekyll. But I had hope.</p>

<p>Finally I stumbled across a <a href="http://stackoverflow.com/questions/25463865/in-jekyll-how-do-i-grab-a-posts-first-image" rel="nofollow" target="_blank">stackoverflow answer</a> that helped me achieve this. Now my post index includes tiny images fetched from particular blog post. So here is how I made this possible.</p>

<h2 id="how-to-grab-the-first-image">How to grab the first image?</h2>

<p>Here is the exact code mentioned in the answer. This will just give you a list of all the first images from all your posts. Make sure you do not have any other embedded video or flash(which has <code class="highlighter-rouge">src</code> attribute) file before your first image. This might result in wrong behaviour of the code. It may grab the video or some other file instead of the image.</p>

<p>What I suggest is to have an image in the very beginning of the post like I have in my posts or at least after a paragraph. Make sure it is not too wide or way too tall. I keep most of my featured images in <strong>800x500</strong> ratio.</p>

<p>Copy this code to your index page but keep a backup of your index file if the changes you make doesn’t workout. Make edits on this code however you want to and get a list of posts along with <strong>post title</strong>, <strong>published date</strong>, <strong>post image</strong> and <strong>post author</strong>(if you have different authors writing for you). Present them however you feel like.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul&gt;</span>
{% for post in site.posts %}
<span class="nt">&lt;li&gt;</span>
{% assign foundImage = 0 %}
{% assign images = post.content | split:"<span class="nt">&lt;img</span> <span class="err">"</span> <span class="err">%}</span>
<span class="err">{%</span> <span class="na">for</span> <span class="na">image</span> <span class="na">in</span> <span class="na">images</span> <span class="err">%}</span>
<span class="err">{%</span> <span class="na">if</span> <span class="na">image</span> <span class="na">contains</span> <span class="err">'</span><span class="na">src</span><span class="err">'</span> <span class="err">%}</span>

<span class="err">{%</span> <span class="na">if</span> <span class="na">foundImage =</span><span class="s">=</span> <span class="na">0</span> <span class="err">%}</span>
<span class="err">{%</span> <span class="na">assign</span> <span class="na">html =</span><span class="err"> </span><span class="s">image</span> <span class="err">|</span> <span class="na">split:</span><span class="err">"</span><span class="nt">/&gt;</span>" | first %}
<span class="nt">&lt;img</span> <span class="err">{{</span> <span class="na">html</span> <span class="err">}}</span> <span class="nt">/&gt;</span>
{% assign foundImage = 1 %}
{% endif %}
{% endif %}
{% endfor %}

<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"{{ post.url }}"</span><span class="nt">&gt;</span>{{ post.title }}<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
{% endfor %}
<span class="nt">&lt;/ul&gt;</span></code></pre></figure>

<p>I have made changes to the above code to get a nice index of posts with title, date, image and description. Here is the raw code that I have used.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">"posts"</span><span class="nt">&gt;</span>
{% for post in paginator.posts %}
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"{{ post.url }}"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li&gt;</span>
<span class="nt">&lt;div&gt;</span>
{% assign foundImage = 0 %}
{% assign images = post.content | split:"<span class="nt">&lt;img</span> <span class="err">"</span> <span class="err">%}</span>
<span class="err">{%</span> <span class="na">for</span> <span class="na">image</span> <span class="na">in</span> <span class="na">images</span> <span class="err">%}</span>
<span class="err">{%</span> <span class="na">if</span> <span class="na">image</span> <span class="na">contains</span> <span class="err">'</span><span class="na">src</span><span class="err">'</span> <span class="err">%}</span>
<span class="err">{%</span> <span class="na">if</span> <span class="na">foundImage =</span><span class="s">=</span> <span class="na">0</span> <span class="err">%}</span>
<span class="err">{%</span> <span class="na">assign</span> <span class="na">html =</span><span class="err"> </span><span class="s">image</span> <span class="err">|</span> <span class="na">split:</span><span class="err">"</span><span class="nt">/&gt;</span>" | first %}
<span class="nt">&lt;time&gt;</span>{{ post.date | date:"%d %b %Y" }}<span class="nt">&lt;/time&gt;</span>
<span class="nt">&lt;h3&gt;</span>{{ post.title }}<span class="nt">&lt;/h3&gt;</span>
<span class="nt">&lt;hr&gt;</span>
<span class="nt">&lt;div&gt;&lt;img</span> <span class="na">width=</span><span class="s">"250"</span> <span class="err">{{</span> <span class="na">html</span> <span class="err">}}</span> <span class="nt">/&gt;</span>{{ post.desc }}<span class="nt">&lt;/div&gt;</span>
{% assign foundImage = 1 %}
{% endif %}
{% endfor %}
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/a&gt;</span>
{% endif %}
{% endfor %}
<span class="nt">&lt;/ul&gt;</span></code></pre></figure>

<p>You may have to style it the way you want. I’m not providing the styling details but I hope you can figure that out. You can use w3-css for card layout. It is also available from Bootstrap and Polymer. You can make your own raised box style by fiddling with box-shadow a little bit.</p>

<h2 id="love-for-jekyll-no-offence-wordpress">Love for Jekyll (no offence WordPress)</h2>
<p>This feature gave me a hope that things are possible with Jekyll. I see people migrating from Jekyll to WordPress for certain features. For instance <a href="https://codingtips.kanishkkunal.in/jekyll-to-wordpress/" rel="nofollow" target="_blank">kanishkkunal</a> who writes real good articles on Jekyll moved from Jekyll to WordPress. He has his reasons. But some writers(including myself) find Jekyll to be easier and comfortable than WordPress, for example Vito Botta. He writes his frustrations in this <a href="http://vitobotta.com/migrating-from-wordpress-to-jekyll-part-one-why-i-gave-up-on-wordpress/" rel="nofollow" target="_blank">article</a> while using WorPress to write posts. I found all the points he made to be true. WordPress post writing interface sucks real bad. There should have been a local editing option.</p>

<p>Writing a post in WordPress itself is a mess. I like to use a text editor like Brackets or Sublime to write my posts. I can always write in an editor and copy paste it to the WordPress editor page but it is not practical. On the bright side, Jekyll supports Markdown. I love it. It’s easy and editor friendly. So I think I’m sticking with Jekyll for a long time. But again it depends on one’s priorities. There are not many plugins available for Jekyll.</p>

<p>If you have any feature that you think is only available in WordPress and cannot be implemented in Jekyll, please leave a comment. May be there is a solution that you are not aware of.</p>

<p>PS: Let me know if you have successfully implemented fetching images from Jekyll posts on your blog index.</p>

<p>Thanks for reading!</p>

</div>
<div class="fb-like" data-href="https://www.facebook.com/webjeda/" data-width="300" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>
<div id="fb-root"></div>
<script defer>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=549480635219583";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="share-box-container">
<h3>Share this:</h3>
<div id="share-box">
<a href="https://www.facebook.com/sharer/sharer.php?u=http://blog.webjeda.com/how-to-fetch-first-image-from-jekyll-post" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" ><i class="fa fa-facebook-square fa share-button"> facebook</i></a>
<a href="https://twitter.com/home?status=http://blog.webjeda.com/how-to-fetch-first-image-from-jekyll-post" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><i class="fa fa-twitter-square fa share-button"> twitter</i></a>
<a href="https://plus.google.com/share?url=http://blog.webjeda.com/how-to-fetch-first-image-from-jekyll-post" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" ><i class="fa fa-google-plus-square fa share-button"> google</i></a>
<a href="http://www.reddit.com/submit?url=http://blog.webjeda.com/how-to-fetch-first-image-from-jekyll-post" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=900,height=500,toolbar=1,resizable=0'); return false;" ><i class="fa fa-reddit-square fa share-button"> reddit</i></a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=http://blog.webjeda.com/how-to-fetch-first-image-from-jekyll-post&title=How to grab first image from Jekyll post?&summary=Featured images in WordPress is something I always wanted for my Jekyll blog as well. I liked how images to show up on the index page automatically. But I had no idea how to fetch images from Jekyll posts. Now my blog index uses this method through which the images are grabbed automatically from Jekyll posts.&source=webjeda" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" ><i class="fa fa-linkedin-square fa share-button"> linkedin</i></a> <a href="/cdn-cgi/l/email-protection#714e0204131b1412054c391e0651051e511603101351171803020551181c1016145117031e1c513b141a081d1d51011e02054e57101c014a131e15084c321914121aX out this site http://blog.webjeda.com/how-to-fetch-first-image-from-jekyll-post"><i class="fa fa-envelope-square fa share-button"> email</i></a>
</div>
</div>
<style>
.share-button {
margin: 0px;
border: 1px solid #D3D6D2;
color: rgba(43, 177, 243, 0.77);
padding: 2px 5px 2px 5px;
}

i:hover {
color: #26A65B;
box-shadow: 0px 2px 4px 0px #e6e6e6, 0 2px 10px 0 rgba(0,0,0,0.12);
transition: .3s ease-out;
}

</style>
<div class="yb">
For video demonstrations visit &nbsp;&nbsp;<a target="_blank" href="https://www.youtube.com/playlist?list=PLm_Qt4aKpfKijgP0rDH7FSJOlS9IBGbT1" class="arrow youtube">YouTube</a>
</div>
<div class="w3-card-2">
<div id="author-content">
<h3>Author</h3>
<hr>
<div itemprop="author" id="name-author"><strong>Sharath Kumar</strong><br /></div>
<div id="im-ab"><img alt="sharathdt" itemprop="image" id="image-author" src="data:image/jpeg;base64,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">
<div id="about-author">Sharath is a full-time chess coach, part-time web designer and a hobby blogger. He posts his Web Development blogs in <a href="http://blog.webjeda.com" >Webjeda Blog</a></p></div>
</div>
<div id="social-author">
<a href="https://www.facebook.com/sharu725" ><i class="fa fa-facebook-square fa"></i></a>
<a href="https://twitter.com/sharathdt" ><i class="fa fa-twitter-square fa"></i></a>
<a href="https://github.com/sharu725/" ><i class="fa fa-github-square fa"></i></a>
<a href="/cdn-cgi/l/email-protection#90f9fef6ffbdd1c4bdf4e8f1e2e4f9e3e4bef3fffd" ><i class="fa fa-envelope-square fa"></i></a>
</div>
</div>
</div>
<div class="related">
<h2>Related Posts</h2>
<ul class="related-posts">
<a href="/a-laymans-guide-to-jekyll"><li class="realted-li">
<h3>A layman's guide to Jekyll&nbsp;<small>26 Jan 2016</small></h3>
</li></a>
<a href="/an-easy-way-to-edit-posts-in-jekyll"><li class="realted-li">
<h3>How to add or edit posts in Jekyll&nbsp;<small>25 Jan 2016</small></h3>
</li></a>
<a href="/adsense-on-jekyll-and-adsense-on-subdomain"><li class="realted-li">
<h3>Adsense on subdomain and adsense on Jekyll&nbsp;<small>25 Jan 2016</small></h3>
</li></a>
</ul>
</div>
</article>
<div id="disqus_thread"></div>
<script defer>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');

s.src = '//webjeda.disqus.com/embed.js';

s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
<script id="dsq-count-scr" src="//webjeda.disqus.com/count.js" defer></script>


</main>
<!-- Ads -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- bottom-ad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4146856286076977"
data-ad-slot="8755205041"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br>
<!-- Pagination links -->

</div>
<!-- Footer -->
<footer itemscope itemtype="http://schema.org/WPFooter">
<div id="footwrap">
<p class="left">&nbsp;Copyrights© <span itemscope="" itemprop="copyrightYear">2016</span></p>
<a target="_blank" href="http://eepurl.com/bMx0pz"><p class="right arrow">Subscribe</p></a>
<p class="centered" itemprop="copyrightHolder"><a id="foot" target="_blank" href="http://webjeda.com"><img alt="Built by WebJeda" id="footimg" src="/img/built-by-webjeda.svg"></a></p>
</div>
</footer>


</div>
<!-- Script -->
<script async src="/js/main.js"></script>

<script async>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-71358787-1', 'auto');
ga('send', 'pageview');

</script>
<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l=document.getElementsByTagName("a"),t=document.createElement("textarea");for(i=0;l.length-i;i++){try{a=l[i].getAttribute("href");if(a&&a.indexOf("/cdn-cgi/l/email-protection") > -1 && (a.length > 28)){s='';j=27+ 1 + a.indexOf("/cdn-cgi/l/email-protection");if (a.length > j) {r=parseInt(a.substr(j,2),16);for(j+=2;a.length>j&&a.substr(j,1)!='X';j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}j+=1;s+=a.substr(j,a.length-j);}t.innerHTML=s.replace(/</g,"&lt;").replace(/>/g,"&gt;");l[i].setAttribute("href","mailto:"+t.value);}}catch(e){}}}catch(e){}})();
/* ]]> */
</script>
</body>
</html>