Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Постройте дом своей мечты прямо сейчас! Соединяйте три предмета в один ряд, зарабатывайте звезды и покупайте красивые детали интерьера. Звучит заманчиво? Увлекательная головоломка в жанре «три в ряд» заставит размяться ваш мозг. Присоединяйтесь к онлайн-игре бесплатно прямо сейчас!

Строить дом - три в ряд

Три в ряд, Казуальные, Детские

Играть

Топ прошлой недели

  • Oskanov Oskanov 8 постов
  • AlexKud AlexKud 26 постов
  • StariiZoldatt StariiZoldatt 3 поста
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Новости Пикабу Помощь Кодекс Пикабу Реклама О компании
Команда Пикабу Награды Контакты О проекте Зал славы
Промокоды Скидки Работа Курсы Блоги
Купоны Biggeek Купоны AliExpress Купоны М.Видео Купоны YandexTravel Купоны Lamoda
Мобильное приложение

Web

С этим тегом используют

IT Программирование Web-программирование Сайт Веб-разработка Дизайн Javascript Все
962 поста сначала свежее
9
DELETED
3 года назад
Web-технологии

Рендер страницы через JavaScript⁠⁠

Задача

Есть API, который в ответ на запрос отдает json со списком фреймворков и их описанием. Необходимо на его основе отрендерить карточки.

Рендер страницы через JavaScript Программирование, Разработка, IT, Программист, Обучение, Javascript, Json, Frontend, Web, Web-программирование, Рендер, HTML, Кодирование, Фронт, Длиннопост

Прототип

Алгоритм

- Получить список;

- Обработать список;

- Отрендерить в HTML.


1. Получить список

Для данной статьи я подготовил тестовые данные, которые можно получить по адресу:

https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...

Чтобы сделать HTTP запрос — используйте метод fetch:

fetch("https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...")

2. Обработать список

Вот как выглядит json, который мы получаем:

