feed-card.html

{% assign person = site.data.people[0] %}
{% assign id = 0 | random_id %}
<div class="card">
	<div class="card-header d-flex">
		<a href="#">
			{% include ui/avatar.html person=person size="md" %}
		</a>
		<div class="mx-3">
			<a href="#">{{ person.full_name }}</a>
			<div class="text-muted text-sm">11 days ago</div>
		</div>
	</div>
	<div class="card-body">
		{% if include.text %}
		<div class="card-text mb-3">
			<p>{{ include.text }}</p>
		</div>
		{% endif %}

		{% if include.feed %}
		<div class="row row-xs">
			{% if include.feed == 1 %}
			<div class="col-6 mb-2">
				<div class="media media-2x1 rounded">
					<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[0].file }})"></a>
				</div>
			</div>
			<div class="col-6 mb-2">
				<div class="media media-2x1 rounded">
					<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[1].file }})"></a>
				</div>
			</div>
			<div class="col-4">
				<div class="media media-4x3 rounded">
					<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[2].file }})"></a>
				</div>
			</div>
			<div class="col-4">
				<div class="media media-4x3 rounded">
					<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[3].file }})"></a>
				</div>
			</div>
			<div class="col-4">
				<div class="media media-4x3 rounded">
					<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[4].file }})"></a>
				</div>
			</div>
			{% elsif include.feed == 2 %}
			<div class="col-12">
				<div class="media media-2x1 rounded">
					<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[5].file }})"></a>
				</div>
			</div>
			{% elsif include.feed == 3 %}
			<div class="col-6 d-flex">
				<div class="media flex-fill rounded">
					<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[6].file }})"></a>
				</div>
			</div>
			<div class="col-6">
				<div class="media media-2x1 mb-2 rounded">
					<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[7].file }})"></a>
				</div>
				<div class="row row-xs">
					<div class="col-6">
						<div class="media rounded">
							<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[8].file }})"></a>
						</div>
					</div>
					<div class="col-6">
						<div class="media rounded">
							<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[9].file }})"></a>
							<a class="media-overlay active bg-dark-overlay"><small class="text-white mx-auto">9+</small></a>
						</div>
					</div>
				</div>
			</div>
			{% elsif include.feed == 4 %}
			<div class="col-6">
				<div class="media media-2x1 rounded">
					<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[10].file }})"></a>
				</div>
			</div>
			<div class="col-6">
				<div class="media media-2x1 rounded">
					<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[11].file }})"></a>
				</div>
			</div>
			{% elsif include.feed == 5 %}
			<div class="col-4">
				<div class="media media-4x3 rounded">
					<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[12].file }})"></a>
				</div>
			</div>
			<div class="col-4">
				<div class="media media-4x3 rounded">
					<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[13].file }})"></a>
				</div>
			</div>
			<div class="col-4">
				<div class="media media-4x3 rounded">
					<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[14].file }})"></a>
				</div>
			</div>
			{% elsif include.feed == 6 %}
			<div class="col-6 d-flex">
				<div class="media flex-fill rounded">
					<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[15].file }});"></a>
				</div>
			</div>
			<div class="col-6">
				<div class="row row-xs">
					<div class="col-6">
						<div class="media mb-2 rounded">
							<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[16].file }})"></a>
						</div>
					</div>
					<div class="col-6">
						<div class="media mb-2 rounded">
							<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[17].file }})"></a>
						</div>
					</div>
					<div class="col-6">
						<div class="media rounded">
							<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[18].file }})"></a>
						</div>
					</div>
					<div class="col-6">
						<div class="media rounded">
							<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[19].file }})"></a>
						</div>
					</div>
				</div>
			</div>

			{% elsif include.feed == 7 %}
			<div class="col-3 d-flex">
				<div class="media flex-fill rounded">
					<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[20].file }})"></a>
				</div>
			</div>
			<div class="col-6">
				<div class="row row-xs">
					<div class="col-6">
						<div class="media mb-2 rounded">
							<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[21].file }})"></a>
						</div>
					</div>
					<div class="col-6">
						<div class="media mb-2 rounded">
							<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[22].file }})"></a>
						</div>
					</div>
					<div class="col-6">
						<div class="media rounded">
							<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[23].file }})"></a>
						</div>
					</div>
					<div class="col-6">
						<div class="media rounded">
							<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[24].file }})"></a>
						</div>
					</div>
				</div>
			</div>
			<div class="col-3 d-flex">
				<div class="media flex-fill rounded">
					<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[25].file }})"></a>
				</div>
			</div>
			{% endif %}
		</div>
		{% endif %}

	</div>
	<div class="card-footer">
		<div class="toolbar toolbar-mx">
			<a href="#" class="text-muted">
				{% include ui/icon.html icon="thumbs-up" %} 321 Likes
			</a>
			<a href="#feed-form-{{ id }}" class="text-muted" data-toggle="collapse">
				{% include ui/icon.html icon="message-square" %} 56 Comments
			</a>
			<a href="#" class="text-muted">
				{% include ui/icon.html icon="share-2" %}
				Share
			</a>
		</div>
	</div>
	<div class="card-footer pt-3 collapse" id="feed-form-{{ id }}">
		<form>
			<textarea class="form-control" rows="3"></textarea>
			<div class="d-flex pt-2">
				<div class="toolbar mt-1">
					<a href="#" class="text-muted">{% include ui/icon.html icon="image" %}</a>
					<a href="#" class="text-muted">{% include ui/icon.html icon="video" %}</a>
					<a href="#" class="text-muted">{% include ui/icon.html icon="map-pin" %}</a>
					<a href="#" class="text-muted">{% include ui/icon.html icon="paperclip" %}</a>
				</div>
				<button class="btn btn-sm btn-primary ml-auto">Post</button>
			</div>
		</form>
	</div>
</div>