Как я готовлю фотки для постов на блоге

Проекту исполнилось 15 лет! Поддержать проект материально, проспонсировать проекты Автора или сделать ему подарок можно на этой странице: "Донаты и Спонсорство, Список Желаний".

Число просмотров: 5 864 

Исходные фотографии с фотика перед обработкой

Исходные фотографии с фотика перед обработкой

Йо! Всем снова привет! Написал мне тут один товарищ на мыло с вопросом: а чем и как я уменьшаю фотки с телефона, когда их кому-то посылаю. Ну, товарищ обломался, потому что я ему ответил, что работаю со старой версией ACDsee 5. Но это дело напомнило мне о том, что я давно собирался написать небольшой пост о том, как я подготавливаю фотки на блог. Во-первых, потому что это кому-то может сгодиться: может быть кто-то стащит принцип и применит его у себя на блоге. А во-вторых, потому что тут уже легенды начинают ходить о том, что у меня в сутках 48 часов, потому что за 24 не успеешь и щит собрать и фотки к постам обработать. Так вот сейчас я и раскажу, как это всё у меня происходит.

Во-первых, с появлением телефонов с камерами и жирными каналами в инет все забыли о том, что фотки надо уменьшать в размерах. Этот момент очень важный! ЛЮБОЙ E-Mail шлётся голым открытым текстом английского алфавита (для простого примера). И как же нам переслать в нём фотку, которая будет состоять из всяких двоичных данных и даже нечитаемых символов?

Для того, чтобы переслать вложения по E-Mail, они кодируются по специальной схеме. И из-за этого размер самого письма E-Mail получается примерно в 1,5 раза больше, чем размер вложений. То есть, когда вы этаким лёгким движением пальца втыкаете в письмо несжатую фоточку с камеры размером в 7 мегабайт, то письмо с такой фоточкой начинает занимать примерно 10-11 мегабайт. И конечно же долго шлётся, если мобильный инет в этот момент тормозит.

А некоторые ещё в этот момент времени любят звонить: «Ну как? Получил фотку? Нет? Странно, мне написали что она отправлена». На самом деле, когда телефон пишет, что мыло отправлено — это оно у него поставлено в очередь на отправку и только-только ещё отсылается в фоновом режиме. Типа это сделано для того, чтобы пользователь ни о чём не думал. Но, блин, это торопыжничество делает всё только хуже.

Не знаю, как это делается на телефоне, но с обычных компов фотки лучше уменьшать, если их не надо будет рассматривать детально. Например, решили вы мне нафоткать пяток фоток со штробами. Хрен ли там детально смотреть? По фоткам важно понять, как эти штробы идут: ветрикально, горизонтально и где там стена с окном находится относительно них. И не нужны тут фотки по 7..10 метров, где каждый камешек виден. А то так тащишь почту на 60 мегабайт (это охереть сколько много!), а там всего 4 фотки. Зато с зеркалки, млять, в 12 метров каждая! И только в редких случаях — например, когда надо рассмотреть номиналы автоматов в щите удалённо — фотку лучше прислать несжатую. Но одну, а не много штук.

Дополнение. Тут a_b в комментариях подсказывает, что сейчас есть прога ResizeMe для Android, которая может делать то, что надо — уменьшать фотки перед отправкой на почту.

Вот такие вот посылы. У меня это всё вошло в привычку, и отработалось до автоматизма ещё с 98 виндов, что ли. Для себя у меня нашёлся комплект решений, я им пользуюсь, и сейчас им поделюсь. Как всегда и было, принципа у меня два: не плодить лишние сущности (не заводить пяток программ каждая для своего действия, а стараться пользоваться одной-двумя, но с кучей возможностей), и по возможности делать одинаковые операции пакетно, пачкой сразу на все фотки.

Задач у меня возникает две. Сначала разберёмся с самой простой: послать какие-то фотки по мылу (например, собранного щита заказчику, или какой-то технической фигни читателю). Их может быть несколько штук, и с ними надо сделать вот какие вещи:

  • Разложить по порядку. Например, общий вид, детальный слева, детальный справа.
  • Изменить размер так, чтобы и рассмотреть всё можно было, и чтобы не занимало много места.
  • Переименовать подряд в виде «Foto-1», «Foto-2» и так далее, чтобы на компе это не потерялось.

И есть ещё один пунктик, который называется «…если у вас паранойя, то это не значит, что за вами не следят». Есть такой набор параметров, который обзывается Exif, или просто «метаданные». Внутри каждой фотки обычно записывается куча информации: дата и время съёмки, название камеры, которой снимали, всякие параметры съёмки и иногда даже GPS-координаты места съёмки. И иногда даже превьюшка фотки (Thumbnail) сюда же сохраняется.

