Новости Joomla

Модификация WT JShopping products anywhere - Uikit макетИтак, дано: музыкальный журнал, в котором...

Модификация WT JShopping products anywhere - Uikit макетИтак, дано: музыкальный журнал, в котором...

Модификация WT JShopping products anywhere - Uikit макетИтак, дано: музыкальный журнал, в котором представлены новости, интервью, рецензии и есть небольшой магазин на JoomShopping. Возникла необходимость внутри Joomla статей вставлять упоминание релиза и кнопочку «добавить в корзину». Я взял плагин WT JShopping products anywhere Сергея Толкачева (@webtolkru). Плагин отображает название товара и ссылку. При помощи напильника, ИИ и навыков вёрстки появился Uikit макет для шаблонов на базе Yootheme Pro.Учитываается мобильная версия - телефоны и ipad.Кнопка добавления в корзину работает по Ajax и появляется всплывающее окно (Notification Bar от Uikit) с информацией.Пока это базовый вариант, требующий доведения до лоска, однако он уже работает и его можно применять на проектах.Взять макет можно здесь.А плагин вставки товаров в материалы можно забрать здесь.Приветствуется доведение до ума и оформление в виде PR.

WT Content Image Gallery v.1.2.3 - плагин галереи изображений для Joomla

WT Content Image Gallery v.1.2.3 - плагин галереи изображений для Joomla

👩‍💻 WT Content Image Gallery v.1.2.3 - плагин галереи изображений для Joomla.Пакет плагинов галереи изображений и видео для вставки в материалы и модули Joomla, а так же везде, где работают плагины группы content. Поддержка собственных макетов вывода для галерей. Смешанные фото+видео галереи. Плагин создан как замена Simple Image Gallery и поддерживает синтаксис {gallery}{/gallery}.👩‍💻 v.1.2.3. Что нового?- Обработка вступительного и полного текста для материалов Joomla. Добавлена обработка шорткодов в полном и вступительном текстах материалов Joomla.- Системные требования. Повышены минимальные требования до Joomla 5 и PHP 8.1.- Мелкие правки. Исправлена ошибка работы макета по умолчанию в плагине контента.- Joomla 6. Пакет плагинов успешно протестирован на Joomla 6.Страница расширения.GitHub расширенияJoomla Extensions Directory@joomlafeed#joomla #расширения

0 Пользователей и 1 Гость просматривают эту тему.
  • 13 Ответов
  • 6152 Просмотров
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Я немного не понял как подключать картинки svg.
Нужно ли писать всю эту конструкцию, или можно обойтись короче?
Код
@font-face {
font-family: 'IcoMoon';
src: url('../../../media/jui/fonts/IcoMoon.eot');
src: url('../../../media/jui/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), url('../../../media/jui/fonts/IcoMoon.woff') format('woff'), url('../../../media/jui/fonts/IcoMoon.ttf') format('truetype'), url('../../../media/jui/fonts/IcoMoon.svg#IcoMoon') format('svg');
font-weight: normal;
font-style: normal;
}


Вот пример еще создал тут:
http://jsfiddle.net/od49bked/

Можно ли подключить по другому? что был какой то файл был, и из него вся эта конструкция вытаскивалась, а не прямо в index.php стояла.
Можно ли сократить код?
И будет ли это работать в разных браузерах?
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Поясните как подключать svg?
« Ответ #1 : 26.12.2014, 00:36:40 »
Если речь идет о шрифте, то в CSS шаблона в самом начале прописываете всю эту конструкцию.
Указанный вами пример демонстрирует подключение отдельной картинки в svg. По сути, svg - это картинки, представленные в виде XML.
Можно туже отдельную картинку (и это более рекомендованный способ) представить в пожатом виде:
url("data:image/svg+xml;base64,тут код в base64") - в этом случае отдельных файлов не будет, все будет в CSS шаблона
« Последнее редактирование: 26.12.2014, 00:48:17 от AlekVolsk »
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Re: Поясните как подключать svg?
« Ответ #2 : 26.12.2014, 00:39:19 »
Если речь идет о шрифте, то в CSS шаблона в самом начале прописываете всю эту конструкцию.
Речь о иконках svg.
А можно без дополнительных файлов обойтись?
Все в один залить это все и пусть себе там лежит? Или так не стоит делать?
Как в примере я показал.
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Re: Поясните как подключать svg?
« Ответ #3 : 26.12.2014, 00:46:43 »
Можно туже отдельную картинку (и это более рекомендованный способ) представить в пожатом виде:
url("data:image/svg+xml;base64,тут код в base64") - в этом случае отдельных файлов не будет, все будет в CSS шаблона
А если мне много картинок нужно сделать? ну скажем штук 10. То нужно писать к каждой картинке такое:
url("data:image/svg+xml;base64,тут код в base64")
Или можно все картинки в одно запихать?
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Поясните как подключать svg?
« Ответ #4 : 26.12.2014, 00:48:05 »
Каждую отдельно так писать, как правило она указывается в backgroung.
Это все равно будет работать быстрее подключенного шрифта или кучи картинок в файлах.
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Re: Поясните как подключать svg?
« Ответ #5 : 26.12.2014, 00:52:58 »
Каждую отдельно так писать, как правило она указывается в backgroung.
Это все равно будет работать быстрее подключенного шрифта или кучи картинок в файлах.
А что именно шифровать в base64?
Все это:
Код
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-cart" viewBox="0 0 1024 1024">
<title>cart</title>
<path class="path1" d="M384 928c0 53.019-42.981 96-96 96s-96-42.981-96-96c0-53.019 42.981-96 96-96s96 42.981 96 96z"></path>
<path class="path2" d="M1024 928c0 53.019-42.981 96-96 96s-96-42.981-96-96c0-53.019 42.981-96 96-96s96 42.981 96 96z"></path>
<path class="path3" d="M1024 512v-384h-768c0-35.346-28.654-64-64-64h-192v64h128l48.074 412.054c-29.294 23.458-48.074 59.5-48.074 99.946 0 70.696 57.308 128 128 128h768v-64h-768c-35.346 0-64-28.654-64-64 0-0.218 0.014-0.436 0.016-0.656l831.984-127.344z"></path>
</symbol></defs>
</svg>
Можно по подробнее?
Как нужно это все писать?
или ссылку на какой нить материал где это описывается.
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Поясните как подключать svg?
« Ответ #6 : 26.12.2014, 00:56:56 »
У вас есть отдельный готовый svg-файл? открываете его в Notepad++, выделяете весь текст (Ctrl+A), далее выполняете команду меню: Плагины - MIME Tools - Base64 Encode. Получившийся код копируете в CSS, в нужное место. Файл svg закрываете без сохранения. Все.
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Поясните как подключать svg?
« Ответ #7 : 26.12.2014, 00:58:08 »
В частности, из вашего вышеприведенного svg должно получится следующее:
Код
PHN2ZyBkaXNwbGF5PSJub25lIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KPGRlZnM+DQo8c3ltYm9sIGlkPSJpY29uLWNhcnQiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPg0KCTx0aXRsZT5jYXJ0PC90aXRsZT4NCgk8cGF0aCBjbGFzcz0icGF0aDEiIGQ9Ik0zODQgOTI4YzAgNTMuMDE5LTQyLjk4MSA5Ni05NiA5NnMtOTYtNDIuOTgxLTk2LTk2YzAtNTMuMDE5IDQyLjk4MS05NiA5Ni05NnM5NiA0Mi45ODEgOTYgOTZ6Ij48L3BhdGg+DQoJPHBhdGggY2xhc3M9InBhdGgyIiBkPSJNMTAyNCA5MjhjMCA1My4wMTktNDIuOTgxIDk2LTk2IDk2cy05Ni00Mi45ODEtOTYtOTZjMC01My4wMTkgNDIuOTgxLTk2IDk2LTk2czk2IDQyLjk4MSA5NiA5NnoiPjwvcGF0aD4NCgk8cGF0aCBjbGFzcz0icGF0aDMiIGQ9Ik0xMDI0IDUxMnYtMzg0aC03NjhjMC0zNS4zNDYtMjguNjU0LTY0LTY0LTY0aC0xOTJ2NjRoMTI4bDQ4LjA3NCA0MTIuMDU0Yy0yOS4yOTQgMjMuNDU4LTQ4LjA3NCA1OS41LTQ4LjA3NCA5OS45NDYgMCA3MC42OTYgNTcuMzA4IDEyOCAxMjggMTI4aDc2OHYtNjRoLTc2OGMtMzUuMzQ2IDAtNjQtMjguNjU0LTY0LTY0IDAtMC4yMTggMC4wMTQtMC40MzYgMC4wMTYtMC42NTZsODMxLjk4NC0xMjcuMzQ0eiI+PC9wYXRoPg0KPC9zeW1ib2w+PC9kZWZzPg0KPC9zdmc+
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Re: Поясните как подключать svg?
« Ответ #8 : 26.12.2014, 01:09:45 »
Что то у меня не получается сделать(
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Re: Поясните как подключать svg?
« Ответ #9 : 26.12.2014, 01:11:01 »
Пишу вот так:
Код
background: url(data:image/svg+xml;base64,PHN2ZyBkaXNwbGF5PSJub25lIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KPGRlZnM+DQo8c3ltYm9sIGlkPSJpY29uLWNhcnQiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPg0KCTx0aXRsZT5jYXJ0PC90aXRsZT4NCgk8cGF0aCBjbGFzcz0icGF0aDEiIGQ9Ik0zODQgOTI4YzAgNTMuMDE5LTQyLjk4MSA5Ni05NiA5NnMtOTYtNDIuOTgxLTk2LTk2YzAtNTMuMDE5IDQyLjk4MS05NiA5Ni05NnM5NiA0Mi45ODEgOTYgOTZ6Ij48L3BhdGg+DQoJPHBhdGggY2xhc3M9InBhdGgyIiBkPSJNMTAyNCA5MjhjMCA1My4wMTktNDIuOTgxIDk2LTk2IDk2cy05Ni00Mi45ODEtOTYtOTZjMC01My4wMTkgNDIuOTgxLTk2IDk2LTk2czk2IDQyLjk4MSA5NiA5NnoiPjwvcGF0aD4NCgk8cGF0aCBjbGFzcz0icGF0aDMiIGQ9Ik0xMDI0IDUxMnYtMzg0aC03NjhjMC0zNS4zNDYtMjguNjU0LTY0LTY0LTY0aC0xOTJ2NjRoMTI4bDQ4LjA3NCA0MTIuMDU0Yy0yOS4yOTQgMjMuNDU4LTQ4LjA3NCA1OS41LTQ4LjA3NCA5OS45NDYgMCA3MC42OTYgNTcuMzA4IDEyOCAxMjggMTI4aDc2OHYtNjRoLTc2OGMtMzUuMzQ2IDAtNjQtMjguNjU0LTY0LTY0IDAtMC4yMTggMC4wMTQtMC40MzYgMC4wMTYtMC42NTZsODMxLjk4NC0xMjcuMzQ0eiI+PC9wYXRoPg0KPC9zeW1ib2w+PC9kZWZzPg0KPC9zdmc+);
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Re: Поясните как подключать svg?
« Ответ #10 : 26.12.2014, 01:15:01 »
Получилось)))
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Поясните как подключать svg?
« Ответ #11 : 26.12.2014, 01:21:46 »
все правильно )) я бы добавил в конце после скобки: no-repeat 0 0 transparent;
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Re: Поясните как подключать svg?
« Ответ #12 : 26.12.2014, 01:25:17 »
Что то ща дальше делаю, а потом вспомнил, а как цвет то менять?
раньше я указывал color, а ща не работает что то он.
Где указывать?
*

ivan petrov

  • Захожу иногда
  • 108
  • 2 / 0
Re: Поясните как подключать svg?
« Ответ #13 : 26.12.2014, 01:27:57 »
А все кажись понял, что то туплю под вечер/ночь)
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Не подключать стили и скрипты если они уже подключены

Автор suvorov

Ответов: 1
Просмотров: 658
Последний ответ 22.04.2020, 23:31:04
от sivers
Как подключать скрипты Joomla 3.2 отдельным файлом?

Автор Vas80

Ответов: 12
Просмотров: 4001
Последний ответ 13.06.2015, 14:33:22
от GTitan