{
  "success": true,
  "list": [
    {
      "title": "React",
      "text": "React is an open-source...

Напишем функцию buildHTML, которая на вход будет принимать JSON, а отдавать строку, которую мы в будущем используем как HTML:

// HTTP запрос
fetch("https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...")
  // переводим ответ в json
  .then(response => response.json())
  // конвертируем в html
  .then(buildHTML)

Определение функции:

const buildHTML = ({ list }) =>
  list.map(({ title, text }) => (`
    <div>
      <h2>${title}</h2>
      <p>${text}</p>
    </div>
`)).join("");

3. Отрендерить в HTML


fetch("https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...")
  .then(response => response.json())
  .then(buildHTML)
  .then(render); // полученный результат передает в функцию render

В файле HTML создадим пустой контейнер, куда будем вставлять карточки:

<div class="container"></div>

https://developer.mozilla.org/en-US/docs/Web/API/Element/inn... функции render сводится лишь к использованию свойства innerHTML:

const render = (html) => {
  const container = document.querySelector('.container');
  container.innerHTML = html;
};
Рендер страницы через JavaScript Программирование, Разработка, IT, Программист, Обучение, Javascript, Json, Frontend, Web, Web-программирование, Рендер, HTML, Кодирование, Фронт, Длиннопост

Результат

Полную версию кода смотрите на codepen.

Показать полностью 2
[моё] Программирование Разработка IT Программист Обучение Javascript Json Frontend Web Web-программирование Рендер HTML Кодирование Фронт Длиннопост
14
2
DELETED
3 года назад

Подключение шрифтов на сайт⁠⁠

Пример #1 — Подключаем шрифт PT Sans через Google Fonts

- Заходим на сайт fonts.google.com и находим шрифт PT Sans;

- Нажимаем кнопку Select this font;

- Нажимаем на Family Selected;

- Во вкладке Customized выбираем начертания и Cyrillic;

- Копируем строку с подключением шрифта во вкладках EMBED → @IMPORT.


Вставляем строку с подключением в начало CSS файла:

@IMPORT url('https://fonts.googleapis.com/css?family=PT%20Sans%3A400i%2C7...);

Копируем свойство font-family:

Подключение шрифтов на сайт Программирование, IT, Разработка, Программист, Обучение, Урок, Frontend, Font, CSS, Css3, Верстка, Pt, Sans, Drupal, Google, Шрифт, Web, Web-программирование, Образование, Учеба, Длиннопост

Пример #2 — Подключаем шрифты PT Sans и PT Serif в Drupal 8 через файл темы .libraries.yml

Аналогично примеру #1 получаем URL подключения шрифтов из строки @import:

fonts.googleapis.com/css?family=PT%20Sans%3A400%2C400...

В файле темы .libraries.yml подключаем шрифты по образцу:

fonts.googleapis.com/css?family=PT%20Sans%3A400%2C400...,
Подключение шрифтов на сайт Программирование, IT, Разработка, Программист, Обучение, Урок, Frontend, Font, CSS, Css3, Верстка, Pt, Sans, Drupal, Google, Шрифт, Web, Web-программирование, Образование, Учеба, Длиннопост

Сохраняем и сбрасываем кэш.

Пример #3 — Подключаем шрифт PT Sans локально

- Заходим на сайт Google Webfonts Helper;

- В поиске находим шрифт PT Sans;

- Выбираем начертания и Cyrillic;

- Пролистываем вниз и пишем где будут находится шрифты относительно .css файла;

- Копируем CSS код и вставляем его в .css файл;

- Скачиваем архив с шрифтами, разархивируем его и размещаем шрифты в нужном месте.


Вот так выглядит скопированный CSS:

/* pt-sans-regular - cyrillic_latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('PT Sans'), local('PTSans-Regular'),
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.eot?#iefix') format('embedded-opentype'), /*   IE6-IE8 */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.woff2') format('woff2'), /* Super Modern   Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.woff') format('woff'), /* Modern Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-italic - cyrillic_latin */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.eot'); /* IE9 Compat Modes */
  src: local('PT Sans Italic'), local('PTSans-Italic'),
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.eot?#iefix') format('embedded-opentype'), /*   IE6-IE8 */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.woff2') format('woff2'), /* Super Modern   Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-italic.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-700 - cyrillic_latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.eot'); /* IE9 Compat Modes */
  src: local('PT Sans Bold'), local('PTSans-Bold'),
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.eot?#iefix') format('embedded-opentype'), /*   IE6-IE8 */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.woff2') format('woff2'), /* Super Modern   Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.woff') format('woff'), /* Modern Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-700italic - cyrillic_latin */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'),
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/pt-sans/pt-sans-v9-cyrillic_latin-700italic.svg#PTSans') format('svg'); /* Legacy iOS */
}

А так список файлов с шрифтами:

Подключение шрифтов на сайт Программирование, IT, Разработка, Программист, Обучение, Урок, Frontend, Font, CSS, Css3, Верстка, Pt, Sans, Drupal, Google, Шрифт, Web, Web-программирование, Образование, Учеба, Длиннопост

Команда ls в терминале

Если все сделано правильно, то шрифты будут подключены локально.

Показать полностью 3
[моё] Программирование IT Разработка Программист Обучение Урок Frontend Font CSS Css3 Верстка Pt Sans Drupal Google Шрифт Web Web-программирование Образование Учеба Длиннопост
4
DELETED
3 года назад

Конструктор карт Яндекса⁠⁠

Одним из самых простых способов создать и разместить карту у себя на карте — это воспользоваться конструктором карт яндекса.


Переходим по ссылке:

https://yandex.ru/map-constructor/


Пишем название и описание. Ставим метку на карте или ищем место по адресу.

Конструктор карт Яндекса Разработка, Программирование, IT, Программист, Обучение, Web, Web-программирование, Карты, Яндекс, Яндекс Карты, Конструктор, Javascript, Frontend, Урок, Фронт, Образование

Как только все будет готово — жмем кнопку «Сохранить и продолжить».


Настраиваем параметры отображения карты. Например, растянем ее по ширине и поменяем масштаб.

Получаем код карты нажатием на одноименную кнопку.

Конструктор карт Яндекса Разработка, Программирование, IT, Программист, Обучение, Web, Web-программирование, Карты, Яндекс, Яндекс Карты, Конструктор, Javascript, Frontend, Урок, Фронт, Образование

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

Если вам нужно сделать так, чтобы карта на сайте не масштабировалась при прокрутки колесика — замените в скрипте scroll=true на scroll=false
Показать полностью 2
[моё] Разработка Программирование IT Программист Обучение Web Web-программирование Карты Яндекс Яндекс Карты Конструктор Javascript Frontend Урок Фронт Образование
11
alllhimic
alllhimic
3 года назад

150 рублей от FirstVDS (в честь дня космонавтики)⁠⁠

150 рублей от FirstVDS (в честь дня космонавтики) Халява, Бесплатно, Программирование, Акции, Промокод, Раздача, Сервер, Web, Хостинг

└ Источник: FREEHUB (мы радуем вас различной халявой)

---------------------------------------------------------
▪️ ВВЕСТИ КОД | 150₽

💁🏻‍♂️ FirstVDS — это хостинг-провайдер с большой историей уже 18 лет мы предоставляем в аренду виртуальные выделенные серверы для проектов любого масштаба. Наши VDS/VPS используются для размещения различных сайтов, порталов и сервисов, а также для разработки и тестирования.

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

🏷 : STARTREK
---------------------------------------------------------

🤷🏻‍♂️ UPD:

Для клиентов, которые пользуется хостингом и другими услугами FirstVDS - в честь дня космонавтики бонус 150₽, количество сертификатов ограничено — 2000 штук » как активировать код?
---------------------------------------------------------
🔥Другая халява в Telegram 👉🏻 FREEHUB 👈🏻

Показать полностью
Халява Бесплатно Программирование Акции Промокод Раздача Сервер Web Хостинг
3
DELETED
3 года назад

Опросник в Drupal 8⁠⁠

Устанавливаем модуль Poll:

composer require drupal/poll ; drush en poll -y

Переходим на страницу «Содержимое» → «Опросы»:

/admin/content/poll
Опросник в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Урок, Опрос, Drupal, Backend, Web, Web-программирование, Учеба, Вебмастер, Длиннопост

Жмем кнопку «Add a poll» и добавляем новый опрос.

Опросник в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Урок, Опрос, Drupal, Backend, Web, Web-программирование, Учеба, Вебмастер, Длиннопост

Пишем вопрос и варианты ответа. Меняем автора при необходимости. Проставляем все галки.

- Active — опрос включен, в нем можно проголосовать;

- Poll Duration — время, в течении которого опрос будет активен;

- Allow anonymous votes — незарегистрированные пользователи будут иметь возможность голосовать;

- Allow cancel votes — можно отменить свой выбор и проголосовать заново;

- Allow view results — можно увидеть результаты опроса и не голосовать при этом самому.

Сохраняем.


Для опросов создаются отдельные страницы. Т.к. это первое голосование на моем сайте, то оно будет иметь путь:

/poll/1

Но опросы же нужны не как отдельные страницы, а как часть контента других.

Поэтому удобнее создать параграф, в котором будет поле поле «Опрос».

Опросник в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Урок, Опрос, Drupal, Backend, Web, Web-программирование, Учеба, Вебмастер, Длиннопост

Находите подраздел «Ссылка» и клацайте на «Другое…»

Опросник в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Урок, Опрос, Drupal, Backend, Web, Web-программирование, Учеба, Вебмастер, Длиннопост

В подразделе «Материал» будет «Опрос»

В управлении отображением меняем формат вывода на «Готовая к выводу сущность»:

Опросник в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Урок, Опрос, Drupal, Backend, Web, Web-программирование, Учеба, Вебмастер, Длиннопост

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


Получаем результат:

Опросник в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Урок, Опрос, Drupal, Backend, Web, Web-программирование, Учеба, Вебмастер, Длиннопост

Я прикрепил опрос к полю параграфу типа материала «Новость».

Показать полностью 5
[моё] Разработка Программирование IT Программист Обучение Урок Опрос Drupal Backend Web Web-программирование Учеба Вебмастер Длиннопост
1
DELETED
3 года назад

Отложенная публикация в Drupal 8⁠⁠

Устанавливаем модуль Scheduler:

composer require drupal/scheduler ; drush en scheduler -y

В настройках типа материала ставим галку «Разрешить планировать публикацию для этого типа материалов».

Отложенная публикация в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Публикация, Backend, Web, Web-программирование, Урок, Isp, Учеба, Drupal, Длиннопост

При добавлении/редактировании материала, в сайдбаре появится поле времени отложенной публикации:

Отложенная публикация в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Публикация, Backend, Web, Web-программирование, Урок, Isp, Учеба, Drupal, Длиннопост

Опубликуем материал в следующем веке

Указываем время будущей публикации, сохраняем. Материал будет иметь статус «Неопубликованный» и сменит его на «Опубликованный» в указанную дату.


Новость будет опубликована в запланированное время только после запуска крона.

Запускать стандартный cron каждую минуту не потребуется. Модуль Scheduler предоставляет облегченную версию.


В настройках модуля Scheduler переходим во вкладку Lightweight cron:

/admin/config/content/scheduler/cron
Отложенная публикация в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Публикация, Backend, Web, Web-программирование, Урок, Isp, Учеба, Drupal, Длиннопост

Копируем первую или вторую строку:

wget -q -O /dev/null "https://tester.ru/scheduler/cron/eeweequeo7ko2auyeengo"

Добавляем эту команду в планировщик на вашем сервере:

Отложенная публикация в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Публикация, Backend, Web, Web-программирование, Урок, Isp, Учеба, Drupal, Длиннопост

Планировщик в ISP Manager

Отложенная публикация в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Публикация, Backend, Web, Web-программирование, Урок, Isp, Учеба, Drupal, Длиннопост

Запланированные задания в CPanel

Сохраняем, проверяем, используем!

Показать полностью 4
[моё] Разработка Программирование IT Программист Обучение Публикация Backend Web Web-программирование Урок Isp Учеба Drupal Длиннопост
2
DELETED
3 года назад

Настройка адаптивных стилей изображений в Drupal 8⁠⁠

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


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


В HTML есть тег picture, который подставляет нужное изображение в зависимости от ширины экрана.

В Drupal он реализован через модуль ядра — responsive image.


Включаем модуль Responsive image:

drush en responsive_image -y

В папке с вашей темой должен находиться файл с брейкпоинтами.

/themes/custom/themename/themename.breakpoints.yml

Я использую ширины: 480, 768, 980, 1180.

Следовательно, содержимое файла выглядит вот так:


themename.sp:
  label: smalltouch portrait
  mediaQuery: 'all and (min-width: 1px) and (max-width: 479px)'
  weight: 4
  multipliers:
    - 1x
themename.sl:
  label: smalltouch landscape
  mediaQuery: 'all and (min-width: 480px) and (max-width: 767px)'
  weight: 3
  multipliers:
    - 1x
themename.tp:
  label: tablet portrait
  mediaQuery: 'all and (min-width: 768px) and (max-width: 979px)'
  weight: 2
  multipliers:
    - 1x
themename.tl:
  label: tablet landscape
  mediaQuery: 'all and (min-width: 980px) and (max-width: 1179px)'
  weight: 1
  multipliers:
    - 1x
themename.desktop:
  label: desktop
  mediaQuery: 'all and (min-width: 1180px)'
  weight: 0
  multipliers:
    - 2x


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


Например: Для tablet portrait ширина в стиле изображения должна быть 979px, т.к. max-width для tablet portrait = 979px.

Настройка адаптивных стилей изображений в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Drupal, Backend, Flush, Урок, Web, Web-программирование, Cms, Учеба, Образование, Длиннопост

Буквой W я отмечаю, что стиль изображения отмасштабирован только по ширине / Width

Заходим на страницу «Адаптивные стили изображения» и добавляем новый:

/admin/config/media/responsive-image-style
Настройка адаптивных стилей изображений в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Drupal, Backend, Flush, Урок, Web, Web-программирование, Cms, Учеба, Образование, Длиннопост

В «Группа точек останова» — выбирайте свою тему.

Для каждого брейкпоинта задаем заранее созданный стиль изображения.

Настройка адаптивных стилей изображений в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Drupal, Backend, Flush, Урок, Web, Web-программирование, Cms, Учеба, Образование, Длиннопост

А в «Резервный стиль изображения» задаем для десктопа. Именно поэтому, для брейкпоинта desktop стиль изображения можно не задавать.


Desktop Retina — стиль изображения для мониторов с двойным пикселем, который часто встречается у компьютеров компании Apple.


Как только для каждой ширины все будет задано — жмем кнопку сохранить и адаптивный стиль изображения будет создан.


Переходим в управление отображением сущности, которая выводит изображение:

Настройка адаптивных стилей изображений в Drupal 8 Разработка, Программирование, IT, Программист, Обучение, Drupal, Backend, Flush, Урок, Web, Web-программирование, Cms, Учеба, Образование, Длиннопост

Для того чтобы эта настройка появилась — нажмите на иконку шестеренки

В настройках выбираем созданный нами адаптивный стиль изображения → Сохраняем.

Если изображения не обновились — воспользуйтесь командой:

drush image-flush --all ; drush cr
Показать полностью 4
[моё] Разработка Программирование IT Программист Обучение Drupal Backend Flush Урок Web Web-программирование Cms Учеба Образование Длиннопост
1
0
DELETED
3 года назад

Создаем простой слайдер в Drupal 8⁠⁠

Устанавливаем и включаем модуль slick views:

composer require drupal/slick_views ; drush en slick_views -y ; drush en slick_ui -y

Композер сам найдет и установит дополнительные модули: slick, slick ui.


Заходим на страницу Отчет о состоянии:

/admin/reports/status

Slick требует установки библиотек.

Создаем простой слайдер в Drupal 8 Разработка, Программирование, IT, Программист, Drupal, Backend, Web, Web-программирование, Carousel, Софт, Разработчики, Frontend, Слайдер, Гифка, Длиннопост

В терминале заходим в папку libraries, что в корне сайта.

cd ~/user/site/libraries

Если ее нет, то создаем.

mkdir ~/user/site/libraries

Переходим на страницу каждой библиотеки, нажимаем кнопку Clone or download и копируем путь:

Создаем простой слайдер в Drupal 8 Разработка, Программирование, IT, Программист, Drupal, Backend, Web, Web-программирование, Carousel, Софт, Разработчики, Frontend, Слайдер, Гифка, Длиннопост

Находясь в папке libraries, клонируем библиотеки:

git clone https://github.com/dinbror/blazy.git ;
git clone https://github.com/kenwheeler/slick.git

Заходим на страницу настроек модуля Slick и делаем дубликат шаблона.

/admin/config/media/slick
Создаем простой слайдер в Drupal 8 Разработка, Программирование, IT, Программист, Drupal, Backend, Web, Web-программирование, Carousel, Софт, Разработчики, Frontend, Слайдер, Гифка, Длиннопост

Меняем название и машинное имя и сразу же сохраняем. Для простого слайдера стандартных настроек достаточно.


Создаем новое представление и меняем формат с Неформатированный список в Slick Carousel.

Создаем простой слайдер в Drupal 8 Разработка, Программирование, IT, Программист, Drupal, Backend, Web, Web-программирование, Carousel, Софт, Разработчики, Frontend, Слайдер, Гифка, Длиннопост

Нажимаем галку Vanilla Slick, меняем Optionset main на созданный ранее Slider и сохраняем.

Создаем простой слайдер в Drupal 8 Разработка, Программирование, IT, Программист, Drupal, Backend, Web, Web-программирование, Carousel, Софт, Разработчики, Frontend, Слайдер, Гифка, Длиннопост

В настройках представления указываем что выводить, сколько и как:

Я вывожу статьи, две штуки в режиме отображения анонс.

Создаем простой слайдер в Drupal 8 Разработка, Программирование, IT, Программист, Drupal, Backend, Web, Web-программирование, Carousel, Софт, Разработчики, Frontend, Слайдер, Гифка, Длиннопост

Сохраняем представление.


Результат в теме Bartik

Создаем простой слайдер в Drupal 8 Разработка, Программирование, IT, Программист, Drupal, Backend, Web, Web-программирование, Carousel, Софт, Разработчики, Frontend, Слайдер, Гифка, Длиннопост

Вот и все. Если вам нужна карусель из нескольких столбцов или даже рядов, то вы можете самостоятельно в настройках Optionset поменять их количество.

Показать полностью 6
[моё] Разработка Программирование IT Программист Drupal Backend Web Web-программирование Carousel Софт Разработчики Frontend Слайдер Гифка Длиннопост
1
Посты не найдены
О Нас
О Пикабу
Контакты
Реклама
Сообщить об ошибке
Сообщить о нарушении законодательства
Отзывы и предложения
Новости Пикабу
RSS
Информация
Помощь
Кодекс Пикабу
Награды
Команда Пикабу
Бан-лист
Конфиденциальность
Правила соцсети
О рекомендациях
Наши проекты
Блоги
Работа
Промокоды
Игры
Скидки
Курсы
Зал славы
Mobile
Мобильное приложение
Партнёры
Промокоды Biggeek
Промокоды Маркет Деливери
Промокоды Яндекс Путешествия
Промокоды М.Видео
Промокоды в Ленте Онлайн
Промокоды Тефаль
Промокоды Сбермаркет
Промокоды Спортмастер
Постила
Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии