Фото актеров на странице фильма (информация о 3 млн актерах на 10 языках)

Регистрация
15 Дек 2017
Сообщения
5,068
#1

1615971348534.png

На desktop версии кино-сайта фото показываются при наведении на имя актера или режиссера.

https://demo.cinema.press/noindex-id823956-chernaya-vdova.html

1615971293477.png

На мобильной версии кино-сайта актеры показаны сразу в фотографиях.

https://demo.cinema.press/mobile-version/noindex-id823956-chernaya-vdova.html

1615971463716.png
Включение и отключение такого показа в Аддмин-панель - Настройки отображения - Фото актеров

Перед включением, нужно загрузить все фото на свой сервер.

Для этого используется команда:

cinemapress people

По умолчанию она загружает только фото (без json) с именами на английском и кириллице (русский, украинский и др.) в /files/poster/people/

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

Параметры команды:

cinemapress people "example.com" "snow" "jpg" "ru" "cache"
  • example.com - домен Вашего сайта
  • snow - шаблон на котором работает сайт
  • jpg - загружать только картинки, возможные варианты:
  • ru - имена актеров для jpg и для json, только на английском и кириллице (исключить арабский, китайский и прочие языки), возможные варианты:
    • ru - английские и русские имена
    • en - только английские имена и биография
    • all - имена на всех доступных языках
  • cache - не делать запрос к JSON и скачиванию JPG, если этот актер уже есть (/var/json-people - тут json, /files/poster/people/ - тут jpg)
При включении показа фото актеров в админ-панели, в информацию о фильме добавляется 2 новых свойства, это movie.actors_arr2 и movie.directors_arr2
Благодаря этим массивам, реализуется вывод фото актеров в шаблоне movie.ejs:

1615971293477.png
HTML:
<% if (typeof movie.actors_arr2 === 'object' && movie.actors_arr2.length) { %>

    <% movie.actors_arr2.forEach(function (actor) { %>
        <div class="cinemapress-news-block cinemapress-people-block">
            <div style="margin: 0; padding: 10px">
                <a href="<%- actor.url %>" class="cinemapress-news lazy" style="background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAADICAQAAABrVzQQAAABLUlEQVR42u3RMQEAAAgDoC251W3hI1SgmfBMpUtHOtKRjnSkIx3pSEc60pGOdKQjHelIl450pCMd6UhHOtKRjnSkIx3pSEc60pEuHelIRzrSkY50pCMd6UhHOtKRjnSkI1060pGOdKQjHelIRzrSkY50pCMd6UhHunSkIx3pSEc60pGOdKQjHelIRzrSkY506dKlIx3pSEc60pGOdKQjHelIRzrSkY50pEtHOtKRjnSkIx3pSEc60pGOdKQjHelIl450pCMd6UhHOtKRjnSkIx3pSEc60pEuHelIRzrSkY50pCMd6UhHOtKRjnSkI1060pGOdKQjHelIRzrSkY50pCMd6UhHunTp0pGOdKQjHelIRzrSkY50pCMd6UhHOtKlIx3pSEc60pGOdKRzawFrr2QBa00SvgAAAABJRU5ErkJggg==');" data-bg="<%- actor.image %>">
                    <div class="cinemapress-news-title">
                        <%= actor.title %>
                    </div>
                </a>
            </div>
        </div>
    <% }); %>

<% } %>

Как Вы можете заметить, вывод происходит в блоке cinemapress-news-block, т.е. стили полностью повторяют вывод новостей. Единственный добавочный стиль, это cinemapress-people-block чтобы на узком мобильном экране актеры были в 2 строки.

CSS:
@media all and (max-width: 767px) {
  .cinemapress-people-block {
    float: left;
    width: 33.33%;
  }
}
@media all and (min-width: 768px) and (max-width: 1199px) {
  .cinemapress-people-block {
    float: left;
    width: 20%;
  }
}
@media all and (min-width: 1200px) {
  .cinemapress-people-block {
    float: left;
    width: 20%;
  }
}

1615971348534.png

HTML:
<a href="/actor/Скарлетт Йоханссон" class="cinemapress-tooltips">
    Скарлетт Йоханссон
    <span style="position: absolute; visibility: hidden;">
        <img src="/files/poster/people/Скарлетт Йоханссон.jpg" alt="Скарлетт Йоханссон"/>
    </span>
</a>
CSS:
a.cinemapress-tooltips {
    position: relative;
    display: inline
}

a.cinemapress-tooltips span {
    position: absolute;
    color: #fff;
    height: 200px;
    line-height: 64px;
    text-align: center;
    visibility: hidden;
    border-radius: 6px
}

a.cinemapress-tooltips span img {
    height: 200px;
    border-radius: 10px
}

a.cinemapress-tooltips span:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0
}

a:hover.cinemapress-tooltips span {
    visibility: visible !important;
    opacity: .95;
    bottom: 30px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 100001
}

Все эксперименты с сайтом и загрузкой фото, лучше делайте на отдельном тестовом сайте test.example.com и затем когда убедитесь что всё работает, переносите на основной. При загрузке фото и json, в названиях-именах буква ё заменяется на е, для лучшей совместимости.

Команда будет выполняться несколько дней, поэтому запускать её лучше в фоне, чтобы можно было закрыть терминал:
  • nohup cinemapress people "example.com" "snow" > people.log 2>&1 &
Всегда обновляйте установочный файл и систему: cinemapress upd && cinemapress update
 
Енот
Новичо́к, через «о́»
Регистрация
3 Апр 2020
Сообщения
346
#3
@Alisa, Сколько понадобиться свободного места на сервере?
 
Енот
Новичо́к, через «о́»
Регистрация
3 Апр 2020
Сообщения
346
#5
20 ГБ свободного места должно хватить, но лучше во время команды получения, проверять командой df -h
Может есть смысл рассмотреть способ раздачи файлов через cdn?
 
Енот
Новичо́к, через «о́»
Регистрация
26 Авг 2018
Сообщения
395
#8
27 ГБ свободно, должно хватить.
А есть ли возможность не загружать постеры на сервак, а хранить к примеру в облаке и оттуда подтягивать?
P.S. у меня на серваке всего 20 Gb :(
 
Енот
Новичо́к, через «о́»
Регистрация
3 Апр 2020
Сообщения
346
#9
А есть ли возможность не загружать постеры на сервак, а хранить к примеру в облаке и оттуда подтягивать?
P.S. у меня на серваке всего 20 Gb :(
86144 постеров уже скачалось, осталось 26gb
p.s. сайт стал заметно дольше открываться
 
Последнее редактирование:
Енот
Новичо́к, через «о́»
Регистрация
3 Апр 2020
Сообщения
346
#10
@Alisa, вот только папка actor для json файлов не появилась (прописывал "all")
 
Енот
Новичо́к, через «о́»
Регистрация
26 Авг 2018
Сообщения
395
#11
86144 постеров уже скачалось, осталось 26gb
Так вот по этому и задумываюсь о сторонней подгрузке (правда это увеличит время загрузки страницы), иначе только аренда более дорогостоящего VPS ...
 
Енот
Новичо́к, через «о́»
Регистрация
3 Апр 2020
Сообщения
346
#12
Так вот по этому и задумываюсь о сторонней подгрузке (правда это увеличит время загрузки страницы), иначе только аренда более дорогостоящего VPS ...
Может есть смысл рассмотреть способ раздачи файлов через cdn?
 
Енот
Новичо́к, через «о́»
Регистрация
26 Авг 2018
Сообщения
395
#13
Это вариант, но как такое провернуть, не стану же я cdn поднимать (дорого и мозгов не хватит)
 
Регистрация
15 Дек 2017
Сообщения
5,068
#14
@Alisa, вот только папка actor для json файлов не появилась (прописывал "all")
/var/json-people - тут json
Если бы они сохранялись в папку темы, сайт бы перезагружался каждые 10 миллисекунд и в итоге контейнер был бы признан «мертвым». Перенос будет в самом конце получения.
p.s. сайт стал заметно дольше открываться
Это из-за получения. В htop Вы должны увидеть нагрузку. А вот когда json будут в папке темы, вот тогда уже можно смотреть за нагрузкой. Возможно лучше будет обойтись без json.
Это вариант, но как такое провернуть, не стану же я cdn поднимать (дорого и мозгов не хватит)
CloudFlare + Nginx на сервере, намертво закэширует все фото актеров. Они весят не много, 7-12 Кб.
 
Енот
Новичо́к, через «о́»
Регистрация
3 Апр 2020
Сообщения
346
#15
/var/json-people - тут json
Если бы они сохранялись в папку темы, сайт бы перезагружался каждые 10 миллисекунд и в итоге контейнер был бы признан «мертвым». Перенос будет в самом конце получения.

Это из-за получения. В htop Вы должны увидеть нагрузку. А вот когда json будут в папке темы, вот тогда уже можно смотреть за нагрузкой. Возможно лучше будет обойтись без json.

CloudFlare + Nginx на сервере, намертво закэширует все фото актеров. Они весят не много, 7-12 Кб.
Отлично.
Если я получаю только картинки + json, значит я могу получать их на более мощном сервере, а потом перезалить архив на другие свои сервера, так?
 
Регистрация
15 Дек 2017
Сообщения
5,068
#16
Если я получаю только картинки + json, значит я могу получать их на более мощном сервере, а потом перезалить архив на другие свои сервера, так?
Да, результат работы команды:
  • /var/json-people - файлы JSON с именами в виде ID на TMDb
  • /files/poster/people - файлы JPG с именами людей на разных языках
  • /themes/тема/views/actor - файлы JSON с именами актеров на разных языках
  • /themes/тема/views/director - файлы JSON с именами режиссеров на разных языках
actor и director - это названия из URL, т.е. если у Вас aktery и rejissery - то папки переименовать в такие названия.
 
Енот
Новичо́к, через «о́»
Регистрация
3 Апр 2020
Сообщения
346
#19
@Alisa, я вижу в админке появился пункт "домен для фото актёров".
Есть смысл качать фото на свой сервер или вы готовите для нас cdn сервер?
 
Регистрация
15 Дек 2017
Сообщения
5,068
#20
Есть смысл качать фото на свой сервер или вы готовите для нас cdn сервер?
На собственном сервере всё хранить надежнее.
Это было сделано, чтобы на отдельном поддомене картинки открывать, может Вы захотите 100 сайтов сделать и чтобы на каждом не качать, прописывать один и тот же адрес.