Внутри файлов находятся метаданные о съёмке

Внутри файлов находятся метаданные о съёмке

Система построена так, что большинство редакторов эти данные не удаляют, если мы в них просто редактируем фотку (повернуть, кадрировать). Из-за встроенной превьюшки или данных о повороте камеры часто бывают проблемы с некоторыми фотками или движками форумов.

В некоторых случаях при просмотре фотки превьюшка имеет приоритет и может быть так, что на превьюшке картинка повёрнута, а на основной фотке — уже нет (редактор не обновил превью). Или же фотка была повёрнута в редакторе, но Exif не обновили, и когда такую фотку вставили на форум или переслали на телефон, а телефон решил считать положение фотки из Exif и сам её повернуть как ему подумалось правильным. Ха ха.

Ну а в некоторых случаях не есть хорошо рассылать всем свои GPS-координаты, модель телефона или прочие данные. Нафига всем рассказывать о том, где ты был? Поэтому такие данные надо бы из фотки убрать. Заодно и превьюшка удалится, а она тоже занимает место (в том числе и на хостинге). Вроде кажется, что лишние 20 кб на каждую фотку — это фигня. Но когда фоток около двух-трёх тысяч — то в сумме получается много.

Так сложилось, что для всего этого у меня отлично прижилась программа ACDSee 5. От неё пахнет стариной или матами. Дело в том, что ACDSee 4 версии постоянно падала и была глючным дерьмом (и в этот момент народ пачками уходил с неё на IrfanView — уже не помню, как точно звался). А ACDSee 6 сделали настолько навороченной и тяжёлой, что она систему тормозила и чуть ли даже в магазин за едой не ходила.

А вот пятая версия оказалась удобной и устойчивой даже на свежих версиях винды. Умеет она всё, что мне надо. И даже чуть больше:

  • Сортировать файлы по разным критериям. Также можно в каждой папке перетаскать файлы в нужном порядке и она запоминает этот порядок. Можно даже переключать сортировку по нашему порядку, или по обычному: имя, дата, размер.
  • Умеет читать данные с Exif и некоторые править. И даже умеет назначить дату-время файлам фоток в системе по дате/времени из Exif. Это удобно, когда надо сделать так, чтобы фотки сортировались по дате съёмки, а дата файлов почему-то поменялась (при копировании с другого диска).
  • Умеет делать пакетное переименовывание файлов. Выделил, ввёл маску — и переименовал.
  • Умеет искать одинаковые фотки по содержимому файла (сверяет хэши) и давать выбор, что с ними делать: переименовать, удалить (и откуда именно) или оставить.
  • Пакетные операции с фотками: ресайз, поворот, конвертирование форматов между собой.
  • Печатает фотки. Тоже пакетно, если выделить несколько. Можно на лету откадрировать что-то и это напечатать, не трогая сам файл фотки. Я так всякие проекты, которые мне в виде фоток шлют, печатаю.

Единственное, что у неё было неудобным — это мелкие окошки. Но мы же помним, что в Visual Studio есть отличный редактор ресурсов исполняемых файлов, да? %) Поэтому многие окошки я себе растянул — и стало совсем комфортно!

Итак, когда мне надо заслать кому-то пачку фоток, то я сначала конвертирую их в такой формат, в котором Exif не поддерживается. Это будет BMP. Понятно, что оригиналы фоток у меня остаются нетронутыми и всегда лежат в архиве, а я работаю только с копиями, которые могу крошить и мучить как хочу.

Конвертируем файлы в другой формат, чтобы удалить Exif

Конвертируем файлы в другой формат, чтобы удалить Exif

И при конверте фотки нас любезно спрашивают: хотим ли мы похерить все метаданные фотки или не хотим. Конечно хотим! И ещё и сразу для всех фоток!

Программа спрашивает об удалении Exif

Программа спрашивает об удалении Exif

Дальше мы так же изменяем размер всех фоток. Я помню горячие клавиши для всех операций, поэтому дело идёт очень быстро. А ещё я знаю, что для моего фотика масштаб в 30% от оригинала — это фотка, на которой можно отлично рассмотреть крупные детали и часть мелких, а масштаб 40-50% — это уже достаточно крупная фотка, на которой можно прочитать всё.

Изменяем размер картинок пакетно

Изменяем размер картинок пакетно

Ещё обратите внимание на то, что ресайзить можно просто по процентам, а можно ресайзить так, чтобы подогнать фотку под заданные рамеры. Это тоже удобно.

Для примера я накопировал эту же фотку несколько раз. Вот и всё: пробежали строчки в большом окошке (я его и увеличивал), и всё готово!

Процесс пакетного изменения размера

Процесс пакетного изменения размера

Теперь мы можем переименовать все наши фотки по маске. Для этого выделяем их и жмём F2. Вылезает окошко, где можно настроить маску, порядок отсчёта и то, что надо сделать с именем и расширением файлов: перевести в большие или мелкие буквы или ничего не делать.

Пакетное переименовывание файлов

Пакетное переименовывание файлов

Вуаля! Фотки переименовались. И теперь конвертнём их снова в JPEG для того, чтобы отсылать заказчику (или кому-то ещё).

Конвертируем назад в JPG

Конвертируем назад в JPG

Всё готово!

Готовые картинки: без Exif и уменьшенные

Готовые картинки: без Exif и уменьшенные

Теперь единственное, что осталось в Exif — это данные о той программе, которая обработала фотку и время этой обработки. Этого я не смущаюсь, и это меня устраивает. То, что выделено жирным, можно менять самому. Например, какой-нить комментарий или копирайт вписать.

Пустые метаданные - нет Exif и информации о съёмке

Пустые метаданные - нет Exif и информации о съёмке

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

Но это — только начало. Положим, так обрабатывать фотки для того, чтобы закинуть их на почту, это лично моя заморочка, так? А вот как заготовить фотки для блога — это не только моя заморочка. Вот давайте я про это и расскажу.

Чего нам надо от фоток для поста на блоге (какие требования я ставлю для них)? Вот чего:

  • Чтобы они шли в удобном порядке по статье. Чтобы первая фотка шла первой, пятая — пятой и так далее. Так легче не запутаться и заранее ещё и статью продумать (или наоборот: что и в каком порядке надо отфоткать).
  • По возможности, фотки должны иметь один и тот же размер (если это не скриншоты) в статье. Это приятно для глаз, которые видят одну и ту же границу около текста и фоток, а не прыгают с большой фотки на мелкую и обратно. Исключение тут составляют скриншоты — они могут быть и маленькими, конечно.
  • На фотках надо нанести какой-то копирайт или дату. Я свои подписываю копирайтом и ставлю год, когда писался пост. Кое-где мелкими копирайтами у меня выложено слово «Х@Й» прям поверх фотки. Вот тут эта фишка была описана. Если не присматриваться — то и не заметишь. Посты, фотки из которых могут растащить по инету, я подисываю без этой фишки, а посты про свои личные дела и щиты — с этой фишкой.
  • У некоторых фоток надо сделать кадрирование и подкрутить яркость, контрастность и прочие штуки. Кадрирование я обожаю, потому что на видео не передать такой красоты макросъёмки, как на фотках. Иногда можно какой-нить винтик снять так, что на нём все царапины на резьбе будут видны и откадрировать это на 1024х768.

Самое важное решение, которое я для себя сделал (а точнее, мне его подсказал мой друг-дизайнер ещё в 2009, что ли) — это начать думать не от исходного размера фотки, а от того, какой она должна быть на блоге в статье. То есть, не уменьшать фотку до размера «хх%» или не делать тупой ресайз до 1024х768, а наоборот: заготовить себе пустое поле размерами 1024х768 и уже в него подгонять фотки.

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

Что касается самого движка WordPress, на котором все делают блоги, то сейчас там запрятали подальше одну удобную штуку: привязку фотографий к посту. Раньше ты мог редактировать пост и добавлять фотки так, что они были доступны вместе с этим постом. Пост и его фотки — удобно же!

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

Поэтому я забил на библиотеку и выбрал более удобный путь. Фотки заранее сортируются по порядку, переименовываются, пачкой грузятся на блог и этой же пачкой вставляются в пост. Сразу и за один проход. В старом WordPress это было штатно, а сейчас есть плагин FasterInsert, который делает то же самое. Про него расскажу, когда до него дойдёт дело.

Ну и последнее. Фотки лучше всего обязательно переименовывать, чтобы они не терялись и не выглядели позорно типа DCIM_0042.jpg, Abb_5439785asf7fjf7_OT63.jpg, если вы натащили их с разных мест. Внутри поста этого никто не видит, но стоит дать ссылку на фотку кому-то со стороны — и будет немного неприлично, я думаю. Да и поисковики иногда индексируют даже названия файлов фоток, и в наших фотки называть понятно.

