Бесплатный русский плагин Comment Images Reloaded

На практике столкнулись с плагином Comment Images, который понравился нам и нашим клиентам. Но со временем были обнаружены некоторые аспекты его работы, которые нас не устраивали или виделись по-другому. В связи с этим, приняли решение переделать его «под себя» и первое, что захотелось изменить — это размер добавляемых комментаторами фотографий.

Comment Images Reloaded уменьшает размер файлов

Посетители никогда не будут тратить своё время на изменение размера изображения перед его публикацией в комментарии. Со 100% вероятностью пользователь загрузит свой файл в том виде, в котором он хранится на его устройстве. К примеру, если кто-то решит выложить фотографию с фотоаппарата, то её вес будет не менее 1 МБ. В наше время даже обычная мыльница выдает снимки в 2-3 МБ. Естественно, добавление подобных тяжёлых изображений пагубно отразится на весе страницы в целом.

Мы провели эксперимент. Взяли чистый тестовый сайтик на базе шаблона Basic и разместили на нём статью с одной картинкой. Вес странички составил 160 кБ (0,16 МБ). После этого добавили к статье 10 комментариев с фотографиями по 2.4 МБ. Вес страницы уже составлял целых 24.9 МБ!

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

Обдумав целесообразность данного функционала, решили сделать собственную версию плагина с возможностью вывода в комментариях изображений уменьшенного размера. Сейчас наш плагин Comment Images Reloaded даёт администратору ресурса возможность выбора величины отображаемой в комментах картинки: маленькая, средняя, большая и полная.

Если с помощью CIR конвертировать загруженные в эксперименте фото до максимальной величины Large (1024х1024 пикселей), то вес страницы составит всего 1.2 МБ вместо 25 МБ ранее, а само изображение вместо 2.4 МБ будет занимать 0,11 МБ. Не правда ли, приятный результат?

При необходимости  можно выбрать ещё меньший размер картинки  — Thumbnail (150х150 пикселей) или Medium (300х300 пикселей). В этом случае вес экспериментальной страницы составлял 0,32 МБ и 0,38 МБ соответственно.

Увеличение изображения в комментариях по клику

Далеко не для всех фотографий будут уместны размеры типа Thumbnail. Например, человек делится своей фотографией хорошего качества, с мелкими деталями или множеством объектов, а она после загрузки выводится в формате 150*150 и на ней ничего не разберёшь. Во-первых, это вызовет негативные эмоции у комментатора, во-вторых, фотография будет бесполезна для читателей.

Мы учли этот момент при разработке и сделали опцию увеличения изображения по клику. Теперь любую картинку можно развернуть на весь экран и посмотреть её в изначально загруженном качестве.

Ограничение загружаемых файлов картинок по весу

После выхода первых версий Comment Image Reloaded нас начали просить увеличить ограничение на размер картинок свыше 5MB. Поразмыслив, пришли к выводу, что существующее ограничение действительно не всегда уместно. Современные фотокамеры делают снимки куда потяжелей 5MB. С другой стороны, не все могут позволить своим пользователям загружать столь объёмные изображения. Многие владельцы сайтов могут быть существенно ограничены со стороны хостинга доступным пространством на сервере. Особенно это касается пользователей отечественных бесплатных и бюджетных хостинг-провайдеров.

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

Минимальная нагрузка CIR на сервер/хостинг

Ещё один момент, который не устроил нас в работе Comment Images — это излишняя нагрузка на серверную часть. Оказалось, что при работе плагин делает один запрос в базу данных для каждого отдельного комментария в статье. То есть, если в статье будет 100 комментариев, то при загрузке страницы плагин Comment Images сделает 100 запросов в базу данных, вне зависимости от того, есть ли в этих комментах картинки.

Если дополнительная нагрузка на сервер будет практически не заметна для сайтов с маленькой посещаемостью или малокомментируемых, то для крупных проектов это может сыграть очень злую шутку. Представьте, что на сайте с 500+ комментами в статьях одновременно загружают страницу несколько посетителей. Это сразу несколько тысяч запросов к базе данных и, как следствие, переизбыточная нагрузка.

В нашем Comment Images Reloaded мы сделали работу плагина таким образом, что вне зависимости от количества комментариев в статье, хоть несколько миллионов, он делает всего 2 запроса в базу данных! Это значительно увеличивает скорость работы сайта и минимизирует нагрузку на серверную часть.

