Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Верстка фотографий, как на vk.com
 
 автор: Ricko   (03.04.2012 в 01:00)   письмо автору
 
 

Каким образом можно сделать верстку фотографий, как это сейчас делается в соц. сети ВКонтакте (vk(точка)com/wall1_45427)?

Какой алгоритм обрезки и т.д.?

Например, для простоты — случай с 3 фотографиями.

  Ответить  
 
 автор: ЯСА   (03.04.2012 в 03:24)   письмо автору
 
   для: Ricko   (03.04.2012 в 01:00)
 

Хм... "для простоты" вы выбрали вариант, которого нет в представленных примерах.
Примеры даны только и исключительно для 6-ти фоток.
----

Не знаю - как именно реализовано у Дурова, но я бы делал так:
1. Для определённого количества фоток (шесть штук) выбирается несколько схем компоновки.

2. Эти схемы, как видно из примеров, различаются количеством "книжных", "альбомных" и "квадратных" фотографий ("книжная" - высота явно больше ширины, "альбомная" - ширина явно больше высоты, "квадратная" - ширина отличается от высоты в пределах, положим, 15%)

Например, схема "Вика Дайнеко" - 3 альбомных и 3 квадратных
Схема "Катя Ботягова" - 5 альбомных и 1 книжная
Схема "Цветолина Шипилова" - 5 альбомных и 1 квадратная
Схема "Кристина Индвенко" - 4 книжных и 2 квадратных.
...
Всего общее количество схем для 6-ти фотографий при 3-х их типах определяется комбинаторикой - количество сочетаний или размещений, уже не помню.

3. Определяются пропорции всех шести загруженных фотографий. Если есть фотки с намёком на "квадратные", то ненужная дельта (по ширине или высоте) обрезается. Снизу или слева (обычно там меньшая информативность на фотках). Ну, или, для чистоты - 25% дельты обрезается сверху, а 75% - снизу (соответственно, 25% справа и 75% - слева).

4. Ну а далее - простая подгонка в заданную схему с такой же обрезкой лишнего снизу или слева.

  Ответить  
 
 автор: confirm   (03.04.2012 в 06:42)   письмо автору
 
   для: Ricko   (03.04.2012 в 01:00)
 

Скорее всего, это на сервере GD-работа.

  Ответить  
 
 автор: Ricko   (03.04.2012 в 15:45)   письмо автору
 
   для: confirm   (03.04.2012 в 06:42)
 

Думаю, лучше всего это на CSS реализовать.

  Ответить  
 
 автор: confirm   (03.04.2012 в 15:52)   письмо автору
 
   для: Ricko   (03.04.2012 в 15:45)
 

Да можно конечно, вопрос только в том, какие исходники при этом - размеры фото. А то ведь не обзятельно, что вообще щелкнут что-то, а сосать с сервера придется прилично.

  Ответить  
 
 автор: Ricko   (03.04.2012 в 16:29)   письмо автору
 
   для: confirm   (03.04.2012 в 15:52)
 

В любом случае, на сервере будут храниться не оригиналы с огромными размерами. А ресайзы с шириной/высотой ~ до 800. Картинки значит будут до 100 Кб.

Хотя да, тут уже вопрос в том, лучше тянуть больше Кб с сервера (думаю, при нужном ресайзе картинки будут весить раза в 3-4 меньше) или же хранить такой хламовник на сервере. Просто, я не особо опытный в таких делах, но все равно скорость загрузки страницы, наверное, на первом месте. Хотя, не хочется и забывать о рациональном использовании ограниченного дискового пространства.

  Ответить  
 
 автор: confirm   (03.04.2012 в 16:37)   письмо автору
 
   для: Ricko   (03.04.2012 в 16:29)
 

Вот и посчитайте, сколько "метров" надо будет выкроить с сервера, если в одном посте по 6 фото, это уже 0,6 метров, и постов 5, это уже 3 метра.
Хранить то, что может меняться (не похоже, что это вечная инсталляция фото), не лучший выход. Тут уж лучше исходить из возможностей вашего хоста, как лучше поступить, и если русурсов хватает, и нагрузку держит, то динамически создавать такой коллаж, возможно и кешируя его до тех пор, пока его компонеты не изменяются.

PS. Я не поклонник всякой хрени типа одноклассников и контактов, как там, от куда и по какому принципу, сказать не могу.
Но, к примеру, если бы мой пользователь Колька загрузил свою мордашу 30 раз, а Юлька 22, то поступил бы так:
1. Готовил бы и сохранял эти коллажы при новых добавлениях фото от пользователей, а это происходит даже не обязательно каждый день, а возможно и месяц.
2. Каждый коллаж, это фиксированное число фото в каждом, то есть, например, для Кольки на данный момент при 6 фото в одном, поучаем 5 коллажей.
3. Накладывая изображения, вы работаете с координами, а это уже map-карта, которую храним вместе с именем и описанием коллажа.
4. Если такие коллажи подразумевают навигацию, то убиваем таким образом всех зайцев.

Размеры загружаемого при этом гораздо меньше будут.

  Ответить  
 
 автор: Ricko   (03.04.2012 в 19:12)   письмо автору
 
   для: confirm   (03.04.2012 в 16:37)
 

К сожалению, не совсем понял, что Вы предлагаете :(((

Но можно иметь несколько шаблонов для расстановки фотографий (в зависимости от количества и пропорций). Выбирать по размерам изображений такой шаблон, а потом при загрузке коллажа производить действия, которые предписывает шаблон. Например, нужно уменьшить изображение до N пикселей и отсечь определенную часть (с помощью css).

  Ответить  
 
 автор: confirm   (03.04.2012 в 19:32)   письмо автору
 
   для: Ricko   (03.04.2012 в 19:12)
 

Я предлагаю готовить коллажы на сервере. Да, можно иметь заготовки (шаблоны) их, и не только квадратики, но и в центре, в кругу большое фото, а его обрамляют малые квадраты, в центе звезда, а в ее углах малые фото, и т.д, и т.п. Тут насколько фантазии хватит, как и не обязательно выбирать эти шаблоны по принципу какие фото имеем, можно и пользователю дать возможность выбора шаблона, пусть тешится. А слишком много места на сервере они не займут, а вот пользователя разгрузят.

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования