Оформление тренингов с картинкой

Вторая версия модификации тренингов через более приятную глазу плитку, но уже с возможностью добавить картинку. Обычное оформление плиткой вместе с 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 и ссылкой. Вам на каждый раздел нужно копировать данную часть кода и подставлять свои значения.

css код для тренингов
Оцените статью
Добавить комментарий

  1. Анастасия

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

    Ответить
    1. Василий Брежнев автор

      добрый день, попробуйте другой файл вставить, будет ли с другим проигрываться.

      Ответить
  2. Наталья

    Здравствуйте, а можно сделать так, чтобы название не отображалось под картинкой?

    Ответить
    1. Василий Брежнев автор

      добрый вечер, выше в блоке, где вы копировали код, замените в строке 85 на 100% — «height:100%»
      а после 53 добавьте «font-size: 0px;», чтобы текст уменьшить

      Ответить
      1. Наталья

        Спасибо большое, все получилось))

        Ответить
      2. Наталья

        Только теперь почему то плитки не открываются после добавления индекса((

        Ответить
        1. Василий Брежнев автор

          да, простите, сразу не посмотрел, я поправил комментарий выше. А добавленную «z-index: 10;» удалите

          Ответить
          1. Наталья

            огонь!!! все теперь работает))) спасибо)

  3. Екатерина

    Здравствуйте. Скажите пожалуйста, как выровнять название урока по высоте-по центру?

    Ответить
    1. Василий Брежнев автор

      добавил тут код для плиток с выравниванием по центру — https://hellogc.blog/style/menjaem-vid-treningov-i-podtreningov/

      Ответить
  4. Свят

    Все получилось, спасибо.
    Только у меня почему-то затенение какое-то на всех плитках и картинках. нечеткое все, словно пелена сверху навелась.

    Ответить
  5. Свят

    Сорри, все в порядке.

    Ответить
  6. Свят

    Спасибо большое, все получилось!

    Ответить
  7. Алина

    Добрый вечер,

    Спасибо за код! У меня картинки (обложки) почему то выбелены, как бывают выбелены неактивные подтренинги, хоть настройки доступа проставлены. Подскажите пожалуйста, в чем может быть ошибка?

    Ответить
    1. Василий Брежнев автор

      Добрый вечер, вы правильно заметили — это ГК «выбеливает» их, в коде там ничего такого нет. Если доступ настроен верно, то может из-за отсутствия уроков то же самое быть. Уроки есть внутри?

      Ответить
      1. Алина

        Ой нет, уроки я пока не добавляла. Сейчас попробую, спасибо за обратную связь !

        Ответить
  8. Евгения

    Добрый день! Все сделала по инструкции, но картинки почему-то не отображаются(

    Ответить
    1. Василий Брежнев автор

      Добрый день, может неверно прописали путь к картинкам или ID тренингов в коде? Сейчас попробовал установить на новый курс, скопировал код, заменил ID и картинки отображаются на обложках

      Ответить
  9. Оксана

    не работает код, фото не вставляются

    Ответить
    1. Василий Брежнев автор

      Сейчас на новом тренинге у себя проверил — всё без изменений, работает код. Может ошиблись при замене id тренинга и ссылки на картинку?

      Ответить