Удаление изображений из панели редактирования комментариев

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

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

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

Приятные мелочи в настройках CIR

По просьбам пользователей сделали функцию замены стандартной надписи  «Выберите изображение для вашего комментария (GIF, PNG, JPG, JPEG)» на любую пользовательскую. Теперь можно написать более привлекательный на ваше мнение текст или добавить нужную пользователям информацию.

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

Отключение авторской ссылки в настройках плагина

Как вы могли заметить, в новых версиях Comment Images Reloaded появилась ссылка на наш сайт. Это связано с нашим стремлением максимально распространить свои продукты. Хотя ссылка закрыта с помощью мета-тега nofollow, мы понимаем, что большинство все равно предпочтут от неё избавиться.

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

Не нравиться ссылка — можете отключать, мы разрешаем!

Небольшие исправления и фиксы

В Comment Images была проблема с сохранением одной картинки сразу в нескольких каталогах хостинга. В CIR такой проблемы уже нет.

Так же мы пофиксили неработающую функцию по запрету добавления картинок к комментариям ко всем статьям и вынесли частично управление этим функционалом на страницу настроек плагина. Соответствующий выбор и кнопка в Comment Images была (внутри редактирования статьи, версия 1.24), но не работала.

Для удобства управлением функционалом плагина реализована страница с настройками, где всё просто и интуитивно понятно.

Возможность перехода с Comment Images на Comment Images Reloaded (CIR)

Все пользователи плагина Comment Images могут легко и безболезненно перейти на CIR. Нужно лишь скачать и установить наш плагин CIR, деактивировать Comment Images и зайти в настройки управления CIR. Далее выберите из списка понравившийся вам размер для изображений (Thumbnail, Medium, Large, Full) и нажмите кнопку «Конвертировать». Comment Images Reloaded автоматически найдёт все фотографии в комментариях, которые загружались с помощью плагина Comment Images , скопирует данные в свои настройки и выведет их уже в новом формате. При этом все данные Comment Images остаются без изменений.