Вот такие «правила» получились у меня для своих фоток. Хм! А вот что делать с теми фотками, которые вставляются в комментарии? Я когда-то поставил плагин Comment Images Reloaded, который позволяет прицепить немного фоток к комментарию:

Картинки в комментариях, сделанные через плагин Comment Images Reloaded

Картинки в комментариях, сделанные через плагин Comment Images Reloaded

Вы-то, когда цепляете фотки, не будете следить за их названиями, и на FTP у меня набирается вот такой вот грёбаный мусор:

Какие файлы картинок вы назагрузили мне на блог (некрасивые названия)

Какие файлы картинок вы назагрузили мне на блог (некрасивые названия)

Больше всего меня бесило то, что WordPress все загруженные файлы валит в одну кучу: и мои красивые, и ваши хрен какие. А потом заходишь на FTP — и не разберёшься ни фига. Что делать? Разобраться и написать злой скрипт, который ищет фотки, загруженные к комментариям, и переносит их на другую папку на хостинге! И в тот момент, когда я переезжал на HTTPS в Мае 2020, я заодно разобрался и с этими фотками!

Написал я скрипт с такими вот настройками:

Настройки моего скрипта для перемещения картинок комментариев и правки их на HTTPS

Настройки моего скрипта для перемещения картинок комментариев и правки их на HTTPS

Натравил его на свой WordPress — и оно сработало! Фотки разделились по папкам, и мои, красивые, теперь лежат отдельно от ваших! Подробнее про это я рассказал в длинном посте (и там же дал ссыль на свой страшно опасный скрипт). Читайте его!

А теперь, когда с именами файлов и хранением фоток мы разобрались, займёмся подготовкой фоток для поста про щит в Мурманск. Мы там с клиентом оторвались и поставили Siemens Logo на свет:

Силовой щит в Мурманск на базе Siemens Logo

Силовой щит в Мурманск на базе Siemens Logo

В этот раз я фотки никуда не конвертирую и не сжимаю, потому что Фотошоп и так срезает Exif, если делать так, как делаю я. Исходные оригиналы фоток уезжают в архив нетронутыми, а для поста я копирую их в отдельную папку и работаю уже с ней. Если что-то напутал, не то удалил — всегда можно снова взять оригинал.

Вот они — оригиналы. Тут можно увидеть ещё один приём: я фоткаю одно и то же несколько раз подряд. Это делается для того, чтобы если какая-то фотка не удалась, потом не делать её заново, а просто отобрать ту, которая была получше. Да и есть такие вещи, которые несколько раз не сделать: когда мы что-то разбираем, или собираем щит. Как снова зафоткать момент, когда уже собранный и упакованный щит был ещё без проводов? =)

Нафотканные материалы для поста на блоге

Нафотканные материалы для поста на блоге

Дальше я все эти фотки начинаю проряжать и чистить. Заодно я расставляю их так, как они будут идти в посте. Вот смотрите, по фоткам ниже читается примено так: «Заглавная. Потом щит в сборе. Потом расскажем про счётчик, потом про одни клеммы, другие клеммы… (вторая строчка) потом провода, автоматы, потом Logo… и в конце закрываем и пакуем».

Сортируем фотки по порядку, удаляя лишние

Сортируем фотки по порядку, удаляя лишние

После этого я пакетно переименовываю файлы фоток и ещё и руками дозадаю им названия. Видите, как это выглядит? У фоток есть префикс — «Mur» — мурманск, потом номер файла, и потом пояснение. Это пояснение нужно ещё и мне самому, чтобы потом не забыть, какая фотка для чего нужна. А благодаря префиксу фотки на FTP не путаются и лежат группами.

Переименовываем фотки как нам надо

Переименовываем фотки как нам надо

И теперь всё готово для того, чтобы заниматься Фотошопом. Придумано там вот что. У меня есть шаблоны фоток для 1024х768 и для 768х1024 (горизонтальных и вертикальных). Шаблоны идут в виде исходных PSD-файлов, и в них слоями создано всё, что надо: копирайты, рамки, дата фотки. Раньше я даже создавал слои в тёмном и светлом варианте, но потом забил и использую чаще всего светлый.

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

Шаблон Photoshop для обработки фотографий на блоге

Шаблон Photoshop для обработки фотографий на блоге

И дальше начинается магия. Берём все исходные фотки — и тащим их в фотошоп! Он каждую из них открывает нам в отдельном окне. И вот тут вот нам наша система имён уже начинает помогать: файлы-то сортируются по имени! И поэтому и окна с фотками у нас откроются тоже по имени — подряд, по порядку!

