---
layout: navbar-v2
title: Photos
---

<div id="profile-photos" class="navbar-v2-wrapper">
  <div class="container is-custom">
    <!-- Profile page main wrapper -->
    <div id="profile-photos" class="view-wrap is-headless">
      <div class="columns is-multiline no-margin">
        <!-- Left side column -->
        <div class="column is-paddingless">
          <!-- Timeline Header -->
          <!-- html/partials/pages/profile/timeline/timeline-header.html -->
          {{> timeline-header}}
        </div>
      </div>

      <div class="columns">
        <div class="column">
          <div class="box-heading">
            <div
              class="dropdown photos-dropdown is-spaced is-neutral dropdown-trigger"
            >
              <div>
                <div class="button">
                  <span>All Pictures</span>
                  <i data-feather="chevron-down"></i>
                </div>
              </div>
              <div class="dropdown-menu" role="menu">
                <div class="dropdown-content">
                  <a href="#" class="dropdown-item">
                    <div class="media">
                      <i data-feather="tag"></i>
                      <div class="media-content">
                        <h3>Tagged Photos</h3>
                        <small>Photos whith this user tagged.</small>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item">
                    <div class="media">
                      <i data-feather="clock"></i>
                      <div class="media-content">
                        <h3>Recent</h3>
                        <small>View most recent photos.</small>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item">
                    <div class="media">
                      <i data-feather="heart"></i>
                      <div class="media-content">
                        <h3>Popular</h3>
                        <small>View popular photos.</small>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item">
                    <div class="media">
                      <i data-feather="book-open"></i>
                      <div class="media-content">
                        <h3>Albums</h3>
                        <small>See all albums.</small>
                      </div>
                    </div>
                  </a>
                  <hr class="dropdown-divider" />
                  <a
                    class="dropdown-item modal-trigger"
                    data-modal="albums-modal"
                  >
                    <div class="media">
                      <i data-feather="plus"></i>
                      <div class="media-content">
                        <h3>Add Photos</h3>
                        <small>Upload pictures.</small>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
            </div>

            <div class="button-wrap">
              <button type="button" class="button is-active">Recent</button>
              <button type="button" class="button">Albums</button>
            </div>
          </div>

          <div class="image-grid-wrap">
            <div class="image-grid">
              <!--Grid Row-->
              <div class="image-row">
                <!--Photo-->
                <div
                  class="flex-1 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/3.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/jenna.png"
                      alt=""
                    />
                    <div class="name">Jenna Davis</div>
                  </div>
                  <div class="photo-time">Aug 23, 2019</div>
                  <a class="photo-like">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
                <!--Photo-->
                <div
                  class="flex-1 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/8.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/stella.jpg"
                      alt=""
                    />
                    <div class="name">Stella Bergmann</div>
                  </div>
                  <div class="photo-time">Aug 19, 2019</div>
                  <a class="photo-like is-liked">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
                <!--Photo-->
                <div
                  class="flex-2 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/4.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/dan.jpg"
                      alt=""
                    />
                    <div class="name">Dan Walker</div>
                  </div>
                  <div class="photo-time">Aug 17, 2019</div>
                  <a class="photo-like is-liked">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
              </div>

              <!--Grid Row-->
              <div class="image-row">
                <!--Photo-->
                <div
                  class="flex-1 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/17.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/jenna.png"
                      alt=""
                    />
                    <div class="name">Jenna Davis</div>
                  </div>
                  <div class="photo-time">Aug 15, 2019</div>
                  <a class="photo-like">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
                <!--Photo-->
                <div
                  class="flex-2 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/14.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/jenna.png"
                      alt=""
                    />
                    <div class="name">Jenna Davis</div>
                  </div>
                  <div class="photo-time">Aug 12, 2019</div>
                  <a class="photo-like">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
              </div>

              <!--Grid Row-->
              <div class="image-row">
                <!--Photo-->
                <div
                  class="flex-2 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/24.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/jenna.png"
                      alt=""
                    />
                    <div class="name">Jenna Davis</div>
                  </div>
                  <div class="photo-time">Aug 12, 2019</div>
                  <a class="photo-like">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
                <!--Photo-->
                <div
                  class="flex-3 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/20.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/jenna.png"
                      alt=""
                    />
                    <div class="name">Jenna Davis</div>
                  </div>
                  <div class="photo-time">Aug 11, 2019</div>
                  <a class="photo-like">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
                <!--Photo-->
                <div
                  class="flex-2 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/23.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/jenna.png"
                      alt=""
                    />
                    <div class="name">Jenna Davis</div>
                  </div>
                  <div class="photo-time">Aug 09, 2019</div>
                  <a class="photo-like">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
              </div>

              <!--Grid Row-->
              <div class="image-row">
                <div
                  class="flex-1 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/21.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/milly.jpg"
                      alt=""
                    />
                    <div class="name">Milly Augustine</div>
                  </div>
                  <div class="photo-time">Aug 06, 2019</div>
                  <a class="photo-like is-liked">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
                <div
                  class="flex-1 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/28.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/stella.jpg"
                      alt=""
                    />
                    <div class="name">Stella Bergmann</div>
                  </div>
                  <div class="photo-time">Aug 04, 2019</div>
                  <a class="photo-like is-liked">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
                <div
                  class="flex-1 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/35.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/elise.jpg"
                      alt=""
                    />
                    <div class="name">Elise Walker</div>
                  </div>
                  <div class="photo-time">Aug 02, 2019</div>
                  <a class="photo-like is-liked">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
              </div>

              <!--Grid Row-->
              <div class="image-row">
                <!--Photo-->
                <div
                  class="flex-2 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/37.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/jenna.png"
                      alt=""
                    />
                    <div class="name">Jenna Davis</div>
                  </div>
                  <div class="photo-time">Jul 29, 2019</div>
                  <a class="photo-like">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
                <!--Photo-->
                <div
                  class="flex-1 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/32.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/jenna.png"
                      alt=""
                    />
                    <div class="name">Jenna Davis</div>
                  </div>
                  <div class="photo-time">Jul 26, 2019</div>
                  <a class="photo-like">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
              </div>

              <!--Grid Row-->
              <div class="image-row">
                <!--Photo-->
                <div
                  class="flex-2 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/18.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/jenna.png"
                      alt=""
                    />
                    <div class="name">Jenna Davis</div>
                  </div>
                  <div class="photo-time">Jul 24, 2019</div>
                  <a class="photo-like">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
                <!--Photo-->
                <div
                  class="flex-3 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/19.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/jenna.png"
                      alt=""
                    />
                    <div class="name">Jenna Davis</div>
                  </div>
                  <div class="photo-time">Jul 23, 2019</div>
                  <a class="photo-like">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
                <!--Photo-->
                <div
                  class="flex-2 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/38.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/jenna.png"
                      alt=""
                    />
                    <div class="name">Jenna Davis</div>
                  </div>
                  <div class="photo-time">Jul 21, 2019</div>
                  <a class="photo-like">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
              </div>

              <!--Grid Row-->
              <div class="image-row">
                <!--Photo-->
                <div
                  class="flex-2 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/22.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/dan.jpg"
                      alt=""
                    />
                    <div class="name">Dan Walker</div>
                  </div>
                  <div class="photo-time">Jul 19, 2019</div>
                  <a class="photo-like is-liked">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
                <!--Photo-->
                <div
                  class="flex-1 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/27.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/jenna.png"
                      alt=""
                    />
                    <div class="name">Jenna Davis</div>
                  </div>
                  <div class="photo-time">Jul 19, 2019</div>
                  <a class="photo-like">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
                <!--Photo-->
                <div
                  class="flex-1 has-background-image"
                  data-background="https://via.placeholder.com/1600x900"
                  data-demo-background="assets/img/demo/unsplash/34.jpg"
                >
                  <div class="overlay"></div>
                  <div class="image-owner">
                    <img
                      class="avatar"
                      src="https://via.placeholder.com/150x150"
                      data-demo-src="assets/img/avatars/stella.jpg"
                      alt=""
                    />
                    <div class="name">Stella Bergmann</div>
                  </div>
                  <div class="photo-time">Jul 17, 2019</div>
                  <a class="photo-like is-liked">
                    <div class="inner">
                      <div class="like-overlay"></div>
                      <i data-feather="heart"></i>
                    </div>
                  </a>
                </div>
              </div>
            </div>

            <!-- Load more photos -->
            <div class="load-more-wrap has-text-centered">
              <a href="#" class="load-more-button">Load More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Change cover image modal -->
<!--html/partials/pages/profile/timeline/modals/change-cover-modal.html-->
{{> change-cover-modal}}

<!-- Change profile pic modal -->
<!--html/partials/pages/profile/timeline/modals/change-profile-pic-modal.html-->
{{> change-profile-pic-modal}}

<!-- User photos and albums -->
<!--html/partials/pages/profile/timeline/modals/user-photos-modal.html-->
{{> user-photos-modal}}

<!-- Profile picture crop modal -->
<!--html/partials/pages/profile/timeline/modals/upload-crop-profile-modal.html-->
{{> upload-crop-profile-modal}}

<!-- Cover image crop modal -->
<!--html/partials/pages/profile/timeline/modals/upload-crop-cover-modal.html-->
{{> upload-crop-cover-modal}}

<!-- Custom photo lightbox -->
<!--html/partials/pages/profile/timeline/modals/custom-profile-lightbox.html-->
{{> custom-profile-lightbox}}