Комментарии 36

  • Здравствуйте, Ваш плагин не работает.
    Устанавливал на двух разных темах и разные версии движка, более ранний и последний, также и шаблоны, более современный и более старый..
    Не выводит картинку напротив комментариев.

    • Влад, уточните — кнопка для выбора изображения под формой комментирования появляется, загрузка изображения выполняется? В консоли на странице Комментарии появилась колонка Изображение?

  • Здравствуйте, кнопка появляется для загрузки изображения, под формой комментирования, да. Написано: Select an image for your comment (GIF, PNG, JPG, JPEG): (кстати думаю было бы правильным это перевести для людей), правей > ОБЗОР, правей > Файл не выбран. Выбирается с компа изображение, прикрепляется. Напротив вместо «файл не выбран», появляется название файла, якобы прикреплено. Потом после того, как все поля заполнены, ничего не остается как нажать «комментировать». При этом нигде ни в админке, ни при подтверждении комментария, ни в загруженных медиа файлах этого файла не видно. Однако в разделе «комментарии» колонка «изображение» все таки появилась. Но в это поле ничего не подставляется. Скажите я правильно понимаю, этот плагин был Вами разработан ведь не только под Ваши шаблоны, но вероятно идея была использовать под любые шаблоны в свободном доступе? Или только под Ваши? Плагин действительно полезный, по этому столько внимания. Спасибо.

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

      • Выше уже писали о неработоспособности на определённых шаблонах, вот по ходу и мне такой шаблон попался. Можете хоть пояснить в чём заключался фикс и как можно пофиксить самому?
        Но если не можете то шаблон Moderna WP
        Доступен бесплатно http://bootstraptaste.com/moderna-wordpress-theme-free/

        • Макс, проблема была связана с фильтром, который срабатывал только для комментариев в формате html5. Сейчас эта проблема полностью устранена и работает корректно.
          Проверили с указанной вами темой — вывод опубликованных ранее комментариев с картинками проходит корректно, проблема в самой теме на этапе загрузки изображения. Возможно, используется не стандартная форма добавления комментария WordPress, поэтому не срабатывают фильтры плагина и фото банально не записывается на сайт и в базу.

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

      • Жду с нетерпением, потому что у вас просто суперский плагин! Но вот ссылки в комментах очень нужны, очень. Ссылки это важно, чтобы кликабельные были.

      • Да, подтверждаю глюк с некликабелльными ссылками!
        Версия плагина — «2.1.4». Как только плагин отключаешь — ссылки снова становятся кликабелльными.
        Порыл исходники — не понял, где косяк.

        • CS, главная проблема, из-за которой появляются некликабельные ссылки и другие конфликты вроде отсутствующих изображений, — отсутствие в конкретной теме поддержки html5 для списка комментариев. Без неё фильтр `comments_array` не отрабатывает.

          Функция, в которую вы вносили изменения — как раз таки делает попытку исправить эту ситуацию для вышеуказанных тем. Она подключается с такими параметрами приоритета, чтобы после нее еще сработали стандартные фильтры WordPress, которые запускают «магические» функции — автоматическая вставка ссылки вокруг URL адреса, добавление тега P, вставка видео по адресу ссылки и пр.

          Для следующей версии, мы протестируем снова этот момент. Возможно, еще какие-то особенности всплывут. Можете уточнить с какой именно темой у Вас возникла такая ситуация?

          Попробуйте добавить в functions.php своей темы эту строчку и проверить работу ссылок:

          add_theme_support( 'html5', array( 'comment-list' ) );
          • Охты ж как! Да, всё заработало!
            Тема у меня K2 перевода Lecactus, скорее всего как раз старой версии.

            А можно попросить маленький ликбез (я вероятно отстал от перемен в web) — что такое HTML5 и почему его надо поддерживать и чего он даёт?

          • CS, об HTML5 можно говорить бесконечно — уж больно много в нем возможностей, учитывая что спецификация все еще дополняется. Главное, что имеем сейчас — семантика, а именно теги, которые сразу говорят о своем содержимом (например, nav для навигации, header для заголовка, aside/footer — колонок и подвала, main/section/article — основные блоки сайта с контентом. Кроме того, HTML5 это версия языка HTML, которую рекомендует использовать W3.org.

            Если отвечать на вопрос исключительно в контексте нашего обсуждения — после включения поддержки, комментарии будут выводиться с новыми тегами (footer, aside, time и пр) + будет корректно срабатывать фильтр `comment_array` (в котором выводятся все прикрепленные изображения). Последнее — похоже на баг WordPress, но поскольку практически каждая тема сейчас включает поддержку html5 для списка комментариев, обошлись небольшой функцией.

      • Ребята! Кажется, я нашёл глюк и проблему. Рыть надо функцию «get_html5_comment_content( $comment_text )».
        У вас там написано так:

        		if ( is_numeric($cid) ) {
        			//ORIG:
        			return get_comment_text();
        

        Так вот функция «get_comment_text()» возвращает именно ТЕКСТ комментария без HTML-форматирования. И естественно, всё слетает нахрен.

        Пока я решил эту проблему обёрткой

        //CS-Add 1: Bad, Gives NoFollow @WordPress
        return make_clickable(get_comment_text());
        

        Но эта штуковина подставляет NoFollow в каждую ссылку, а это может быть плохо для тех, кому это важно (например мне — плохо). Сейчас ищу другие варианты получить полный текст комментария.

        Скорее всего вам (или нам) придётся поизучать систему фильтров WordPress: как он обрабатывает текст комментария перед его выводом пользователя и применить все эти фильтры к get_comment_text().
        Продублирую этот же текст в комментарии к тому посту.
        Если сейчас найду решение — сообщу его вам и здесь.

      • Всё! Разобрался! В общем, используйте там вызов

        return make_clickable(get_comment_text());

        И всё будет хорошо. WordPress по умолчанию добавляет NoFollow в ссылки из комментариев, так что всё в порядке — функционал штатный.
        Себе я код плагина поправил. А когда вы выпустите новую версию, то я её себе обновлю.
        УРА! =)

  • Плагин бомба! Но к сожалению он конфликтует с мобильным меню моей темы (тема u-greate от гудвина) ((( Пришлось убрать(((((((((((((

    • Василий, мы проверили работу плагина на этой теме — все отлично работает.
      Попробуйте отключить все плагины и ещё раз проверить работу CIR. Если проблема не исчезнет, пришлите нам адрес сайта и уточните, в чем именно выражается конфликт.

      • Я пробовал отключать все плагины — проблема не исчезла. Зайдите на сайт с мобильного устройства в любой пост на сайте actualremont.ru
        При нажатии на меню, перекидывает в самый низ страницы. Т.е. меню не открывается как нужно, оно открытое находится в конце страницы.
        При отключении вашего плагина, все отображается нормально.

          • И вправду глюк пропал, спасибо. А где в плагине можно поменять размеры? Которые в плагине даны 150*150, 300*300 и т.п. меня не устраивают. Т.к. некоторые картинки обрезаются и выглядит это не айс. Можно как-то сделать, чтобы например задать размер 600 на 600 и высота или ширина картинки становилась 600 пикселей, а второй размер не 600, а подстраивался под этот размер? Блин, не могу сформулировать правильно мысль.

          • Comment Images Reloaded использует стандартные и пользовательские миниатюры WordPress. Если не устраивают стандартные — поставьте плагин для создания миниатюр с пользовательскими размерами. CIR их автоматически подхватит и вы сможете их использовать.

  • Добрый день.
    Хотел поставить Ваш плагин, все хорошо встало, все настроил. Кроме увеличения. У меня стоит плагин wp jquery lightbox, и когда я включаю функцию увеличения по клику, то у меня получается что срабатывает и плагин и ваша функция.
    Я знаю как это исправить, нужно просто в коде сделать так, чтобы по нажатию на миниатюру, открывалась полное изображение (в общем, ). Тогда мой плагин подхватит изображение. Но, где это сделать? Где вывод изображения происходит?

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

      1. Установите плагин FunctionsPHP, активируйте его и нажмите Изменить (в списке плагинов под названием плагина).
      2. Добавьте следующий код и сохраните файл:

      function cir_js_file(){
      
      	include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
      	if ( wp_script_is('comment-images-reloaded') && is_plugin_active( 'comment-images-reloaded/comment-image-reloaded.php' ) ) {
      
      		wp_dequeue_script( 'comment-images-reloaded' );
      		wp_enqueue_script( 'my-comment-images-reloaded', plugins_url( 'comment-images-reloaded/js/cir.min.js' ), array( 'jquery' ), false, true );
      		wp_dequeue_style( 'magnific' );
      	}
      }
      add_action( 'wp_enqueue_scripts', 'cir_js_file', 999 );

      3. В меню Настройки -> Comment Images Reloaded активируйте опцию Включить увеличение (зум) картинок по клику (работает с jQuery скриптом Magnific)

      Описанный прием отключит скрипт и стили встроенного зума. Этот код не сработает внутри темы, будьте внимательны

        • Владислав, добавьте после первой строчки этот код:

          include_once( ABSPATH . 'wp-admin/includes/plugin.php' );

          Или просто скопируйте код выше, он исправлен.

          • Спасибо! Помогло!

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

          • Владислав, отлично!

            За сообщение о баге спасибо огромное, проверим и исправим

  • Здравствуйте!
    Возникла проблема с плагином после перехода на https:
    http://prnt.sc/d3bblu
    Ссылки на миниатюры остались абсолютными, в результате на странице есть «небезопасное содержимое»… И миниатюра в теле комментария почему-то не загружается, хотя, в папке «uploads» эти файлы есть.

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

    Надеюсь на помощь и поддержку. Спасибо.

    • Добрый день, Вадим! Ссылки на миниатюры добавляются «на лету».
      По поводу того, чтобы сохранялись изображения после деактивации плагина, к сожалению, мы ничем не сможем помочь! Метаданные о картинках хранятся в базе отдельно от комментария. Уведомление об этой проблеме добавлено в список задач по плагину и наши специалисты попытаются исправить ее в обновлении.

  • Здравствуйте! Как и у предыдущего комментатора у меня возникла такая же проблема после перехода на https
    Можно ли исправить это как-то «ручками»? В смысле подправить ссылки в каком-то файле.
    Заранее спасибо за ответ.

    • Андрей,

      да, есть такая возможность — через базу данных. Есть плагин патч специально для этой цели. Опубликуем и я напишу ссылку на скачивание

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

wp-puzzle.com logo