Дальше я беру каждую фотку (окно с файлом рамок уменьшил и закинул подальше) и тащу её на окно с рамками. Фотошоп автоматически добавит новый слой с изображением перетащенной фотки. А как фотошоп называет слои по умолчанию? Layer x: 1, 2, 3, 4… То есть номер слоя будет совпадать с номером фотки. И если мы где-то ошиблись — то легко будет вспомнить, на какой фотке всё остановилось.

Вносим фотографии слоями в PSD-шаблон

Вносим фотографии слоями в PSD-шаблон

Важная фишка! Фотошоп всегда вставляет новые слои (фотки) ВЫШЕ того, который выделен в списке! Поэтому если вы заранее в файле рамок создадите пустой слой (он у меня зовётся «(Base)» и выделите именно его — то фотки будут вставляться выше него. У меня они попадут между слоями рамок и слоем «(Base)», что мне и надо.

Итак, у меня было 13 фоток — и теперь появилось 13 слоёв. Если присмотреться на скриншот — то будет видно, что фотка гораздо больше по размерам, чем сама рамка файла. Так и надо — мы их кадрировать будем!

Все фотографии сделаны слоями шаблона рамок

Все фотографии сделаны слоями шаблона рамок

И теперь идём снова по слоям. Я выключаю их все до самого первого и поднимаюсь «вверх» по ним. Каждую фотку я уменьшаю и двигаю так, чтобы в мою рамку попала нужная её часть. Видите, как хитро получается? Мы сразу же и меняем размер фотки, и кадрируем её и знаем, что больше чем моя рамка в 1024х768 этот размер не уплывёт никуда.

Чтобы двигать и менять размер фотки, нужно применять команду «Transform» в фотошопе (Ctrl+T). Однако удобнее поставить в верхней панели галочку «Show bounding box», благодаря которой вокруг выбранного слоя автоматически показываются квадратики, за которые его можно перемещать и двигать.

Галочка Show bounding box в Фотошопе, которая позволяет сразу перетаскивать объекты и менять их размеры

Галочка Show bounding box в Фотошопе, которая позволяет сразу перетаскивать объекты и менять их размеры

Чтобы размеры фотки менялись пропорционально, перемещайте её с нажатой клавишей Shift.

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

Кадрируем фотки как нам надо

Кадрируем фотки как нам надо

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

Все фотки откадрированы

Все фотки откадрированы

Теперь пробегаемся по этим же фоткам сверху вниз. На этот раз мы правим нужные нам яркость, контрастность и прочие штуки. Мне обычно хватает команды «Levels», чтобы немного вытянуть тёмные фотки или подтемнить слишком светлые.

Подкручиваем яркость фотографий и лочим слои

Подкручиваем яркость фотографий и лочим слои

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

Всё готово для сохранения в отдельные файлы

Всё готово для сохранения в отдельные файлы

Дальше я прохожусь по слоям вверх, включаю каждый новый и сохраняю это всё при помощи «Save for Web». Имена фоток я копирую из исходных, но сохраняю в другую папку, рядом. Вот и всё.

После этого у нас получается три папки:

  • Исходные фотки, переименованные как надо
  • Обработанные фотки, переименованные как надо
  • Файлы рамок

Это дело лежит в таком виде, пока я полностью не напишу пост, а потом удаляется нафиг. Ну а блог я бэкаплю, обычно после того как напишу несколько постов.

Теперь идём дальше. Загружаем это всё на блог в черновик поста. Лучше всего, если перед загрузкой фоток вы сохраните черновик, зададите посту название и короткую ссылку. Тогда будет точно ясно, к какому посту вы загружаете фотки.

Для того, чтобы не грузить и не вставлять в пост по одной фотке (это можно было бы удавиться), я нашёл плагин Faster Insert (вот ссылка на пост про его доработку под свежий WordPress). Он делает то, что раньше делал движок WordPress: можно загрузить сразу пачку фоток, сразу этой же пачке задать названия, порядок и ещё… одной кнопкой вставить все фотки СРАЗУ!

Плагин FasterInsert для WordPress

Плагин FasterInsert для WordPress

Вот я загрузил фотки и дал им уже понятные названия для поста. Те самые «Mur08-LogoFront.jpg» были нужны для того, чтобы вспомнить что это значит для меня «Siemens Logo передним планом». Я обозвал это как «Обвязка контроллера Siemens Logo».

Загрузили все фотки на блог и дали им названия

Загрузили все фотки на блог и дали им названия

Всё было бы не так гладко, не имей FasterInsert настройки того, ЧТО надо вставлять между фотками. Тогда они все выводились бы в одну строчку, и потом надо было между ними руками вставлять пустые строки. Но и тут подумали за нас:

Настройка FasterInsert - текст для проставки между фотками

Настройка FasterInsert - текст для проставки между фотками

Я поставил себе строчку «<p>*</p>», которая преобразуется в новую строку (абзац) с текстом «*», чтобы видеть, где мне писать текст между фотками.

И теперь почти финал. Жмём кнопку «Invert Selection». Она меняет значения галочек на всём списке фоток: если они были не выбраны, то станут выбранными. Для нас это значит, что она выберет все фотки. А потом жмём кнопку «Insert Selected Images» — вставить выбранные фотки.

Выделяем все фотки и вставляем их за один раз

Выделяем все фотки и вставляем их за один раз

И вуаля! Все-все наши фотки вставились в пост! С нужными названиями и в нужном порядке! УРА!

Но стоп-стоп! Фотки-то вставились… но они же вставили в исходном размере! В моём 1024х768. А ширина поля для текста у меня на блоге — всего 600 точек. Это ж как будет? Фотки вылезать будут?

Небольшое отступление. Штатно WordPress умеет создавать превьюшки для фоток и пихать их в пост, а по клику на превьюшке открывать полную фотку. Обычно там настраивают размеры 150х150 и ещё какие-то. Так вот оказалось, что на одну фотку создаётся тьма превьюшек, причём превьюшки кадрируются через жопу и в хреновом качестве.

И все эти превьюшки жрут места на хостинге больше, чем пожатая фотошопом оригинальная фотка 1024х768. Поэтому от превьюшек я полностью отказался (кроме размера 150х150 — он нужен для того, чтобы WordPress мог показать превьюшки в списке картинок для выбора), и вставляю в текст поста оригинальную фотку целиком, но в коде HTML задаю ей меньшие размеры. Это экономит мне место на хостинге, не снижает качество фоток и не плодит лишних файлов.

Ну и как у всех фоток поменять размер? А просто! Переключаемся в HTML-код и видим наши размеры фоток:

Размеры фоток в HTML-коде

Размеры фоток в HTML-коде

Всё, что нам осталось — взять какой-нить текстовый редактор и сделать замену размеров на новые. А потом вставить это в редактор и переключиться на обычный вид.

Меняем размеры фоток на меньшие, по ширине поста

Меняем размеры фоток на меньшие, по ширине поста

Всё! После этого мы получили готовый черновик, в котором все фотки откадрированы, обработаны, закопирайчены, вставлены на свои места, и между которыми есть звёздочки для текста.

Все фотки вставлены в черновик поста и можно писать текст

Все фотки вставлены в черновик поста и можно писать текст

Дальше остаётся написать сам текст поста и нажать кнопочку «Опубликовать» =) Всё?

