Зручне обрізання мініатюр публікацій?


32

Чи можна дозволити моїм користувачам визначити площу обрізання мініатюр публікації? Ескізи - це завжди наявні вкладені публікації, я б краще не створював додаткових вкладень на мініатюру.

Ескізи публікації повинні бути розміром 200x100 пікселів і надходити з одного із зображень, використаних у публікації. Тож у моєму ідеальному світі при натисканні на посилання "Встановити зображення" ви отримуєте огляд уже включених зображень, і коли ви клацаєте одне із них, ви можете самостійно визначити область обрізання (переміщуючи чи змінюючи розмір, але зберігаючи співвідношення сторін 2х1). Коли ви натискаєте "OK", мініатюра нового повідомлення зберігається з оригінальним вкладеним файлом (наприклад, у полі _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 медіа-галерею.
NetConstructor.com

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

Не соромтесь Майку, старший код завжди поганий на власні очі письменника. Це просто прогрес :). @Jan - у вашому прикладі користувальницького інтерфейсу мені здається, що розмір мініатюри публікацій якимось чином заздалегідь визначений. Чи можете ви сказати більше про це?
хакре

Відповіді:


11

Код все ще безлад, але він, здається, працює навіть у IE 8. Я планую випустити його у сховищі, але тим часом ви можете грати з моєю поточною версією . Для доступу до нього ви клацаєте "Редагувати зображення" при додаванні чи редагуванні зображення, воно замінює звичайний редактор зображень (їх дуже важко поєднувати). Оскільки більшість областей адміністратора використовує звичайний ескіз, і моя поточна версія редагує мініатюру повідомлення, може здатися, що код не має ефекту, але спробуйте, показавши мініатюру повідомлення, і вам слід побачити, як це змінилося.

Цей плагін вимагає, щоб мій Resizer Image On-Demand , який також все ще безлад, здійснив фактичну зміну розміру.

Приклад зображення в косинці


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

Мені також дуже цікаво, що / як ти це зробив! Будь ласка, поділіться кодом. Чи працює ваш код за допомогою медіатеки Wordpress за замовчуванням і чи дозволяє вам створити просту метабочку на екрані редагування публікацій, куди ви можете зателефонувати до певного зображення І скопіювати його лише для певного розміру, який ви створили, наприклад "new_thumb", як визначено через щось на зразок add_image_size ('new_thumb', 200, 100, правда) ;? Ідеальною ситуацією було б мати щось подібне до творця зображення заголовка з можливістю зміни кожного визначеного розміру зображення на основі окремих метаполев для кожного визначеного розміру.
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, але інший код. http://www.leonkessler.com/blog/?p=132

Ось ще один, використовуючи jcroery замість jcrop, http://www.talkincode.com/jcrop-extension-implementation-in-php-932.html

Хто готовий до нового плагіна, це, безумовно, буде популярним :)


У ядрі WordPress вже є код обрізання зображень (HTML, JS та PHP). Я думаю, хороший плагін міг би використати це повторно. Це не обов’язково, просто так сказати. Ви маєте рацію з приводу того, що приклад користувальницького інтерфейсу, зроблений Яном, потребує щось подібне.
хакре

@hakre, останній з Wyck, пов'язаний з ним, - jcrop, який був інтегрований в ядро ​​wp ще в 2.8 . Я пам'ятаю, як читав про це ще тоді, але не можу знайти будь-яку інформацію про нього, яка фактично використовується, окрім одного плагіна в сховищі, який по всіх облікових записах порушений.
мат

@matt: якщо він був інтегрований в ядро ​​(я не знаю всіх специфік інтерфейсу обрізання в ядрі прямо зараз, що є), я припускаю, що він використовується для функції інтерфейсу основного зображення. Ця функція недоступна постійно, але лише за наявності деяких бібліотек PHP або системних зображень. Вибачте за те, що я був неспецифічним, але я просто не ввійшов до основної реалізації. Але я знаю, що є;)
хакре

1

Якщо припустити, що ви вже додали підтримку поштових ескізів, оскільки ви говорите про параметр "Вибране зображення".

Якщо так, то в одному з варіантів є додавання нового розміру зображення до масиву для завантаження. Тож за замовчуванням у вас є мініатюра, середня, велика. У наступному біті коду це додає до цього асортименту четверте зображення, залежно від того, який розмір ви бажаєте. Цей біт коду буде додано до вашого файла function.php.

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

"new-thumb" = назва нового спеціального зображення
"200" = ширина
"100" = висота
"справжній" = опція жорсткого обрізання. Це змусить вирізати зображення до визначеної ширини / висоти. Без цього вона просто масштабується до пропорції.

Тепер, щоб відобразити нову мініатюру на сторінці або масиві публікацій, ви вставили б у свій HTML

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

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

1

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

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

Пам’ятайте, що все зображення буде завантажено, тому не використовуйте для цього свої 3MB оригінали.

Оновлення за запитом січня: Якщо ви хочете динамічного відсікання, врахуйте:

  • Для користувача = адміністратор, створіть CSS через PHP; ви можете просто посилання на php, який читає відповідні налаштування, і відповідно налаштувати параметри відсікання.
  • Для користувача = відвідувач, використовуйте 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/

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

Використовуючи цей підхід, wordpress може продовжувати створювати відповідні розміри зображення, як це зазвичай робиться, але якщо ви хочете спеціально змінити обрізану область будь-якого конкретного зображення, ви маєте можливість це зробити, що, в свою чергу, замінить автоматично сформоване зображення на цей розмір. Хммм ... хоча це звучить заплутаним читанням знову, саме цього я відчуваю.

В даний час я вважаю, що плагін зберігає ці власні розміри зображень у користувальницькому полі в публікації замість публікації для відповідного зображення.


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.