33 lines
1.2 KiB
HTML
33 lines
1.2 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<div class="uk-container">
|
|
<div class="grid-container masonry-grid">
|
|
{% for post in posts %}
|
|
<div class="blog-card uk-card uk-card-default">
|
|
<div class="uk-card-media-top">
|
|
<img src="{{ post.thumbnail_img }}" alt="{{ post.title }}">
|
|
</div>
|
|
<div class="uk-card-body">
|
|
<h3 class="uk-card-title">{{ post.title }}</h3>
|
|
<!-- Truncate the contents to 100 characters, removing any HTML tags -->
|
|
<p>{{ post.contents | striptags | truncate(100) }}</p>
|
|
<a href="#" class="uk-button uk-button-text">Read more</a>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('.masonry-grid').masonry({
|
|
// options...
|
|
itemSelector: '.blog-card',
|
|
columnWidth: '.blog-card',
|
|
percentPosition: true
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|