tabler-ui/src/gallery.html

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

---
layout: default
menu: gallery
---


<div class="container">
	<div class="page-header">
		<h1 class="page-title">
			Gallery
		</h1>
		<div class="page-subtitle">1 - 12 of 1713 photos</div>
		<div class="page-options d-flex">
			<select class="form-control custom-select w-auto">
				<option value="asc">Newest</option>
				<option value="desc">Oldest</option>
			</select>
			<div class="input-icon ml-2">
				<span class="input-icon-addon">
					<i class="fe fe-search"></i>
				</span>
				<input type="text" class="form-control w-10" placeholder="Search photo">
			</div>
		</div>
	</div>
	
	<div class="row row-cards">

		{% for photo in site.data.photos limit: 12 offset: 20 %}
		<div class="col-sm-6 col-lg-4">
			{% assign user = site.data.users[forloop.index] %}
			<div class="card p-3">
				<a href="javascript:void(0)" class="mb-3">
					<img src="{{ site.base }}/{{ photo.small }}" alt="Photo by {{ user.name }} {{ user.surname }}" class="rounded">
				</a>
				<div class="d-flex align-items-center px-2">
					<div class="avatar avatar-md mr-3" style="background-image: url({{ user.photo }})"></div>
					<div>
						<div>{{ user.name }} {{ user.surname }}</div>
						<small class="d-block text-muted">{{ forloop.index | random_number: 3, 20 }} days ago</small>
					</div>
					<div class="ml-auto text-muted">
						<a href="javascript:void(0)" class="icon"><i class="fe fe-eye mr-1"></i> {{ forloop.index | random_number | plus: 70 }}</a>
						<a href="javascript:void(0)" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i> {{ forloop.index | random_number }}</a>
					</div>
				</div>
			</div>
		</div>
		{% endfor %}


	</div>
	
</div>