Как настроить уменьшение картинок с последующим увеличением в редакторе JCE.

1 звезда2 звезда3 звезда4 звезда5 звезда (Ещё нет рейтинга)
Loading ... Loading ...

Хотите оперативно получать новые уроки и статьи блога LAWANS.RU. Просто введите ВАШ e-mail на форме справа >>>

Привет Всем!

По просьбе одного из читателей моего блога, который спросил “Как делать через визуальный редакатор JCE уменьшение картинок с последующим увеличением?” я решил сделать ответ в виде небольшого поста.Так как тема полезная и актуальная!

В предыдущем посте  я писал про такой плагин как Image Manager Extended (Расширенный менеджер изображений). Именно с помощью него можно это сделать. Я упоминал в посте про это.
Для начала зайдём в Администрирование JCE – Профили – Профиль Default (или Ваш, который вы возможно уже создали под себя) и сделаем несколько настроек для него.
Для этого заходим на вкладку Параметры плагина и слева кнопку Расширенный менеджер изображений.

настройки Расширенный менеджер изображений.

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

Обратите внимание на поля Ширина, Высота и Качество эскизов, потом мы увидим по их умолчанию при ресайзе картинки.

Сохраним их и перейдём в любую статью для проверки. Нажимаем кнопку, указанную на рисунке.

кнопка редактора изображений

Выберем крупное изображение для проверки. Если изображение большое, то его предварительно мы можем обработать в редакторе, что я и сделаю. Однако можно и пропустить этот шаг. Для обработки нажмём сюда.

обработка изображения

И на вкладке Преобразование можно выбрать нужный Размер и Применить. Как видим здесь можно ещё обрезать изображение и повернуть. Целый мини редактор изображений.

вкладка Преобразование

Я ещё применил эффект осветления на вкладке Эффекты.

эффект осветления на вкладке Эффекты

И вот получили нужное нам изображение, и вставилась уже ссылка на него.

готовое изображение

Заметим, что изображение немного изменилось, как нам и требовалось. Единственное, я обвел размер, который вручную можно выставить, на тот который я подчеркнул. Он просто автоматом не сменился. А Ссылка автоматом уже вставилась.

Теперь переходим непосредственно к созданию превью. Нажимаем кнопку с плюсиком.

JCE создание превью

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

делаем thumbnail

После сохранения у нас в папке thumbnails (её мы тоже прописали в профиле) образовался файл превью.

готовый thumbnail

Далее перейдём на вкладку Всплывающие окна и выберем наш ранее подготовленный файлик увеличенной картинки.

подключаем всплывающее окно

Сохранимся. И проверим результат на сайте. Я думаю, у Вас всё получилось!

На этом всё. А я жду от Вас вопросов, благодарностей и комментариев  :smile:


У ВАС ведь есть ТЕЛЕФОН? Или mp3-player? А может даже планшет, ноутбук или игровая консоль!
Хочется, чтобы он был необычным и уникальным?
Заходите к нам – мы поможем.

  
  
{lang: 'ru'}

Похожие статьи

3 thoughts on “Как настроить уменьшение картинок с последующим увеличением в редакторе JCE.

  1. Как можно сделать максимальное допустимую ширину для изображения. Чтобы автоматически ширина изображения менялась если она превышает установленную норму. (Для авторов которые добавляют материалы с лицевой части сайта)
    С Уважением, Роман.

  2. Есть ли какая-то возможность и фото превюшки, и всплывающее изображение брать из внешнего источника? Например, я планировала использовать свой альбом на яндексе: он дает и маленькое, и большие изображения. И, соответственно, прямые ссылки на них.
    Метод научного тыка не помог. Т.е. если в превюшку (статью) вставить ссылку на маленькое изображение, а в Всплывающих окнах – большое, не отображается вообще ни одно из них. Хотя мелкое видно в редакторе, с сайта оно исчезает.
    Спасибо!

    • возможно ссылку на изображение не так вставили. Напишите свой сайт посмотрю.Если в редакторе видит значит на сайте криво ссылка выводится.Можете посмотреть в коде html как выглядит ссылка.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>