Не-а! В 2019ом году мне пришла в голову ещё одна идея! Сделать автоматические подписи под фотками из их атрибута «title» или «alt». Вот по этой ссылке мы можете почитать пост, где я про это рассказываю, а тут я вам перескажу самую суть. Идея была в том, чтобы не использовать штатные подписи фоток WordPress, которые можно ввести в описании загруженного изображения:

Стандартное поле для подписи изображения

Стандартное поле для подписи изображения

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

Простым решением было бы написать JavaScript, который выполняется у вас в браузере, добавляя HTML-код подписей. Но я так не умею, да и не хочу чтобы мои подписи зависели от того, насколько корректно будет работать мой скрипт. Я подумал ещё — и сделал обработчик на хук WordPress «the_content». В этом хуке я получаю текст поста, ищу в нём регулярными выражениями конструкции вида «<img src =… alt = … title = …>», и выдираю текст, который есть в «alt» или «title». А потом выдранный текст вставляю после «<img>» отдельными абзацем.

То, как это работает, вы можете наблюдать во всех постах, включая, конечно же, и этот. У скрипта есть фишка: в ленте постов (когда мы листаем их список) подписи не подставляются: они работают только когда вы смотрите весь пост целиком.

Проекту исполнилось 15 лет! Поддержать проект материально, проспонсировать проекты Автора или сделать ему подарок можно на этой странице: "Донаты и Спонсорство, Список Желаний".

