---
layout: sidebar-v1
title: Photos
---

<div class="toolbar-v1-fixed-wrap">{{> toolbar-v1}}</div>

<!-- Container -->
<div
  id="pages-photos"
  class="container sidebar-boxed"
  data-open-sidebar
  data-page-title="Photos"
>
  {{> toolbar-v1}}

  <!-- Profile page main wrapper -->
  <div 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/pages/page-profile-header.html -->
        {{> page-profile-header}}
      </div>
    </div>

    <div class="columns has-portrait-padding">
      <div class="column">
        <div class="box-heading">
          <div
            class="dropdown photos-dropdown is-spaced is-accent 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>
                <hr class="dropdown-divider" />
                <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>
              </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/pages/posts/5.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</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/pages/posts/3.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</div>
                </div>
                <div class="photo-time">Aug 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-2 has-background-image"
                data-background="https://via.placeholder.com/1600x900"
                data-demo-background="assets/img/demo/pages/posts/1.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</div>
                </div>
                <div class="photo-time">Aug 17, 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-1 has-background-image"
                data-background="https://via.placeholder.com/1600x900"
                data-demo-background="assets/img/demo/pages/posts/6.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</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/pages/posts/2.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</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/pages/posts/8.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</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/pages/posts/7.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</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/pages/posts/4.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</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/pages/posts/9.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</div>
                </div>
                <div class="photo-time">Aug 06, 2019</div>
                <a class="photo-like">
                  <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/pages/posts/10.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</div>
                </div>
                <div class="photo-time">Aug 04, 2019</div>
                <a class="photo-like">
                  <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/pages/posts/11.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</div>
                </div>
                <div class="photo-time">Aug 02, 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/pages/posts/12.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</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/pages/posts/13.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</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/pages/posts/14.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</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/pages/posts/15.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</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/pages/posts/16.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</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/pages/posts/17.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</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/pages/posts/18.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</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/pages/posts/19.jpg"
              >
                <div class="overlay"></div>
                <div class="image-owner">
                  <img
                    class="avatar"
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
                    alt=""
                  />
                  <div class="name">Fast Pizza</div>
                </div>
                <div class="photo-time">Jul 17, 2019</div>
                <a class="photo-like">
                  <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>

<!-- 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-full.html-->
{{> custom-profile-lightbox-full}}