Как да направите отзивчиви изображения в Drupal, Web On Life
Ще получим адаптивни изображения за Drupal, като заменим доброто старо с ново, което все още не се поддържа от всички браузъри,
Можете да прочетете статията за адаптивните изображения. След като изпълните всички инструкции от тази статия, ще получите отзивчиви изображения на вашия сайт, докато процесът на добавяне на изображения няма да се промени по никакъв начин. Drupal не само ще замени
но той ще създаде няколко версии на картината с различни размери.
Преминаваме от думи към дела или по-скоро към инсталиране на няколко модула. Имаме нужда от модул Picture. Името говори само за себе си. Модулът се оказа в резултат на backport на модула Responsive Image, разработен за осемте. В допълнение, нека вземем точки на прекъсване и Ctools (ако току-що не сте инсталирали сайт, тогава CTools най-вероятно вече е инсталиран).
Кодът за елемента картина изглежда така
Дефинират се точки на прекъсване, посочва се съответното изображение, а последното е резервно. Ще го направим по същия начин. Нека започнем с определяне на контролни точки.
Подготвителен етап. Създавайте точки на прекъсване, стилове и групи.
Отидете в менюто Конфигурация → Мултимедия → Точки на прекъсване. Посочете името на контролната точка и съответната медийна заявка. Ако имате нужда от поддръжка на ретината, маркирайте необходимата стойност в Множители. Обърнете внимание на реда, в който са разположени точките. В моя пример за минимална ширина, точката с най-голямата стойност е първа и след това се спуска.
Факт е, че браузърът ще прегледа условията на свой ред и след като намери първия подходящ, няма да разгледа останалите. По този начин, ако размените точките на работния плот и таблета, винаги ще се показва малка картина.
Сега нека комбинираме създадените контролни точки в група.Кликнете върху Добавяне на нова група, въведете името на групата и маркирайте създадените контролни точки.
за изображения, вмъкнати като поле.
След това разглеждаме случая, когато изображенията са вмъкнати като поле. Отидете в менюто Структура → Типове съдържание → Статия → Контрол на дисплея. Ако вашият Drupal интерфейс е преведен на български език, тогава е възможно в падащия списък да има два елемента "изображение". Изберете тази в настройките, която има картографиране на картина.
В настройките на полето изберете група от точки и резервен вариант.
Актуализирайте и запазете настройките. След всички тези настройки, вместо стандартния етикет, изходът ще бъде
с атрибути източник, където ще бъдат написани медийната заявка и съответното изображение.
представя няколко опции за адаптиране на изображението. Сред тях има един - ние определяме размера на изображението чрез атрибута sizes и предлагаме на браузъра няколко опции за изображението с размерите. След като изчисли размера, самият браузър ще избере една от предложените опции за изображение. Настройките за тази опция ще се различават само в последния елемент. В показаните полета вместо форматИзображение изберетеИзображение с размери. В настройките посочете стойността на атрибута sizes и стиловете на изображението.
Стойността на размерите е във vw (процент от ширината на прозореца за изглед) и са възможни медийни заявки.
за изображения в текст.
На практика често се налага да вмъквате изображения в текст, а не като отделно поле. Използвам модула Insert за това. В момента Insert не е приятелски настроен към Picture. Надявам се, че разработчиците ще поправят това в следващите версии, но засега можете да използвате корекцията https://www.drupal.org/node/1954546.
Последната стъпка е да активирате филтъра.
" Drupal филтър за замяна
По тази тема адаптивенизображения в Drupal не е завършен. Следват статии за това как да направите адаптивно слайдшоу, как да адаптирате картина по-добре и по-лесно с помощта на възможностите на Drupal и . Имате ли някакви въпроси? Нека се опитаме да го разберем заедно.
Член на
Сряда, 11/04/2015 - 22:56
Да, това е много важно в момента.
Член на
събота, 28.11.2015 г. - 19:17 ч
Картината все още не е широка
Картината все още не е широко използвана и кога ще влезе в обща употреба. Въпреки че самият подход е интересен. Само не разбирам - защо такива трудности? Не е ли по-лесно да напишеш адаптивност за изображения в css - не е трудно.
Член на
събота, 28.11.2015 г. - 21:37 ч
Етикет на снимката в момента
Етикетът Picture в момента се усвоява от 55% от устройствата. За всички останали има полифил.
Сега за лесния начин. Като добавим адаптивност чрез css, ще дадем едно и също изображение както за настолни компютри, така и за мобилни телефони, което не е добре. Използвайки картина към мобилни телефони, можете да дадете по-лека версия на картината. Освен теглото има проблем с намалените големи изображения, които трудно се разпознават в умален вариант. със снимка можем да подготвим друга версия на изображението, на която всичко излишно ще бъде отрязано и предоставено на мобилните потребители.
Трудно е да се настрои за първи път, но е удоволствие да се използва. Попълнената снимка веднага отрязва излишното и всичко е готово, всички са доволни :).
Член на
вт, 12/01/2015 - 19:46
Ако самото изображение
Ако самото изображение е оптимизирано, тогава няма нищо лошо да се използва както за десктоп, така и за мобилни приложения. Адаптивността си е адаптивност. етикет на снимкатаудобно, не споря, но в този случай е необходимо да подготвите поне две изображения.
Член на
Пет, 12/04/2015 - 15:22
Ние имаме такива
Имаме такава картина, която се адаптира към малък екран с помощта на css и получаваме нещо подобно
можем да дадем на мобилните потребители например такава снимка
На него можете да разберете какъв човек е изобразен и такава картина тежи по-малко.
Член на
Пет, 12/04/2015 - 18:48
Отговор на Имаме един от Олег
Да, въпросът е ясен. Прочети
Да, въпросът е ясен. Прочетете повече за този етикет. Има много възможности - адаптира се не само към резолюцията, но и към ориентацията на устройството. Очевидно този етикет е бъдещето, ще трябва да се овладее с времето. Това, което не ми харесва е, че ако сега публикувам само една снимка, която се адаптира към размера на екрана с css, след това с картинка, ако се използват всички аспекти на този етикет, вероятно ще трябва да подготвя 10 снимки.