Удобная обрезка миниатюр сообщений?


32

Есть ли способ позволить моим пользователям определять область обрезки миниатюры сообщения? Миниатюры всегда являются существующими вложенными файлами, я бы не стал создавать дополнительные вложения для каждого миниатюры.

Миниатюры постов должны быть размером 200x100 пикселей и взяты из одного из изображений, использованных в посте. Таким образом, в моем идеальном мире, когда вы нажимаете ссылку «Установить рекомендуемое изображение», вы получаете обзор уже включенных изображений, а когда вы нажимаете одно из них, вы можете самостоятельно определить область обрезки (перемещая или изменяя ее размер, но сохраняя соотношение сторон 2х1). Когда вы нажимаете «ОК», миниатюра нового сообщения сохраняется с исходным вложением (например, в _wp_attachment_metadata['sizes']['post-thumbnail']поле метаданных), а не как новое вложение. Использование изображения, которое уже используется в качестве миниатюры поста для другого поста, не должно быть разрешено или, по крайней мере, дает предупреждение.

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

Есть ли плагин, который делает то, что я хочу, или который я могу легко расширить для своих нужд?

Обновление: пример пользовательского интерфейса

Мне очень нравится интерфейс средства выбора изображений в адресной книге Mac OS X: вы выбираете изображение и изменяете размер миниатюры миниатюр с фиксированным соотношением с помощью ползунка. Вы также можете перетащить базовое изображение вокруг. Вы можете расширить эту идею до нескольких размеров изображения (у меня есть, post-thumbnailи post-thumbnail-1/2это половина этого размера, например). Позвольте пользователю выбрать размеры, которые он сейчас редактирует, с помощью флажков и нарисуйте соответствующие прямоугольники обрезки на экране.

Обрезка изображения адресной книги в действии


1
@Jan Fabry - Мой самый первый платный проект WordPress был плагином для обрезки изображений до того, как обрезка появилась в WordPress. Это значительно отличалось от того, о чем вы просили, или я бы включил его в качестве ответа. Но то, что вы хотите, не должно быть слишком сложным, если вы мотивированы ...
MikeSchinkel

1
@Mike: я видел это однажды на вашем сайте, и я надеялся, что это будет где-то доступно. Даже если он не помечает все пункты моего (обширного) списка пожеланий, он может стать хорошим началом.
Ян Фабри

@Mike - мне также было бы очень интересно просмотреть любой код, который вы могли создать или изменить, связанный с обрезкой изображения. Я отчаянно пытался добавить jcrop в пользовательский метабокс, который позволял бы добавлять и обрезать изображения, в то же время используя встроенную галерею Wordpress Media.
NetConstructor.com

Привет @Jan Fabry и @ NetConstructor.com - я только что просмотрел код, и, поскольку это был мой первый плагин для WP, я слишком стесняюсь его выпускать, это так плохо. Я бы хотел поработать над новым решением для выпуска здесь, но это может занять некоторое время ...
MikeSchinkel

Не стесняйся, Майк, старый код всегда плох в глазах автора. Это просто прогресс :). @Jan - в вашем примере пользовательского интерфейса мне кажется, что размер миниатюры поста как-то предопределен. Можете ли вы сказать больше об этом?
Хакре

Ответы:


11

Код все еще беспорядок, но, похоже, он работает даже в IE 8. Я планирую выпустить его в репозитории, но пока вы можете поиграть с моей текущей версией . Для доступа к нему вы нажимаете «Редактировать изображение» при добавлении или редактировании изображения, оно заменяет обычный редактор изображений (их очень сложно объединить). Так как большая часть административной области использует обычные миниатюры, а моя текущая версия редактирует миниатюру сообщений, может показаться, что код не имеет никакого эффекта, но попробуйте его, показав эскиз сообщения, и вы увидите, что он изменится.

Этот плагин требует моего Resizer Image Resizer , который также все еще беспорядок, для фактического изменения размера.

Пример изображения в кадре


код готов к выпуску еще? может GitHub это? Я умираю, чтобы интегрировать подобную функциональность в мой котел
Mild Fuzz

Мне также очень интересно, что / как ты это сделал! Пожалуйста, поделитесь кодом. Работает ли ваш код с использованием библиотеки мультимедиа WordPress по умолчанию и позволяет ли вам создать простой метабокс на экране редактирования поста, где вы можете вызвать конкретное изображение и скопировать его только для определенного размера, который вы создали, например, как "new_thumb", как определено через что-то вроде add_image_size ('new_thumb', 200, 100, true) ;? Идеальной ситуацией было бы создание чего-то похожего на создатель изображения заголовка с возможностью изменять каждый определенный размер изображения на основе отдельных метабоксов для каждого определенного размера.
NetConstructor.com

@JanFabry Вы уже выпустили этот код в качестве плагина? Я хотел бы рекомендовать это кому-то, кто нуждается в этой функциональности!
Чип Беннетт

@ jan-fabry Как прошла эта функция? Любой успех?
Стивен

4

Лучше всего использовать обрезку изображения на основе JavaScript, а затем php в сочетании с ImageMagick или Image GD.

Это должно было бы быть записано в ваши функции или как плагин, поскольку я не знаю, из рук вон каких-либо готовых плагинов WordPress, что удивительно.

Существует обрезка изображения YUI с возможностью сохранения на основе php http://developer.yahoo.com/yui/examples/imagecropper/conn_crop.html

Вот другой учебник о том, как использовать jquery cropper с php
http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/

Третий вариант очень похож на приведенную выше ссылку, использующую тот же jquery cropper, но другой код. http://www.leonkessler.com/blog/?p=132

Вот еще один пример использования jcrop jquery: http://www.talkincode.com/jcrop-extension-implementation-in-php-932.html.

Кто хочет новый плагин, это наверняка будет популярно :)


В ядре WordPress уже есть код обрезки изображений (HTML, JS и PHP). Я думаю, что хороший плагин будет использовать это снова. Это не обязательно, просто сказать так. Вы правы в том, что пример пользовательского интерфейса, нарисованный Яном, нуждается в чем-то подобном.
hakre

@hakre, последнее, с чем связался Вайк, это jcrop, который был интегрирован в ядро ​​wp еще в 2.8 . Я помню, что читал об этом в то время, но я не могу найти никакой информации о том, что он действительно используется, кроме одного плагина в хранилище, который по всем учетным записям не работает.
Мэтт

@matt: если он был интегрирован в ядро ​​(я не знаю всех подробностей об интерфейсе кадрирования в ядре, который там сейчас находится), я предполагаю, что он используется для функции интерфейса образа ядра. Эта функция недоступна постоянно, но только если доступны определенные библиотеки PHP или системные образы. Извините за то, что я не настолько конкретен, но я просто не включился в основную реализацию. Но я знаю, что есть один;)
Хакре

1

Предполагая, что вы уже добавили поддержку пост-миниатюр, так как вы говорите об опции «Featured Image».

Если это так, у вас есть возможность добавить новый размер изображения в массив загрузки. Так что по умолчанию у вас есть миниатюра, средняя, ​​большая. В следующем фрагменте кода это добавляет 4-е изображение к этому ассортименту в зависимости от желаемого размера. Этот бит кода будет добавлен в ваш файл functions.php.

add_image_size( 'new_thumb', 200, 100, true );

"new-thumb" = имя нового пользовательского изображения
"200" = ширина
"100" = высота
"true" = опция жесткого кадрирования. Это заставит изображение обрезаться до определенной ширины / высоты. Без этого он просто масштабируется до пропорции.

Теперь, чтобы отобразить новую миниатюру на странице или в массиве записей, вы должны вставить следующее в ваш HTML

<?php the_post_thumbnail('new_thumb'); ?>

@cnix: Спасибо за этот ответ, но это не то, что я ищу. Я хочу, чтобы конечный пользователь мог определить область, которая должна быть обрезана, а не я как дизайнер сайта. Таким образом, область может варьироваться от изображения к изображению.
Ян Фабри

1

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

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

Помните, что будет загружено все изображение, поэтому не используйте для этого оригиналы объемом 3 МБ.

Обновление в соответствии с запросом января: если вы хотите динамическое вырезание, подумайте:

  • Для пользователя = администратор, создайте CSS через PHP; Вы можете просто связаться с php, который читает соответствующие настройки и настроить параметры отсечения соответствующим образом.
  • Для user = посетитель используйте JavaScript, чтобы изменить параметры отсечения в атрибуте стиля изображения.
  • В качестве менее инвазивного решения рассмотрите возможность создания шорткода (с помощью отличного плагина Shortcode Exec PHP), например, [thumb w = ?? h = ??] url [/ thumb], который вы можете перевести на соответствующий тег HTML с помощью встроенного CSS.

Действительно, вы можете выполнять обрезку с помощью CSS, чтобы избежать нескольких размеров, но как бы вы позволили пользователю (автору сообщения) определить область обрезки, которая должна быть показана?
Ян Фабри

Пожалуйста, смотрите изменения выше.
Рафаэль

Спасибо за ваше разъяснение. Это предполагает, что пользователь знает местоположения пикселей желаемой области обрезки? Я на самом деле ищу более графический способ (например, текущий редактор изображений, но предназначенный для размещения миниатюр, а не обычных миниатюр).
Ян Фабри

Я надеюсь, что вы хотите, чтобы это был плагин, а не какой-то взлом. Вы можете указать некоторые параметры по умолчанию, которые в большинстве случаев будут достаточно: углы, центр, центрирование по краям и т. Д. (Все легко вычисляются). Я бы воздержался от предоставления бесплатного входа, так как люди могут испортить поток сайта, если они попадут в дерьмо. Я полагаю, что предлагать графический определитель клипов (см. Zenphoto для реализации) - это хорошо, но принципы использования значений, как бы они ни были получены, остаются прежними; вам просто нужно построить графический интерфейс. В этом я не могу вам помочь.
Рафаэль

1

Есть старый плагин под названием WP Post Thumbnail, который мы иногда используем. Она не идеальна, и есть некоторые незначительные ошибки в последней версии WP (она не обновлялась с 2008 года, поэтому она не обязательно надежна). http://wordpress.org/extend/plugins/wp-post-thumbnail/


1

Я полагаю, что вы ищете это: http://wordpress.org/support/topic/scissors-for-wordpress-29-also-works-on-30-hurray

Я не пробовал это, но он должен предложить вам функциональность, которую вы ищете.

Оригинальная страница плагина здесь. http://wordpress.org/extend/plugins/scissors/

Мне это нужно для проекта, над которым я тоже работаю.


Спасибо за предложение. Я посмотрел на Ножницы (и знал, что кто-то обновил его до 3.0), но я думаю, что он слишком гибок для того, что я хочу: должен обрезаться, чтобы обрезать до заранее определенного размера. Ножницы могут сделать гораздо больше, и поэтому могут запутать моих конечных пользователей.
Ян Фабри

1

Я думаю, что окончательное решение этой проблемы было бы изменить плагин с http://www.seoadsensethemes.com/wordpress-wp-post-thumbnail-plugin/

и настройте его так, чтобы любые пользовательские размеры изображений, определенные в вашем файле functions.php (используя add_image_size( 'new_thumb', 200, 100, true );), автоматически использовались, а затем получали код для замены (или расширения) ссылки «редактировать», когда вы хотите изменить изображение.

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

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


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.