Создаем портфолио на основе фотографий из Instagram

http://webdesign.tutsplus.com/tutorials/building-an-instagram-based-portfolio-with-bootstrap--cms-22243
  • Перевод
  • Tutorial


Здравствуй, дорогой хабрадруг! В этом уроке мы создадим простой сайт-портфолио, который будет базироваться на фотографиях из вашего аккаунта в Instagram. Дизайн сайта сделал Tomas Laurinavicius, и он получился у него простым, функциональным и просторным. Итак, начнем.

Скачать исходники | Демо


Инструменты


Чтобы облегчить себе жизнь, мы доверимся нескольким полезным инструментам и библиотекам. Перед началом работы нам необходимо подготовить пару инструментов:

Прежде всего вам необходим инструмент Sass, работающий у вас на компьютере. Проще всего использовать приложение Koala, оно кросс-платформенное, бесплатное и, что самое важное, легкое в использовании. Кроме того существуют альтернативные программы: ScoutPrepros и Compass app. Все они предлагают схожий функционал, поэтому выбор на ваш вкус!

Теперь Bootstrap. Мы будем использовать Bootstrap на базовом уровне для управления некоторыми элементами страницы. Необходимо скачать Sass версию, чтобы включить ее в нашу таблицу стилей.

Почти готово! Теперь нужно загрузить Instafeed.js, плагин, который берет фотографии из Instagram. Стоит заметить, что для того чтобы скрипт мог забирать фотографии из Instagram, необходимо предоставить ему client ID, который может быть сгенерирован на страничке для разработчиков.

Ну и наконец, нам необходимо скачать последнюю версию Modernizr, JavaScript-библиотеку, которая узнаёт, что из HTML5 и CSS3 умеет браузер пользователя.

Итак, мы собрали все необходимые инструменты, начинаем конструирование сайта.

Структура сайта


Нам нужно создать несколько файлов и папок для нашего проекта:
  • css/
  • images/
  • js/
  • index.html

Это наш фундамент. Теперь откройте папку assets, которую вы можете найти в архиве с Bootstrap:



Скопируйте папку fonts в корневую папку проекта. Откройте папку javascripts и скопируйте файл bootstrap.js в папку js. Наконец, откройте папку stylesheets и скопируйте файл bootstrap.scss и папку bootstrap в директорию css. Структура нашего проекта должна выглядеть следующим образом:



Отлично! Теперь скопируйте файлы instafeed.min.js и Modernizr в папку js. Сейчас нам нужно еще кое-что настроить перед тем, как начать строить шаблон.

Настройка Sass


Теперь настало время настроить наш проект для использования Sass. В приложении Koala вся настройка заключается в переносте папок в окно приложения. Думаю, что такой же процесс характерен и для других подобных программ.

Добавление файлов


Откройте проект в программе, которую вы выбрали, чтобы мы смогли добавить необходимые файлы.

Сначала в папке css добавьте файл под названием style.scss. Затем в папке js добавьте файл под названием app.js.

Советую вам обновить приложение, которое вы используете для настройки Sass, чтобы оно «подхватило» новые файлы. Некоторые приложения делают это автоматически, но все же лучше перестраховаться.

Думаю, что с предварительной настройкой мы закончили. Теперь приступим непосредственно к каркасу!

Начинаем строительство



Откройте файл index.html и вставьте следующий код HTML:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <title>Instagram Portfolio</title>
    <link href='http://fonts.googleapis.com/css?family=Lato:400,700|Kaushan+Script|Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/modernizr.js"></script>
</head>
<body>
    <header>

    </header>
    <section class="instagram-wrap">

    </section>
    <footer>

    </footer>
    <section class="footer-bottom">

    </section>

</body>
</html>


Давайте детально рассмотрим наш шаблон.

Итак, секция <head> содержит необходимый тэг viewport для корректной работы media queries. Затем мы назначили тэг <link> для различных Google шрифтов. Далее мы прописали тэги, содержащие style.css и Modernizr.

