Выводим иконки тренингов. Скрипт для вывода и стили оформления иконок

Выводим иконки тренингов. Скрипт для вывода и стили оформления иконок

Скрипт для вывода иконок тренинга подойдёт для любой школы, независимо от того, используется в ней кастомный дизайн или нет. А вот стили подойдут только для школ, которые используют мой набор для GetCourse. Если у вас другое оформление, вы можете использовать примеры как основу, но придётся дорабатывать.

Добавление иконок к тренингам

Прежде всего, нужно добавить иконку в настройках тренинга. Сделать это можно во вкладке «В приложении». Загрузите изображения для всех тренингов, в которых вы хотите вывести иконки.

Иконка должна иметь соотношения сторон 1:1 (квадрат). Это очень важно. В противном случае её может непредсказуемо обрезать. Если ваше изображение горизонтальное или вертикальное, перед загрузкой обрежьте его под квадрат или впишите в квадратную область.

Скрипт для вывода иконок тренингов

Скрипт можно добавить двумя способами:

  • В настройки аккаунта или в тему. Тогда он будет применяться ко всем тренингам и подтренингам, во всей школе.
  • На главную страницу или на страницу конкретного тренинга. Тогда иконки будут выводиться только в нём.

Если вы используете мой набор стилей, отдельно устанавливать скрипт не нужно. Он уже есть в файле sctipts.js.

//Добавляем изображения тренингов
document.addEventListener("DOMContentLoaded", function () {
  function removeThumbnail(string) {
    const aPart = string.match(/\/a\/\d+\/sc\/\d+/);
    const hPart = string.substring(string.indexOf('thumbnail') + 10, string.indexOf('/s/'));
    return `/fileservice/file/download${aPart}/${hPart}`;
  }

  document.querySelectorAll('.stream-table tr').forEach(function (tr) {
    const image = tr.getAttribute('data-training-image');

    if (image && image.includes('thumbnail')) {
      const anchor = tr.querySelector('a');

      if (anchor && !anchor.querySelector('.training-image')) {
        const imageWrapper = document.createElement('div');
        imageWrapper.className = 'training-image';

        const img = document.createElement('img');
        img.src = removeThumbnail(image);

        imageWrapper.appendChild(img);

        anchor.prepend(imageWrapper);
      }
    }
  });
});

Скрипт проверяет код страницы и ищет у каждого из тренингов блок, содержащий параметр data-training-image. Если в нём есть ссылка на изображение (она будет, если вы загрузили картинку во вкладке «В приложении»), скрипт добавляет его перед заголовком тренинга, оборачивая в div с классом training-image.

Стандартные стили вывода иконок

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

Эти стили уже содержатся в моём наборе, поэтому добавлять их дополнительно не нужно.

.stream-table tbody tr td a .training-image {
    margin-bottom: 1rem;
}
.stream-table tbody tr td a .training-image img {
    border-radius: 1rem;
    width: 4rem;
    height: auto;
}

Иконки тренинга в правом верхнем углу

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

.stream-table tbody tr td a {
    position: relative;
}
.stream-table tbody tr td a .training-image {
    position: absolute;
    top: 0;
    right: 0;
}
.stream-table tbody tr td a:hover {
    top: -1px;
    right: -1px;
}
.stream-table tbody tr td a .training-image img {
    border-radius: 0 calc(1rem - 1px) 0 1rem;
}
.stream-table tbody tr td a .stream-title {
    padding-right: 3rem;
}

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

Иконки тренингов справа внизу

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

.stream-table tbody tr td a {
    position: relative;
}
.stream-table tbody tr td a .training-image {
    margin-bottom: 0;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}
.stream-table tbody tr td a .training-image img {
    border-radius: 1rem;
    width: 8rem;
    height: auto;
}
.stream-table tbody tr td a .stream-title + div {
    padding-right: 9rem;
}

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

Иконки тренингов как фон плитки

Здесь используется обрезка частей изображения, выходящих за пределы плитки, обесцвечивание и понижение непрозрачности. Непрозрачность можно изменить, увеличив свойство opacity.

.stream-table tbody tr td a {
    position: relative;
    overflow: hidden;
}
.stream-table tbody tr td a .training-image {
    margin-bottom: 0;
    position: absolute;
    z-index: 0;
    right: -1rem;
    bottom: -1rem;
}
.stream-table tbody tr td a .training-image img {
    border-radius: 0;
    width: 10rem;
    height: auto;
    opacity: .05;
    filter: grayscale(1);
}

На этом пока всё. По мере появления новых вариантов стилей для иконок тренингов GetCourse, я буду добавлять их в эту статью. Успехов вам!

Подписаться
Уведомить о
guest

0 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Прошу прощения за это всплывающее окно, но закон обязывает уведомить вас о том, что сайт собирает cookies. Продолжая использовать сайт, вы соглашаетесь с Политикой конфиденциальности