Related Articles Image {% include 'components/related/related-articles~image' %}
#
HTML
<div class="related-articles">
    <div class="inner">
        <h2 class="related-articles__title">
            More like this
        </h2>
        <div class="large-row">
            <div class="large-col-4">
                <article class="related-article">
                    <a href="#">
                        <img class="related-article__image" src="http://placehold.it/400x225">
                    </a>
                    <h1 class="related-article__title">
                        Title of article
                    </h1>
                    <div class="related-article__byline byline">by <span class="author">Author Name</span></div>
                    <p class="related-article__description">Short text</p>
                    <a href="#">Continue Reading</a>

                </article>
            </div>
            <div class="large-col-4">
                <article class="related-article">
                    <a href="#">
                        <img class="related-article__image" src="http://placehold.it/400x225">
                    </a>
                    <h1 class="related-article__title">
                        Title of article
                    </h1>
                    <div class="related-article__byline byline">by <span class="author">Author Name</span></div>
                    <p class="related-article__description">Summary text here, which will be the first 20 - 30 words of this post ie you know something...</p>
                    <a href="#">Continue Reading</a>

                </article>
            </div>
            <div class="large-col-4">
                <article class="related-article">
                    <a href="#">
                        <img class="related-article__image" src="http://placehold.it/400x225">
                    </a>
                    <h1 class="related-article__title">
                        Title of article
                    </h1>
                    <div class="related-article__byline byline">by <span class="author">Author Name</span></div>
                    <p class="related-article__description">Short text</p>
                    <a href="#">Continue Reading</a>

                </article>
            </div>
        </div>
    </div>
</div>
Twig
<div class="related-articles">
	<div class="inner">
		<h2 class="related-articles__title">{{ related_title }}</h2>
		<div class="large-row">

			{% for related_article in related_articles %}

				<div class="large-col-4">
					<article class="related-article">
						{% if related_article.image %}
							<a href="{{ related_article.url }}">
								<img class="related-article__image" src="{{ related_article.image }}">
							</a>
						{% endif %}
						<h1 class="related-article__title">{{ related_article.title }}</h1>
						<div class="related-article__byline byline">by <span class="author">{{ related_article.author }}</span></div>
						<p class="related-article__description">{{ related_article.summary }}</p>
						<a href="{{ related_article.url }}">{{ related_article.link_text }}</a>
					</article>
				</div>

			{% endfor %}
		</div>
	</div>
</div>
{
    "related_title": "More like this",
    "related_articles": {
        "0": {
            "title": "Title of article",
            "author": "Author Name",
            "summary": "Short text",
            "url": "#",
            "link_text": "Continue Reading",
            "image": "http:\/\/placehold.it\/400x225"
        },
        "1": {
            "title": "Title of article",
            "author": "Author Name",
            "summary": "Summary text here, which will be the first 20 - 30 words of this post ie you know something...",
            "url": "#",
            "link_text": "Continue Reading",
            "image": "http:\/\/placehold.it\/400x225"
        },
        "2": {
            "title": "Title of article",
            "author": "Author Name",
            "summary": "Short text",
            "url": "#",
            "link_text": "Continue Reading",
            "image": "http:\/\/placehold.it\/400x225"
        }
    }
}