Вторая версия модификации тренингов через более приятную глазу плитку, но уже с возможностью добавить картинку. Обычное оформление плиткой вместе с css кодами можете найти в этой статье (инструкция по установке также там, если вдруг не знаете что и куда). В этом варианте отображается только название тренинга. Описание, количество уроков и преподаватель скрыты.
Сам css код для тренингов на Геткурсе:
body { background-color: #f0f0f0; /*цвет фона*/ } .stream-table { --min-width: 200px; /*ширина плитки в пикселях*/ --height: 250px; /*высота плитки в пикселях*/ } .stream-table td > a > div {display:none;} .stream-table { margin-left:0!important; } .stream-table tbody { display:flex; flex-wrap: wrap; } tr[data-training-id] { display: flex; position: relative; height: var(--height); width: var(--min-width); border-radius: 5px; margin: 0 20px 20px 0; overflow: hidden; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.16); transition: 0.5s ease; } @media (max-width:850px) { .stream-table tbody tr { flex:0 0 calc(49%); } .stream-table tbody tr { height: var(--height); } } @media (max-width:510px) { .stream-table tbody tr { flex:0 0 100%; } } .stream-table tr a { height: 100%; width:100%; z-index: 2; position: relative; } .stream-table tbody tr:hover { box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.10) !important; } .stream-table tbody tr td { position:relative; display:flex; height:100%; width:100%; padding:0!important; background-color: #fff; } .stream-table tr td a { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: inherit; padding: 0 10px 8% 10px; width: 100%; } .stream-table tbody tr td:after { content:""; position:absolute; top:0; left:0; width:100%; height:70%; } .stream-table tbody tr[data-training-id="471055522"] td:after { background:url(https://fs.getcourse.ru/fileservice/file/download/a/95768/sc/104/h/9c884bd4742d192113f65cd868db203c.jpeg) no-repeat; background-size:cover; } .stream-table tbody tr[data-training-id="471055523"] td:after { background:url(https://fs.getcourse.ru/fileservice/file/download/a/95768/sc/125/h/367287fde94879e5a2d07d1e852383cf.jpg) no-repeat; background-size:cover; } .stream-table tbody tr[data-training-id="471055524"] td:after { background:url(https://fs.getcourse.ru/fileservice/file/download/a/95768/sc/508/h/d0cf2c243b97856f3f190647b1210741.jpeg) no-repeat; background-size:cover; }
Здесь я сделал потемнее фон, чтобы плитка лучше выделялась. Заменить цвет или убрать совсем можно во 2 строке. В 7 и 8 строке вы также можете задать размеры плитки. А картинки прописываются в коде с 88 строки. Вам необходимо задать номер тренинга и адрес картинки.
У каждого тренинга/подтренинга есть свой id — это числовой набор в адресной строке, когда вы входите в него. Именно это значение нужно менять в коде.
Ссылку на картинку также прописываете в коде. Само изображение сперва загружаете, например, в хранилище Геткурса, а потом ссылку на файл ставите в код. У меня в примере 3 тренинга. Поэтому в коде 3 конструкции. Они отличаются только id и ссылкой. Вам на каждый раздел нужно копировать данную часть кода и подставлять свои значения.
Здравствуйте, подскажите пожалуйста, если я брала код на аудиоплеер, сразу все работало а теперь не грузит, в чем может быть причина?
добрый день, попробуйте другой файл вставить, будет ли с другим проигрываться.
Здравствуйте, а можно сделать так, чтобы название не отображалось под картинкой?
добрый вечер, выше в блоке, где вы копировали код, замените в строке 85 на 100% — «height:100%»
а после 53 добавьте «font-size: 0px;», чтобы текст уменьшить
Спасибо большое, все получилось))
Только теперь почему то плитки не открываются после добавления индекса((
да, простите, сразу не посмотрел, я поправил комментарий выше. А добавленную «z-index: 10;» удалите
огонь!!! все теперь работает))) спасибо)
Здравствуйте. Скажите пожалуйста, как выровнять название урока по высоте-по центру?
добавил тут код для плиток с выравниванием по центру — https://hellogc.blog/style/menjaem-vid-treningov-i-podtreningov/
Все получилось, спасибо.
Только у меня почему-то затенение какое-то на всех плитках и картинках. нечеткое все, словно пелена сверху навелась.
Сорри, все в порядке.
Спасибо большое, все получилось!
Добрый вечер,
Спасибо за код! У меня картинки (обложки) почему то выбелены, как бывают выбелены неактивные подтренинги, хоть настройки доступа проставлены. Подскажите пожалуйста, в чем может быть ошибка?
Добрый вечер, вы правильно заметили — это ГК «выбеливает» их, в коде там ничего такого нет. Если доступ настроен верно, то может из-за отсутствия уроков то же самое быть. Уроки есть внутри?
Ой нет, уроки я пока не добавляла. Сейчас попробую, спасибо за обратную связь !
Добрый день! Все сделала по инструкции, но картинки почему-то не отображаются(
Добрый день, может неверно прописали путь к картинкам или ID тренингов в коде? Сейчас попробовал установить на новый курс, скопировал код, заменил ID и картинки отображаются на обложках
не работает код, фото не вставляются
Сейчас на новом тренинге у себя проверил — всё без изменений, работает код. Может ошиблись при замене id тренинга и ссылки на картинку?