Скрипт для вывода иконок тренинга подойдёт для любой школы, независимо от того, используется в ней кастомный дизайн или нет. А вот стили подойдут только для школ, которые используют мой набор для 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, я буду добавлять их в эту статью. Успехов вам!