Новости Joomla

Как тестировать Joomla PHP-разработчику? Компонент Patch tester.

👩‍💻 Как тестировать Joomla PHP-разработчику? Компонент Patch tester.Joomla - open source PHP-фреймворк с готовой админкой. Его основная разработка ведётся на GitHub. Для того, чтобы международному сообществу разработчиков было удобнее тестировать Pull Requests был создан компонент Patch Tester, который позволяет "накатить" на текущую установку Joomla именно те изменения, которые необходимо протестировать. На стороне инфраструктуры Joomla для каждого PR собираются готовые пакеты, в которых находится ядро + предложенные изменения. В каждом PR обычно находятся инструкции по тестированию: куда зайти, что нажать, ожидаемый результат. Тестировщики могут предположить дополнительные сценарии, исходя из своего опыта и найти баги, о которых сообщить разработчику. Или не найти, и тогда улучшение или исправление ошибки быстрее войдёт в ядро Joomla. Напомню, что для того, чтобы PR вошёл в ядро Joomla нужны минимум 2 положительных теста от 2 участников сообщества, кроме автора. Видео на YouTubeВидео на VK ВидеоВидео на RuTubeКомпонент на GitHub https://github.com/joomla-extensions/patchtester@joomlafeed#joomla #php #webdev #community

Вышел релиз Revo PageBuilder Toolkit for YOOtheme Pro 1.6

Вышел релиз Revo PageBuilder Toolkit for YOOtheme Pro 1.6.2PageBuilder Toolkit - это специализированный плагин для конструктора страниц Yootheme Pro, содержит набор различных утилит для ускорения процесса работы и отладки макета, множественные улучшения в интерфейсе, включая поддержку dark mode, подсказки, быстрая смена разрешения в окне просмотра и много чего еще.v.1.6.2 Что нового?- Индикатор статусов: теперь не просто показывает состояние запросов, но и делает автоматические попытки их отправки при кратковременных сбоях в сети, а если это не помогло, то переводит конструктор в ручной режим, что позволяет сохранит макет и настройки темы прежде чем вы потеряете все, что было сделано с момента последнего сохранения- Подсветка ошибок в макете: плагин анализирует код страницы и может автоматически подсвечивать data атрибуты с кучей мусора, которые попадают в код страницы при копипасте из Figma в TinyMCE (пригодится для старых макетов, в текущей работе плагин сам очищает код мусора). Также есть подсветка семантических ошибок сборки - дубли h1 тега на странице и вложенных друг в друга заголовков.- Улучшена поддержка будущего релиза Yootheme Pro 5 и редактора CodeMirror 6Плагин для русскоязычных пользователей доступен в каталоге расширений SovMart и распространяется за символическую плату (100р). Разработчики Joomla расширений и партнеры автора могут получить плагин бесплатно.Для работы плагина необходим конструктор страниц Yootheme Pro.Разработчик плагина - участник нашего сообщества Александр Судьбинов (@alexrevo), член официальной группы поддержки Yootheme Pro. Страница расширенияОписание на сайте автора@joomlafeed#joomla #yootheme

Большое обновление: Content Cart 4.0

Большое обновление: Content Cart 4.0

Большое обновление: Content Cart 4.0.0 от JoomLine!

Мы выпустили самую масштабную версию нашего плагина "Корзина товаров Content Cart" для Joomla.

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

Mihanja80

  • Завсегдатай
  • 1918
  • 168 / 4
  • Всю жизнь учусь...
CSS спрайт Как?
« : 31.05.2010, 01:17:00 »
Залил архив с картинками шаблона на ru.spritegen.website-performance.org. (настройки по умолчанию)
Получил Изображение и коды:
Код
.sprite-Block-c { background-position: 0 0; width: 990px; height: 122px; } 
.sprite-Block-h { background-position: 0 -172px; width: 3000px; height: 10px; } 
.sprite-Block-s { background-position: 0 -232px; width: 10px; height: 10px; } 
.sprite-Block-v { background-position: 0 -292px; width: 10px; height: 3000px; } 
.sprite-BlockHeader { background-position: -3050px 0; width: 1096px; height: 30px; } 
.sprite-BlockHeaderIcon { background-position: -3050px -80px; width: 20px; height: 25px; } 
.sprite-Button { background-position: -3050px -155px; width: 407px; height: 81px; } 
.sprite-Footer { background-position: -3050px -286px; width: 1086px; height: 150px; } 
.sprite-Header { background-position: -3050px -486px; width: 1078px; height: 167px; } 
.sprite-Header { background-position: -3050px -703px; width: 1086px; height: 175px; } 
.sprite-MenuItem { background-position: -3050px -928px; width: 400px; height: 69px; } 
.sprite-MenuSeparator { background-position: -3050px -1047px; width: 2px; height: 23px; } 
.sprite-Page-BgGlare { background-position: -3050px -1120px; width: 500px; height: 338px; } 
.sprite-Page-BgGradient { background-position: -3050px -1508px; width: 102px; height: 1000px; } 
.sprite-Page-BgTexture { background-position: -6100px 0; width: 102px; height: 102px; } 
.sprite-PostBullets { background-position: -6100px -152px; width: 4px; height: 9px; } 
.sprite-PostQuote { background-position: -6100px -211px; width: 37px; height: 33px; } 
.sprite-Sheet-c { background-position: -6100px -294px; width: 50px; height: 50px; } 
.sprite-Sheet-h { background-position: -6100px -394px; width: 50px; height: 22px; } 
.sprite-Sheet-s { background-position: -6100px -466px; width: 22px; height: 22px; } 
.sprite-Sheet-v { background-position: -6100px -538px; width: 22px; height: 50px; } 
.sprite-edit { background-position: -6100px -638px; width: 20px; height: 20px; } 
.sprite-edit_unpublished { background-position: -6100px -708px; width: 20px; height: 20px; } 
.sprite-emailButton { background-position: -6100px -778px; width: 20px; height: 20px; } 
.sprite-livemarks { background-position: -6100px -848px; width: 30px; height: 32px; } 
.sprite-nav { background-position: -6100px -930px; width: 1086px; height: 23px; } 
.sprite-pdf_button { background-position: -6100px -1003px; width: 20px; height: 20px; } 
.sprite-printButton { background-position: -6100px -1073px; width: 15px; height: 12px; } 
.sprite-spacer { background-position: -6100px -1135px; width: 1px; height: 1px; } 
.sprite-subitem-bg { background-position: -6100px -1186px; width: 1px; height: 40px; }
Не забудьте добавить правило для ссылки на спрайт изображение. Например такое:
#container li {
   background: url(csg-4c02d3bed6106.png) no-repeat top left;
}

Подскажите как дальше действовать? Куда прописать #container li и как прописывать в таблице стилей?
Например есть код:
Код
body
{
	margin: 0 auto;
	padding: 0;
	background-color: #32250B;
	background-image: url('../images/Page-BgTexture.jpg');
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: top left;
}

Хочется немного оптимизировать но знаний мало...
Спасибо.
Записан
Я с мобильного, в основном...
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: CSS спрайт Как?
« Ответ #1 : 31.05.2010, 18:48:17 »
А подробней можно?
Не понял суть вопроса. В чем проблема?
Код
Код: css
#container li {
   background: url(csg-4c02d3bed6106.png) no-repeat top left;
}
Можете прописать в любое место CSS файла.
Записан
*

Mihanja80

  • Завсегдатай
  • 1918
  • 168 / 4
  • Всю жизнь учусь...
Re: CSS спрайт Как?
« Ответ #2 : 31.05.2010, 20:02:59 »
Как правильно заменить исходное изображение на спрайт?

Было:
Код
body
{
	margin: 0 auto;
	padding: 0;
	background-color: #32250B;
	background-image: url('../images/Page-BgTexture.jpg');
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: top left;
}