Секция с тэгом <body> содержит четыре основных элемента, к которым мы применили классы, чтобы понимать, что для чего служит.

 

Добавляем файлы JavaScript


Добавьте следующий код ниже секции footer-bottom:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/instafeed.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>


Стили


Давайте настроим наш файл style.scss.

/*
* Кастомные переменные
*/
$main-font: 'Lato', sans-serif;
$sub-font: 'Montserrat', sans-serif;
$fancy-font: 'Kaushan Script', cursive;
$font-size: 16px;
 
$black: #000;
$white: #FFF;
$grey: #585c65;
$mediumgrey: #9b9b9b;
$lightgrey: #eeeeee;
$blue: #3466a1;
 
$padding: 10px;
$margin: 10px;
 
/*
* Отменяем переменные Bootstrap
*/
$font-family-sans-serif: $main-font;
 
@import 'bootstrap';

Здесь мы настроили шрифты, затем цвета нашего сайта, а также переменные padding и margin.

Больше стилей


Продолжим прописывать необходимые нам стили:

* {
position: relative;
    box-sizing: border-box;
}

body {
    color: $grey;
    font-size: $font-size;
}

header {
    max-height: 600px;
    height: 600px;
    overflow: hidden;
}


Здесь мы используем универсальный селектор *, чтобы придать всем объектам параметр position: relative. Кроме того практично устанавливать параметр box-sizing на border-box, чтобы в дальнейшем мы могли использовать проценты при установке ширины объектов.

Далее мы устанавливаем цвет шрифта и размер по умолчанию, и также выставляем высоту нашей секции <header>.

Придаем форму шапке сайта


Так как дизайн нашей шапки довольно-таки простой, то и писать для него код не составит труда:

<img src="images/mountains.jpg" alt="Mountains">
<div class="name fancy-font">
        Jonathan
</div>
<div class="titles">
    <h1>Hello! <span>I'm Jonathan</span></h1>
    <h2>I love to travel all around the world and design beautiful things</h2>
</div>
<div class="social">
    <a class="facebook" href="#">Facebook</a>
    <a class="twitter" href="#">Twitter</a>
    <a class="instagram" href="#">Instagram</a>
</div>


Этот код пойдет в секцию <header>.

Стили шапки


Начнем с добавления нескольких строчек кода в секцию header, которая находится в нашем файле Sass.

img {
position: fixed;  /* Это придаст нашему сайт эффект глубины */
    top: 0px;
    left: 50%;
    margin-left: -600px;
    width: 1200px;

    @media screen and (min-width: $screen-lg) {
        top: auto;  /* Вмещаем наше изображение в маленькие экраны */
        left: auto;
        margin: 0;
        width: 100%;
    }
}


Вот, что у нас получается!




Продолжим...

.name {
    font-size: 21px;
        position: absolute;
        top: 50px;
        left: 50px;
        color: $white;
    }

    .titles {
        position: absolute;
        bottom: 40%;
        width: 100%;
        text-align: center;

        @media screen and (min-width: $screen-lg) {
            bottom: 50%;
        }
    }

    h1, h2 {
        width: 100%;
        color: $white;
        margin: 0;
    }





Выглядит неплохо! Подредактируем немного заголовки.

h1 {
    text-transform: uppercase;
        font-weight: 700;
        font-size: 36px;
        letter-spacing: 0.06em;
        margin-bottom: $margin;

        span {
            display: block;

            @media screen and (min-width: $screen-md) {
                display: inline;
            }
        }
     }

     h2 {
        font-size: 16px;
        width: 70%;
        margin: 0 auto;

        @media screen and (min-width: $screen-lg) {
            width: 100%;
            margin: 0;
        }
     }





Модный шрифт


Нужно изменить стиль заголовка в левом верхнем углу. Поместите следующий код в конце файла Sass:

.fancy-font {
font-family: $fancy-font;
}


Мы применим наш модный шрифт всем элементом с классом fancy-font.

Социальные иконки


В нашем случае нужно обратить внимание на социальные иконки, которые мы будем строить с помощью спрайтов для отображения на обычных дисплеях и экранах высокого разрешения.

Перейдите на сайт Iconfinder и выберите нужную иконку. Лучше всего выбирать большой размер иконки, например, 256px.

В вашем любимом графическом редакторе создайте файл 152x52px. Поместите в документ иконки и измените их размер до 48x48px. Покрасьте иконки в белый цвет.

Между иконками должно быть расстояние в 2px. Поэтому разместите первую иконку к самому краю и затем отодвиньте ее вниз и вправо на 2px. Таким же образом поместите остальные две иконки. Вот, что у вас должно получиться:




Это наша версия для Retina. Не обращайте внимания на черный фон, я сделал его лишь для того, чтобы вы могли отчетливо видеть иконки.

С помощью функции Photoshop Save for Web сохраните изображение назвав его social-sprite@2x.png в папку с изображениями. Теперь нужно сохранить изображениями с размерами для стандартных дисплеев (не Retina). Это можно сделать прямо в окне Save for Web. Важно, чтобы размер изображения составлял 76px на 52px. Сохраните файл под именем social-sprite.png и также разместите его в папку с изображениями.

Итак, теперь нужно написать код для нашего спрайта. Разместите следующий код в секцию header сразу же после стилей h1 и h2.

.social {
    position: absolute;
        top: 55px;
        right: 50px;
        overflow: hidden;

        a {
            float: left;
            width: 26px;
            height: 26px;
            margin: 0 5px;
            text-indent: -9999px; /* Убираем текст из вида */
            background: url(../images/social-sprite.png) no-repeat;
            opacity: 0.8;

            &:hover {
                opacity: 1.0;
            }

            @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (-min-device-pixel-ratio: 2) {
                background: url(../images/social-sprite@2x.png) no-repeat;
                background-size: 76px 26px;
            }

            &.facebook {
                background-position: 0px 0px;
            }

            &.twitter {
                background-position: -25px 0px;
            }

            &.instagram {
                background-position: -50px 0px;
            }
        }
     }





Теперь давайте займемся основным контентом сайта, то есть Instafeed.js — скрипт, который будет отображать фотографии на нашем сайте.

Лента Instagram


Начнем с добавления некой разметки на странице index.html, поэтому вставьте в нее следующий год внутрь тега <section class="instagram-wrap">

<div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="instagram-content">
                    <h3>Latest Photos</h3>
                    <div class="row photos-wrap">
                    <!-- Целевой div Instafeed -->
                    <div id="instafeed"></div>
                    <!-- Шаблон для отображения фотографий -->
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="photo-box">
                            <div class="image-wrap">
                                <img src="">
                                <div class="likes">309 Likes</div>
                            </div>
                            <div class="description">
                                Fantastic Architecture #architecture #testing
                                <div class="date">September 16, 2014</div>
                            </div>
                        </div>
                    </div>
                        </div>
                </div>
            </div>
        </div>
    </div>


Сетка Bootstrap


Итак, для нашего сайта мы будем использовать классы col-xs-xx, col-sm-xx, col-md-xx, col-lg-xx, чтобы оптимизировать отображение всех элементов на экранах различных разрешений. Сетка Bootstrap состоит из контейнеров (containers), рядов (rows) и колонок (column). Каждый ряд находится внутри контейнера и каждая колонка — внутри ряда. Кроме того, всего должно быть 12 колонок в каждом ряду.

you can learn more about Bootstrap in the free Tuts course Bootstrap 3 for Web Design


Стили для Instagram


Теперь, когда у нас есть каркас, добавим стили:

.instagram-wrap {
background: $lightgrey;
}

.instagram-content {
    h3 {
        text-transform: uppercase;
        letter-spacing: 0.5em;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
        padding: $padding*5 0;
        color: darken($lightgrey, 20%);
    }

}


Этот код нужно размести сразу после блока header в нашем файле Sass.




Этот кусок кода внес основательные изменения. Но нам надо сделать наш сайт еще красивее, поэтому добавьте следующие строчки кода в файл Sass:

.photo-box {
    margin: 0 0 $margin*3 0;

        .image-wrap {
            img {
                width: 100%;
            }

            .likes {
                position: absolute;
                bottom: 5px;
                left: 15px;
                padding: $padding/2;
                background: $black;
                background: rgba($black, 0.4);
                color: $white;
            }
        }
        .description {
            font-family: $sub-font;
            font-size: 12px;
            background: $white;
            color: $mediumgrey;
            letter-spacing: 1px;
            padding: $padding*1.5;
            height: 75px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }


Этот кусочек должен идти сразу за элементом h3, который находится в секции .instagram-content. Посмотрим, что у нас получилось:




Выглядит очень даже неплохо! Теперь нам нужно заменить изображения фотографиями из настоящей ленты Instagram. Сделаем мы это с помощью Instafeed.js.

Используем Instafeed.js


Способ работы плагина делает его простым в использовании. Однако, вам понадобиться создать Client ID на сайте Instagram, чтобы использовать плагин. Сделать это можно на странице для разработчиков.

Как только вы получили клиентский ID, добавьте следующий код в файл app.js:

$(function() {

//Настраиваем instafeed
    var feed = new Instafeed({
        clientId: '97ae5f4c024c4a91804f959f43f2635f',
        target: 'instafeed',
        get: 'tagged',
        tagName: 'photographyportfolio',
        links: true,
        limit: 8,
        sortBy: 'most-recent',
        resolution: 'standard_resolution',
        template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><div class="photo-box"><div class="image-wrap"><a href="{{link}}"><img src="{{image}}"></a><div class="likes">{{likes}} Likes</div></div><div class="description">{{caption}}<div class="date">{{model.date}}</div></div></div></div>'
    });
    feed.run();

});


Итак, давайте обсудим что к чему.

Задаем переменную feed и даем ей значение Instafeed.

Затем прикрепляем к Instafeed различные параметры:

  • clientIdClient ID, который вы получили на сайте Instagram.
  • targetID элемента на странице, на которой будут отображаться изображения.
  • getРежим работы плагина Instafeed. Используя 'tagged', мы говорим Instafeed искать фотографии по хэштегу.
  • tagNameThe name of the tag to search by.
  • linksПри нажатии на изображение ссылка направляет пользователя на Instagram
  • limit - Ограничение полученных изображений. Полезно для создания страниц.
  • sortByКак будет происходит сортировка полученных изображений. Параметр most-recent означает, что изображения будут сортироваться по дате.
  • resolutionРазмер изображений.
  • templateШаблон HTML-обработки изображений на странице.


Когда вы сохраните файл и обновите страницу в браузере, то увидите следующее:




Если вы все сделали правильно, то вы должны увидеть восемь изображений с отображением лайков и описаний.

Приводим в порядок


Теперь нам надо привести наш код HTML в порядок, так как у нас до сих пор стоит первоначальный шаблон. Вернитесь к файлу index.htmlи найдите следующий код:

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="photo-box">
            <div class="image-wrap">
                <img src="">
                <div class="likes">309 Likes</div>
            </div>
            <div class="description">
                Fantastic Architecture #architecture #testing
            <div class="date">September 16, 2014</div>
        </div>
    </div>
</div>


Либо сотрите, либо закомментируйте этот код.

Подвал


Вернемся к файлу index.html и добавим следующий код внутрь элемента <footer>.

<div class="container">
<div class="row">
        <div class="col-xs-12">
            <h4>Get in touch</h4>
            <p class="about-text">I shoot, design and write. Don't hesitate and get in touch with me if you need some creative work done. I always work to achieve my best and fulfil client needs</p>
            <a class="contact-now-btn" href="#">Contact Now</a>
        </div>
    </div>
</div>


Стили подвала


Теперь надо добавить стили нашему подвалу.

footer {
background: $white;
    padding: $padding*3 0;
    text-align: center;

    @media screen and (min-width: $screen-lg) {
        padding: $padding*10 0;
    }

    h4 {
        font-size: 36px;
        text-align: center;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .about-text {
        padding: 0 $padding*3;

        @media screen and (min-width: $screen-lg) {
            width: 650px;
            margin: 0 auto;
        }
    }

    .contact-now-btn {
        display: inline-block;
        width: 70%;
        padding: $padding*2 $padding*5;
        margin-top: $margin*2;
        color: $white;
        background: $grey;
        font-size: 13px;
        letter-spacing: 1px;
        text-decoration: none;
        text-transform: uppercase;

        @media screen and (min-width: $screen-md) {
            width: 60%;
        }

        @media screen and (min-width: $screen-lg) {
            width: 20%;
            margin-top: $margin*5;
        }

        &:hover {
            background: lighten($grey, 5%);
        }
    }
}





Давайте закончим наш сайт на доработке самого низа подвала, .footer-bottom.

Низ подвала


<section class="footer-bottom">
2014 &copy; Jonathan White. All rights reserved.
</section>


Добавьте немного текста в HTML файл, а затем откройте файл Sass и добавьте стили:

.footer-bottom {
background: $white;
    padding: $padding $padding*6;
    border-top: 2px solid $lightgrey;
    letter-spacing: 2px;
    text-align: center;
    color: $mediumgrey;
    text-transform: uppercase;

    @media screen and (min-width: $screen-md) {
        padding: $padding*4 0;
    }
}





Вот и все! Сайт выглядит круто как на десктопе, так и на мобильном устройстве. Хорошая работа!

Заключение


Что мне нравится в нашем сайте — это то, что его можно адаптировать к портфолио любого рода. Я надеюсь, вы без проблем прошли через все этапы и научились чему-то новому. Оставляйте в комментариях ваши впечатления и предложения по улучшению! Спасибо за внимание.

От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!
Метки:
Поделиться публикацией
Похожие публикации
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама
Комментарии 25
  • –36
    Подвал? Мне сначало стало не по себе, пошел гуглить. И впрямь, подвал = футер. Это хорошо или плохо, что за 3 года работы во фронтенде, я не знал, что такое подвал?
    • +17
      Держите нас в курсе.
      • +13
        А шапка не смутила? Хедер и футер по-русски давно именуются шапкой и подвалом.
        • +2
          Именуются они так со времени печати газет :)
      • +13
        Сайт портфолио из фотографий не имеющих отношения к специальности? Ок.
        • +1
          Всегда можно завести «рабочий» аккаунт.
        • +15
          Вот так смотришь на все это и вспоминается какая-то расхожая шутка про инструкцию до создания современного сайта (1. Скачайте библиотеки. 2. Настройте сервер… 146. Начинайте писать Html).

          Нет, серьезно, для чего весь этот парк технологий? Для того, чтобы настроить простенькую адаптивность и обращаться к API?

          Видимо, шутка про еще одну инструкции «Как заставить div двигаться? 1. Скачайте jQuery» перестает быть шуткой.
          • +1
            В защиту могу сказать, что писать на чистом CSS после SCSS или LESS становится просто морально невозможно. На глаза слёзы наворачиваются, когда пытаешься вернуться к корням, а руки так и бегут использовать миксин или вкладывать стили по привычке =)
            • 0
              Эдак вы придёте скоро к программированию мышкой — перетаскивать готовые блоки из одного окошка в другой. К хорошему привыкаешь быстро, но и низкоуровневые вещи забывать не нужно.
              • +3
                Причем тут программирование мышкой? CSS-препроцессоры — это то, что увеличивает производительность разработки и поддерживаемость стилей в разы, причем, независимо от масштаба проекта. Для того, чтобы их использовать — нужно знать CSS, там нет ненужных абстракций.
                • 0
                  Эм, что-то тут не так. Всегда считал, что профессионалы уходят от любых визивигов и приходят к препроцессорам…
              • +8
                Дай человеку рыбу, и он будет сыт один день. Научи человека ловить рыбу, и он будет сыт всю жизнь

                Так вот. В статье описан простой пример использования сложных техник и это основной принцип обучения в системе «от простого к сложному».
                Видимо, шутка про еще одну инструкции «Как заставить div двигаться? 1. Скачайте jQuery» перестает быть шуткой.
                Если цель оправдывает средства, — то почему бы и нет.
              • 0
                Не очень правильно расположены файлы (бутстрап разорван на части, сложно будет обновить версию). А вообще лучше и проще использовать CDN бутстрапа.
                • +9
                  Лучше, проще и, самое главное, правильнее — использовать bower
                • –8
                  выложите кто-нибудь koala_2.0.3_portable.zip плз! нигде не могу скачать :(
                  • +2
                    Шаблонный сайт для (!) портфолио, вот это я понимаю! Вот это круто, вот это сила!

                    Всё, теперь ребятам, которые гордо называют себя фотографами можно даже и дорогую зеркалку не покупать, и с портфолио не заморачиваться.
                    • 0
                      Это не веб-разработка, это веб-конструирование (веб-лего). Предлагаете построить завод по сжиганию веб-конструкторов?
                      • 0
                        Нет, почему же. В качестве обучающего материала вполне ничего. Но смысл портфолио в демонстрации навыков и индивидуальности, при таком подходе полностью пропадает, разве нет?
                        • 0
                          Всё верно, демонстрировать повседневные фото с телефона используя готовые шаблонные технологии — моветон и в области фотографии и в области веб-разработки.
                    • 0
                      Ух ты, получился сайт на целых 8 превью картинок, клик по которым перекидывает на Instagram. Т.е. это даже не галерея, это тупо ссылки в виде картинок, которые ведут на внешний сайт, не предназначенный для показа фото в высоком разрешении.

                      Вопрос — а зачем это все? Возьмите любой конструктор сайтов с шаблоном, CMS и хостингом из коробки, и соберите нам нем осмысленный сайт с галереей и контактной информацией. Wix, Ucoz, Google Sites и прочее вам в помощь. Хотите покруче? Не вопрос — есть конструкторы, в которых можно править исходный css и html/js, тот же Ucos, например.

                      И да, как заказчик аутсорса могу сказать, что подобные сайты закрываю через 2 секунды, и никогда не стану писать такому исполнителю. Причины изложены в статье здесь: sites.google.com/site/damat3d/public/cg-event-2009-zima
                      • 0
                        Wix, Ucoz, Google Sites и прочее вам в помощь.


                        В дополнение хочу порекомендовать Tumblr. Там есть и возможность добавления домена второго уровня, и html/css/js можно менять. Можно тему в легкую написать, и ничего платить не нужно.
                        • –1
                          Точно, забыл уже про него =) Как-то помогал знакомому художнику с настройкой vislib.tumblr.com/ Суть задачи уже не примомню, но как-то быстро удалось сделать что просили. Вроде бы было что-то про количество загружаемых картинок при клике в тэг.
                        • 0
                          Да каждый новый участник хабры, который мало мальски познакомится с Web разработкой:

                          Запостит свой macbook 13'' и Iphone
                          Запостит Трогательную историю о том как он сделал личную страницу с применением примитивных технологий
                          Пообещает свежих постов связанных с этой тематикой…

                          Спасибо, как же мы без этих статей здесь жили-то, никому не известно)
                        • 0
                          Заинтересовавшимся не помешает ознакомиться с этой ссылкой, ибо без accessToken, о котором в мануале ни слова, все это не взлетит. Переводчик не озаботился этой ремаркой.

                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.