25 Отзывов на “Как я готовлю фотки для постов на блоге”


  • 1 a_b  [Московская область, Истринский район]

    Только метаданные в фото — это не DCIM, а EXIF :)

    А для всяких задач по нехитрым манипуляциям с фотографиями я для себя давно открыл и использую XNView. От его же автора — утилитка NConvert для командной строки, которая позволяет в скрипты встраивать довольно сложные задачи по манипуляции изображениями, и прога Resize Me! для Android, которая позволяет прямо на телефоне сжать фотографию до небольшого размера перед отправкой или выкладкой куда-то.

    Явный плюс — что всё это хозяйство регулярно обновляется. Не хочу разводить флейм — но необновляемый софт на компе, который не на 100% изолирован от внешнего мира — это таки пороховая бочка под задницей :)

  • 2 CS  [Москва]

    Ой! Щас поправлю! А DCIM это название папок же с фотика =)
    За новую инфу пасибо! Вот даже про ResizeMe щас в пост добавлю — пущай народ юзает!

    Да и не будем разволдить. Один фиг, тут и система необновляемая, считай. Я вообще потом думаю, а не создать ли образ этого всего и не взять ли топовый ноут и из-под Linux этот образ гонять на виртуалке и мозги не выносить с новыми осями =)

  • 3 Gride  [Киев, Украина]

    У меня все версии асидиси старше 3.25 вызывали только негативные ассоциации. Уже года четыре или пять как перешел на FastStone http://www.faststone.org/
    Прога бесплатная, работает стабильно, не вываливается как аська, есть пакетное переименование, пакетное преобразование (изменение размера, холста, и др.), работа с горячими клавишами, простенькое редактирование, удобный предварительный просмотр. А еще она библиотеку с превьюхами хранит где скажешь, а не в каталоге с картинками.
    Я много работаю с отфотографированными документами, фотографирую тома по 200-500 листов. С Фастстоуном реально круто работать.

  • 4 CS  [Москва]

    Пасибо! Посмотрел ссылочки. Там получается одна прога — вьювер, а втоая ресайзер и ренаймер?
    Асидися 5 версии базу данных тоже хранит где скажешь, так что тут норм.
    Я хрен знает. Переходить вот не буду, потому что меня всё устраивает. На заметку взял. Да и другие люди пост читать будут — им сгодится!

    Хех. Аська в виде миранды у меня до сих пор есть, и сравнение «…как аська» мне недоступно =))

  • 5 kostyag

    >>пожатая фотошопом оригинальная фотка 1024х768.
    Ну это ведь уже чудовищно мало, особенно когда хочется разглядеть большие и огромные щиты получше
    По моему скромному мнению надо увеличивать раза в два-три.

  • 6 CS  [Москва]

    Нет, не согласен. Фотки же даются как общий вид без деталей и детали отдельно.

  • 7 kostyag

    Иногда интересны те детали, на которые ты не акцентируешь внимание. :)
    Но 21 век, Full HD жи.

  • 8 EvilGremlin

    А чего скрипт для фотошопа не напишешь? Тогда и потребнсть а ACDSee практически отпадёт. И кстати да, XNView и NConvert всё то же самое умеют. Фотошоп для таких задач — overkill.

  • 9 Gride  [Киев, Украина]

    Faststone Resizer я не использовал. Я имел в виду FastStone Image Viewer. Одна прога умеет все: это и вьювер, и ресайзер, и небольшой редактор (часто использую чтобы замалевать личные данные или подчеркнуть важное на картинке, изменить яркость и контрастность для лучшей печати документа). И ничего лишнего. Надеюсь, из нее не сделают монстра, как в свою очередь сделали из ACDsee. Под «аськой» я как раз имел ввиду ACDsee.

    Кстати, где-то читал, что алгоритм jpeg разбивает изображение на квадратики 8*8 пикселей и уже дальше кастует на них разные функции. Поэтому, для уменьшения искажений следует ресайзить фотки до размеров, кратных 8 пикселям.

  • 10 CS  [Москва]

    kostyag Нет, это — нахер. Ну максимум может фотки раза в два увеличу относительно 2014х768, но не больше. Да и не все детали так нужно показывать: кому надо — и так разберётся, а кто не хочет разбираться — пускай идёт ко мне на консультации.

    EvilGremlin А какой именно? Мне бы накатать скрипт, чтобы он мог файлы из папки всосать слоями, и каждому слою дать имя по имени файла — вот это было бы круто!
    Там есть всякие Actions, но я ленюсь разбираться.
    А для чего ещё можно накатать скрипт — я не погу придумать. Crop? Levels? Но так это ж индивдуально для каждой фотки надо крутить…

    Gride А.. аська у меня — это ICQ.
    Ага, у JPEG так и есть.

  • 11 alx220  [Москва]

    А есть способ загрузить изображения в пост без Faster Insert? То есть используя только встроенные возможности Вордпресс?

    И еще подскажи, пожалуйста, как ты отключил превьюшки? Тупо в настройках или в код изменения вносил?

  • 12 CS  [Москва]

    Так вроде есть. Вот эта вот медиа-библиотека. Вставить изображение — и загружаешь. Но я НИКОГДА ей не пользовался ВООБЩЕ прям. Так что даже не знаю, что она может и как работает.

    Есть вариант порыться через functioncs.php. Я в настройках WP тупо поубирвал все размеры превьюшек из полей. И соврал — 150х150 оставил для того, чтобы WP при загрузке картинок мог их показывать превьюшками.
    Сейчас пост поправлю про это.

  • 13 electrofuhrer  [ЮВ МО]

    а я напротив, с асидиси свалил в инфранвью
    только там так-же,старые версии более вменяемые
    фастстоун есть смысл использовать для ОЧЕНЬ больших фото, подготовка растровых карт для походов, как пример.. остальное непереваривает картинки за 30 мегов

  • 14 Caesarion  [Новосибирск]

    А почему бы сразу фото не сжимать в 600*450? Сейчас ни то, ни сё: «оригинал» больше всего-навсего в 1,7 раза по каждой стороне, в самые маленькие мониторы входит с большим запасом, для печати не годится, а трафик всё равно тратится, и браузеру всё равно приходится масштабировать, хотя читателю зачастую достаточно картинок в статье.

    Можно поставить вопрос иначе: с учётом современных разрешений экранов не пора ли растянуть блог хотя бы до 1024?

  • 15 CS  [Москва]

    Caesarion Чтобы растянуть блог — надо тему переписать. Я это лет пять собираюь сделать так, чтобы ширина например не была меньше 600, а дальше варьировалась.

  • 16 Novodel

    Я когда писал рецепты в кулинарный блог, активно использовал XNView. Очень достойная замена ACDsee, может все то же и даже больше, но при этом шустер и не жрет ресурсы. Кроме собсно просмотра всего на свете, в нем есть одна удобная штука — Преобразования, в которой over дофига всяких фильтров и опций, и которые при этом могут собираться в сохраняемые сценарии. Я один раз подготовил и вылизал сценарий, и дальше все шло по накатанной — всунул в него пачку фоток, и на выходе получил готовый результат — переименованные фотки, нужного размера, без EXIF и с нужными водяными знаками и подписями. Потом проглядел серию, выкинул неудачные и/или лишние — и все, серия для публикации рецепта готова.

  • 17 alx220  [Москва]

    чтобы ширина например не была меньше 600, а дальше варьировалась.

    Вроде сейчас, наоборот, все сайты ориентируются на мобильные устройства. Нет?

  • 18 CS  [Москва]

    alx220 В смысле? Ну так мобилльное устройство само всё и умеет масштабировать же.

  • 19 alx220  [Москва]

    В смысле? Ну так мобилльное устройство само всё и умеет масштабировать же.

    А, ты только про картинки? Тогда да. Я думал, ты вообще про ширину слоя для статей.

  • 20 CS  [Москва]

    Не, я про всё-всё. Разве телефон не может уменьшить всю страницу до экрана?

  • 21 Андрей  [Киев]

    Для телефонного вебкита есть специальный тег в хедер страницы который заставляет телефонные браузеры правильно масштабировать страницы. Не помню какой :(
    Вот https://developer.mozilla.org/ru/docs/Mozilla/Mobile/Viewport_meta_tag

  • 22 CS  [Москва]

    Щас я его воткну. Ксткти, а можно сначала ДУМАТЬ, а потом писать? Найти ссылку и писать коммент, а не делать несколько комментов подряд?

    Тэг воткнул. Посмотрим, что будет.

  • 23 alx220  [Москва]

    Разве телефон не может уменьшить всю страницу до экрана?

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

  • 24 CS  [Москва]

    Да я ж говорю, как-нить надо будет переписать тему, чтобы у неё адаптивная ширина была. Скажем, минимум 600 по ширине, а если разрешение больше — то пущай растягивается.
    Я как-то начинал, а потом забил.

  • 25 Rem

    Меня удивило, что не рассматривался ImageMagick
    https://www.imagemagick.org/Usage/text/
    вот пример того, что оно умеет делать с текстом.
    Наложить полупрозрачную картинку — без проблем, с дублированием, с поворотом.
    Автоподгонка яркости — есть скрипты.
    Главная проблема в том, что это утилита командной строки, но один раз написать батник не проблема, как мне кажется.

Оставить отзыв

Вы должны войти на блог, чтобы оставить комментарий.