Надо сделать ТАК?
Код


#container li {
   background: url(csg-4c02d3bed6106.png) no-repeat top left;
}

body
{
	margin: 0 auto;
	padding: 0;
	background-color: #32250B;
	background-position: -6100px 0; width: 102px; height: 102px;
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: top left;
}


Так правильно? Нужно ли еще что-то дописывать?
Если не верно то покажите пример кода ка будет верно. Спасибо.

Получается в коде дважды background-position (top left; и позиция спрайта).... Как правильно?
« Последнее редактирование: 31.05.2010, 20:06:31 от Mihanja80 »
Записан
Я с мобильного, в основном...
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: CSS спрайт Как?
« Ответ #3 : 31.05.2010, 21:06:43 »
А спрайт для какого элемента применяется?
Так и не понял вопроса)
В чем проблема со спрайтом?
Записан
*

Mihanja80

  • Завсегдатай
  • 1918
  • 168 / 4
  • Всю жизнь учусь...
Re: CSS спрайт Как?
« Ответ #4 : 31.05.2010, 21:20:38 »
Спрайт применяется для шаблона сайта. Картинку сделал, код получил. Как теперь в CSS правильно подключить этот спрайт вместо картинок?
(то что получил в первом сообщении)

Код body взял из CSS шаблона для примера.

Я не знаю как исправить CSS что бы вместо отдельных ссылок на картинки background-image: url('../images/Page-BgTexture.jpg'); подключился этот спрайт.

Напишите пожалуйста пример?
Записан
Я с мобильного, в основном...
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: CSS спрайт Как?
« Ответ #5 : 31.05.2010, 21:57:13 »
Смысл спрайта в том, чтобы загрузить картинку 1 раз, а потом позиционировать ее, снижая этим запросы к сайту на загрузку кучи изображений

Вот так:
Код: css
background: url(csg-4c02d3bed6106.png) no-repeat top left;
картинка подгружается.

А так:
Код: css
background-position: -3050px -286px; width: 1086px; height: 150px;
она позиционируется.

Назначать картинку нужно тому элементу(там), которому(ым) будет применен этот спрайт.

Как пример:
Есть меню, реализованное с помощью списка.
У каждого пункта есть свой уникальный класс (item1, item2 и т.д.).
Чтобы применить к пунктам меню некий спрайт (скомпонованную картинку), в котором изображены все пункты меню картинками, мы назначаем на пункт меню (тег li) стиль с фоновой картинкой (0 0 = top left):
Код: css
#menu li{background: url(csg-4c02d3bed6106.png) no-repeat 0 0;}
Этот стиль распространится на все теги li в меню #menu.
При этом, у всех пунктов будет одна и та же часть изображения, который находится в левом/верхнем краю спрайта (из-за ориентации top left).

Теперь, чтобы распределить все изображения спрайта под соответствующий пункт меню, нам надо для каждого из пунктов спрайт (который является фоновым изображением) подвинуть на нужную величину.
К примеру, для второго пункта меню подвинем спрайт на 100 пикселей, чтобы для него показать нужную часть спрайта.
Код: css
#menu li.item2{background-position: 0 100px;}

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

Так же можно проделывать со многими элементами, компонуя их в спрайты и распределяя по нужным элементам, уменьшая количество запросов к сайту.
Записан
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Re: CSS спрайт Как?
« Ответ #6 : 31.05.2010, 22:20:38 »
Цитировать
...уменьшая количество запросов к сайту.
И добавляя геморрой на свою >|< О П У
imho такая техника только для высокопосещаемыхх ресурсов, где каждый байт(и даже бит) и запрос на счету
Записан
【Мегапак Virtuemart】:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

Mihanja80

  • Завсегдатай
  • 1918
  • 168 / 4
  • Всю жизнь учусь...
