[Решено] Загрузка и вставка изображений с разными стилями в текст статьи

Главные вкладки

Аватар пользователя misterBald misterBald 4 мая 2014 в 1:27

Необходимо загружать изображения и вставлять их миниатюры в текст статьи, в любое место текста, делать обтекание справа, слева или просто картинка в отельном абзаце с выравниванием по центру. При нажатии на миниатюру, чтобы открывалось в Colorbox оригинальное изображение. Сейчас все это отлично работает в связке CKEditor + One Click Upload (кому интересно http://xandeadx.ru/blog/drupal/335 ).

Однако, требуется чтобы при загрузке изображения можно было выбирать стиль миниатюры (некоторые миниатюры поменьше, другие - побольше). В One Click Upload можно выбрать лишь один стиль миниатюр. В итоге приходится сначала вставлять картинки с миниатюрами одного размера, сохранять материал, лезть в настройки One Click Upload, менять стиль миниатюр, возвращаться к редактированию материала и наконец загружать картинки с миниатюрами другого размера. Не слишком в общем-то удобно. Может кто-то знает способ проще?

Комментарии

Аватар пользователя misterBald misterBald 5 мая 2014 в 21:21

Garin33 wrote:
вариант 1. https://drupal.org/project/insert
вариант 2. https://drupal.org/project/image_resize_filter[/quote]

Отлично, спасибо. Вариант с Image Resize Filter подходит как нельзя лучше.

Однако появилась проблема, связанная уже с CKEditor. Последний при изменении размера изображения делает это через атрибут style, в котором прописывает height и widht. Но Image Resize Filter не умеет читать из стиля, он воспринимает только кода у самого изображения (а не в стиле) прописаны атрибуты height и widht.

Такая проблема уже возникала, http://www.drupal.ru/node/71413 - вот тут. И даже есть решение вроде как. Я его попробовал, но не работает. Идея, там простая когда CKEditor загружается он ищет у изображений атрибут стайл, выковыривает из него и ширину и высоту и прописывает их в соответствующие атрибуты width и height. Все это реализуется в файле ckeditor.config.js , который и предлагает скачать человек, решивший проблему для D6. Но для D7 у меня этот файл не работает. Попытался просто кусок кода перенести - тоже не работает.

Короче, говоря... Кто-нибудь знает как заставить CKEditor прописывать размеры изображения не в style, а в width и height?

Аватар пользователя misterBald misterBald 6 мая 2014 в 0:07

Проблема решена. В файл ckeditor.config.js надо дописать код:

CKEDITOR.on('instanceReady', function (ev) {
// Ends self closing tags the HTML4 way, like <br>.
ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // Output dimensions of images as width and height
                if (element.name == 'img') {
                    var style = element.attributes.style;

                    if (style) {
                        // Get the width from the style.
                        var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
                            width = match && match[1];

                        // Get the height from the style.
                        match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
                        var height = match && match[1];

                        if (width) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                            element.attributes.width = width;
                        }

                        if (height) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                            element.attributes.height = height;
                        }
                    }
                }

                if (!element.attributes.style)
                    delete element.attributes.style;

                return element;
            }
        }
    });
});

Кроме того, в настройках One Click Upload необходимо отключить использование стилей изображения (поставить "нет" в пункте Использовать стили изображения)

Аватар пользователя kurl kurl 16 мая 2014 в 19:06

может ли быть какая-нибудь особенная нелюбовь у ie11 и image_resize_filter? Изменив размеры картинки в ckeditor (сжав картинку мышкой или прописав в свойствах картинки размеры) нажимаю "сохранить" и в материале вижу картинку с первоначальными размерами (ширина и высота в img прописаны исходные размеры). Теже действия в FF меняют размеры картинок нормально. Как можно масштабировать картинки в ckeditor и ie11?

Аватар пользователя kurl kurl 19 мая 2014 в 12:46

Click the "Rearrange" tab to check the order of the filters.
If using the Image Resize Filter on the "Filtered HTML" input format, you MUST ensure
A) The tag is in the list of allowed tags and
Dirol The "Image resize filter" is run BEFORE the "HTML filter".