Code Monkey home page Code Monkey logo

okfilm_2018's Introduction

Сайт okfilm.com.ua для Оксаны

Версия 2018 года. Вторая версия, уже с собственным дизайном.

Сайт написан используя только html/css/js и заточен на работу с Nginx. Конфиг для Apache есть, но он годится только для запуска на локалке. Для удобства разработки используется технология SSI (Server Side Include) в качестве примитивного шаблонизатора. Чтобы включить поддержку SSI на Apache, необходимо подключить модуль mod_include и добавить в инструкцию DirectoryIndex поиск файлов index.shtml.

Настройка и запуск

Для работы сайта необходимо:

  • скачать этот проект в директорию /srv;
  • закинуть папку cdn с компа в директорию /srv;
  • создать папку /srv/logs для логов ошибок Content Security Policy;
  • скачать конфиги nginx также в директорию /srv и подключить их к nginx как описано в проекте с конфигами.

Кроме того, предполагается наличие папки /srv/shared-global у которой открыты права на чтение и запись для всех. Это будет папка для загрузки файлов, которые смогут скачивать клиенты, перейдя по предоставленной им ссылке.

Подготовка фотографий для портфолио

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

  1. Вызов сценария "Большое фото в галерею сайта" (скачать);
  2. Обрезка фото с соотношением сторон 23x20 (инструмент "Рамка");
  3. Вызов сценария "Маленькие превью в галерею сайта" (скачать);
  4. Закрыть файл без сохранения.

Причём для второго шага (рамка) в экшене включена опция "открытие деалогового окна". Так что, при обработке фоток, обрезка для каждой фотки задаётся вручную. Это позволяет сделать красиво кадрированные миниатюры без отсечения голов.

После создания экшена, он ставится на выполнение через меню "Файл / Автоматизация / Пакетная обработка". В диалоговом окне задаётся экшен, папка с фотками и опции как на скриншоте. В результате выполнения экшена фотки в папке заменяются на сжатые до размера 1200 px по широкой стороне. Так что оригиналы нужно сохранить отдельно. А также создаются миниатюры размером 345x300 px для экранов с разной протностью пикселей.

После выполнения скрипта, нужно ещё раз загрузить оригинал титульной фотки, которая отображается на странице http://okfilm.com.ua/photo, обрезать её так же, как и уже созданная миниатюра, и вызвать сценарий "preparingImagesForSite" (скачать). В диалоговом окне нужно указать размер "230". В результате будут созданы миниатюры 230x200 px для экранов мобильных устройств. Эти миниатюры нужно положить в ту же папку, что и основные фотки с миниатюрами.

okfilm_2018's People

Contributors

zatolokinpavel avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.