Re: CSS спрайт Как?
« Ответ #7 : 31.05.2010, 23:10:53 »
Провайдер достал, опять нет интернета... Пишу с телефона! Меня просто запутала подсказка :#container li {
   background: url(csg-4c02d3bed6106.png) no-repeat top left;
} которая вылезла на сайте после создания спрайта. Если правильно все понял то в каждом месте таблицы каскадных стилей нужно изменить ссылку и прописать позицию. Посмотрите правильно ли будет так: 


body
{background: url(csg-4c02d3bed6106.png) no-repeat top left;
 margin: 0 auto;
 padding: 0;
 background-color: #32250B;
 background-position: -6100px 0; width: 102px; height: 102px;
 background-repeat: repeat;
 background-attachment: scroll;
} извините за читабельность но лучше написать сложно. Там где была ссылка на картинку прописать загрузку спрайта и позицию: background: url(csg-4c02d3bed6106.png) no-repeat top left; background-position: -6100px 0; width: 102px; height: 102px; подставляя позицию из полученого списка. Так? А вот про проблемы интересно. Если большие сайты это используют то почему маленькие не могут? В чем проблемы? У меня только в шаблоне сайта 30 картинок, а если еще добавить 5 модулей с закруглемыми углами... То 30 человек сделают не мало запросов... Если есть известные проблемны этой технологии то поделитесь пожалуйста информацией. А можно загружать картинку что-то прописав в шаблоне? Так наверно еще лучше будет?
« Последнее редактирование: 31.05.2010, 23:25:43 от Mihanja80 »
Записан
Я с мобильного, в основном...
*

fedya

  • Захожу иногда
  • 463
  • 50 / 1
Re: CSS спрайт Как?
« Ответ #8 : 31.05.2010, 23:28:26 »
да нет никаких проблем...главное не переусердствовать...

вот спрайт от яндекса...в одном файле (при загрузке один запрос)....куча иконок...
а без спрайта было бы  30 29 запросов...

« Последнее редактирование: 31.05.2010, 23:31:33 от fedya »
Записан
Вместо того, чтобы доказывать истинность своих положений и опровергать аргументацию оппонента, демагог может обращаться к приёму ad hominem — критиковать не аргументы, а личность оппонента, пытаясь убедить зрителей, что оппонент — плохой, недостойный, не разбирающийся в вопросе, пристрастный или лицемерный человек.
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: CSS спрайт Как?
« Ответ #9 : 31.05.2010, 23:31:17 »
Ну тут мне сложно ответить.
Я так понимаю, что спрайт применяется ко внешнему виду всего сайта (тег body)?
При этом, задается width: 102px; height: 102px;
Просто я не вижу смысла делать спрайт под тег body, если это не какая-то отдельная страницы с небольшим блоком, роль которого выполняет тег body, по центру шириной и высотой 102 пикселя. Но тогда странно, что спрайт размером в -6100px.
Это, конечно, может специфика страницы и спрайта…
Но в целом, вроде, по коду все нормально, а глубже надо уже копать код страницы, ориентируясь на HTML и конечный результат.
Записан
*

Mihanja80

  • Завсегдатай
  • 1918
  • 168 / 4
  • Всю жизнь учусь...
Re: CSS спрайт Как?
« Ответ #10 : 01.06.2010, 00:43:23 »
так в коде background-repeat: repeat; сайт в профиле. Это фон на всю ширину экрана. Я сделал спрайт из всех картинок шаблона. Можно в шаблоне прописать загрузку спрайта? Как лучше? Если можно в шаблоне то как? Если интернет будет то завтра выложу картинку спрайта, там вертикальный градиент 102х1000рх, есть и 3000х10рх. От того и цифры позицырования большие...

« Последнее редактирование: 01.06.2010, 01:13:17 от Mihanja80 »
Записан
Я с мобильного, в основном...
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: CSS спрайт Как?
« Ответ #11 : 01.06.2010, 17:35:12 »
Думаю, что слишком уж фанатично вы подошли к этому делу.
Думаю, что нужно оптимизировать такое изображение, разбив на несколько спрайтов, если уж хочется их использовать.
И к чему все эти махинации со спрайтами? Ради оптимизации?
Решения в одну-две строки тут не дашь.
Чтобы качественно поработать над оптимизацией сайта, этим надо заниматься.
Записан
*

Mihanja80

  • Завсегдатай
  • 1918
  • 168 / 4
  • Всю жизнь учусь...
Re: CSS спрайт Как?
« Ответ #12 : 01.06.2010, 20:12:22 »
Цитата: gdX от 01.06.2010, 17:35:12
Думаю, что слишком уж фанатично вы подошли к этому делу.
Думаю, что нужно оптимизировать такое изображение, разбив на несколько спрайтов, если уж хочется их использовать.
И к чему все эти махинации со спрайтами? Ради оптимизации?

Цитата: fedya от 31.05.2010, 23:28:26
да нет никаких проблем...главное не переусердствовать...

вот спрайт от яндекса...в одном файле (при загрузке один запрос)....куча иконок...
а без спрайта было бы  30 29 запросов...



Ну так и пришел я к вам с просьбой, подскажите! Научите!

Зачем разбивать на несколько спрайтов? Чем это лучше чем один?
И никто так и не ответил Развернуто с моим примером...

Вот сегодня сам заметил ошибку:
body
{background: url(csg-4c02d3bed6106.png) no-repeat top left;
 margin: 0 auto;
 padding: 0;
 background-color: #32250B;
 background-position: -6100px 0; width: 102px; height: 102px;
 background-repeat: repeat;
 background-attachment: scroll;
}

Получается что в первой строке нужно убрать no-repeat?


Есть:
Код
.art-Block-tc, .art-Block-bc
{
	left: 5px;
	right: 5px;
	height: 10px;
	background-image: url('../images/Block-h.png');
}
.art-Block-cr, .art-Block-cl
{
	top: 5px;
	bottom: 5px;
	width: 10px;
	background-image: url('../images/Block-v.png');
}

Правильно ли будет так:
Код
.art-Block-tc, .art-Block-bc
{
	left: 5px;
	right: 5px;
	height: 10px;
	background: url(`../images/csg-4c02d3bed6106.png`) no-repeat top left;
        background-position: 0 -172px; width: 3000px; height: 10px;
}
.art-Block-cr, .art-Block-cl
{
	top: 5px;
	bottom: 5px;
	width: 10px;
	background: url(`../images/csg-4c02d3bed6106.png`) no-repeat top left;
        background-position: 0 -292px; width: 10px; height: 3000px;
}

Не получится ли с таким кодом что картинка подгружается дважды? Или все правильно написал?
background: url(`../images/csg-4c02d3bed6106.png`) Нужны ли здесь одинарные кавычки?

Спасибо что хоть частично объясняете.

как правильние?
background-image: url(`../images/csg-4c02d3bed6106.png`) no-repeat top left;
background: url(`../images/csg-4c02d3bed6106.png`) no-repeat top left;

 >:(
« Последнее редактирование: 01.06.2010, 20:40:56 от Mihanja80 »
Записан
Я с мобильного, в основном...
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: CSS спрайт Как?
« Ответ #13 : 01.06.2010, 20:42:48 »
Думаю, что скорее все background-repeat: repeat; лишний, так как спрайт не может иметь свойство повторения себя, как фоновой картинки.
background: url(`../images/csg-4c02d3bed6106.png`) Кавычки тут не обязательны.

На счет элементов, где применяется спрайт.
Для всех таких элементов должно быть прописано фоновое изображение, а также координаты его смещения иначе как же ему назначить то или иное место спрайта.
Прописывать позиционирование top left в указании фоновых изображений не нужно, лучше объединить его с позиционированием.

Т.е. такие строки:
Код: css
background: url(`../images/csg-4c02d3bed6106.png`) no-repeat top left;
background-position: 0 -292px;

заменяются на
Код: css
background: url(../images/csg-4c02d3bed6106.png) no-repeat 0 -292px;
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться