Вставка изображений в статью блога

[MaximRa]

При создании статьи в ее текст с помощью стандартных инструментов можно вставить картинку, оригинал которой, скажем, имеет ширину 800px. При показе статьи видим, что в картинка представлена кодом: 

<img src="http://www.oc-store.mysite/image/catalog/1-810.jpg" style="width: 800px;">

Подскажите, пожалуйста, кто вставляет текст  style="width: 800px;" ? 

[sitecreator]

Редактор Summernote (https://summernote.org/) вставляет.

Вставляет реальную ширину изображения.

Так уж задумано в Summernote , похоже.

Он везде так вставляет, а не только в статье.

 

Вот пример картинки:

 

 

 

 

вот информация об этом изображении:

 

 

 

 

вот мы вставили эту картинку:

 

 

 

 

 

В актуальной версии родного редактора есть кнопка "Original size"

Нажимаем ее и стиль удаляется полностью.

 

 

 

В итоге получаем пустой стиль:

 

 

Но такой кнопочки нет в редакторе из поставки Опенкарта.

Печаль?

Что же делать?

Сделать кастомные настройки для вашего редактора.

 

Можно установить редактор актуальной версии. Не забыть при этом поправить код opencart.js

В опенкарт используется уже довольно устаревшая версия редактора аж от 2016 года.

Хотя актуальная датирована 2019-м (май).

 

В принципе могу подготовить решение со свежей версией редактора и расширенными возможностями. В виде модуля, думаю, что бесплатного. И совместимого с True File Manager  (Продвинутый файловый менеджер и редактор изображений).

 

[AlexDW]

14 минут назад, sitecreator сказал:

Можно установить редактор актуальной версии. Не забыть при этом поправить код opencart.js

там не все так просто как кажется, и одними правками в opencart.js не обойтись

потому что разные версии подключаются по разному

 

и при установке новой версии summernote вместо штатной - велики шансы поиметь проблем, в зависимости от версии движка

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

типа как здесь

 

[sitecreator]

11 минут назад, AlexDW сказал:

там не все так просто как кажется,

 

я неплохо знаю этот редактор благодаря работе с его разными версиями на разных версиях опенкарт.

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

 

вот этот модуль работает со всей линейкой Summernote

 

 

А рабочее решение нормального Summernote с расширенным функционалом под опенкарт 3 я уже сдедал.

Как только одобрят модераторы, то будет доступно для скачивания.

 

[sitecreator]

Свежий и продвинутый Summernote для Opencart 3 от sitecreator выглядит так:

 

 

 

 

 

[sitecreator]

Подготовил отдельное бесплатное решение.

Будет доступно после одобрения модератором.

 

Проверено на Opencart 3.0 актуальной версии и, соответственно, на OcStore 3.0.

 

В принципе, если будет у публики интерес могу подготовить для Opencart 3.0 другие редакторы также. Как альтернативы редактору Summernote.

 

 

 

[Tom]

6 часов назад, MaximRa сказал:

При создании статьи в ее текст с помощью стандартных инструментов можно вставить картинку, оригинал которой, скажем, имеет ширину 800px. При показе статьи видим, что в картинка представлена кодом: 

<img src="http://www.oc-store.mysite/image/catalog/1-810.jpg" style="width: 800px;">

Подскажите, пожалуйста, кто вставляет текст  style="width: 800px;" ? 

Вставили картинку,закончили писать статью, нажали на символ исходного кода </> и вместо style="width: ....px;"  вставляете class="img-responsive", закрываете нажатием на </> режим исходного кода, сохраняете.

Змінено 11 листопада 2019 користувачем Tom

[MaximRa]

6 часов назад, Tom сказал:

Вставили картинку,закончили писать статью, нажали на символ исходного кода </> и вместо style="width: ....px;"  вставляете class="img-responsive", закрываете нажатием на </> режим исходного кода, сохраняете.

 

Во, это железобетонное решение... Не знал о существовании такой функции )

Змінено 11 листопада 2019 користувачем MaximRa

[MaximRa]

7 часов назад, sitecreator сказал:

Подготовил отдельное бесплатное решение.

Будет доступно после одобрения модератором.

 

Проверено на Opencart 3.0 актуальной версии и, соответственно, на OcStore 3.0.

 

В принципе, если будет у публики интерес могу подготовить для Opencart 3.0 другие редакторы также. Как альтернативы редактору Summernote.

 

Интересно, а можно сделать так, чтобы при наличии картинок в статье к ним подтянулся современный посмоторщик картинок? Типа все картинки с статье увеличены и по кругу запущены. Типа Lightbox

[MaximRa]

1 час назад, MaximRa сказал:

 

Интересно, а можно сделать так, чтобы при наличии картинок в статье к ним подтянулся современный посмоторщик картинок? Типа все картинки с статье увеличены и по кругу запущены. Типа Lightbox

 

Достаточно легко подключил этот скрипт. Хорошо. Вот инструкция: https://lokeshdhakar.com/projects/lightbox2/

Змінено 11 листопада 2019 користувачем MaximRa

[sitecreator]

8 часов назад, MaximRa сказал:

Типа Lightbox

 

было бы логично подключить Magnific Popup, раз уж он используется уже в опенкарт 3.

Смысл подключать дополнительные скрипты с подобным функционалом?

Но ваше право подключать любой иной.

Включу его (Magnific Popup) в свою сборку Summernote.

И в принципе можно повесить самый разный доп. функционал на картинку. Реализуется через модули/плагина к Summernote.

Можно создавать собственные плагины при отсутствии необходимого функционала.

[MaximRa]

2 часа назад, sitecreator сказал:

было бы логично подключить Magnific Popup, раз уж он используется уже в опенкарт 3.

 

Я за логичность :-) Просто благодаря наличию понятной инструкции легко установил ЛайтБокс. А вот сейчас, после Ваших слов, заинтересовался Magnific Popup коль он уже стоит... 

[MaximRa]

В принципе и его подключил без проблем... Спасибо за информацию.

[sitecreator]

Кстати, у стандартного способа вставки изображений есть серьезный недостаток.

Который приводит к неудобствам при переносе контента с домена на домен или даже просто при смене протокола http на https.

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

 

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

[MaximRa]

12 часов назад, sitecreator сказал:

Кстати, у стандартного способа вставки изображений есть серьезный недостаток.

 

Да, это кошмар

[Alexxxxxx]

Очень простое и эффективное решение от Tom:

"Вставили картинку,закончили писать статью, нажали на символ исходного кода </> и вместо style="width: ....px;"  вставляете class="img-responsive", закрываете нажатием на </> режим исходного кода, сохраняете."

 

Удаление "Продвинутого редкатора" (True Summernote for Opencart 3 Свежий и продвинутый редактор) 

Не восстанавливает старый редактор!