Комментарий от grin3671

Комментарий #10668099
grin3671

в топике Обсуждение клуба CSS-club – настройка внешнего вида сайта10 мая 2024

@Yozoramoon, хм, шаблон, который очень замечательный в e-design это стандартная стена из справки? Если да, то подойдёт шаблон из импортов:

/* Стена постеров различных типов */
@import url("https://css-club.web.app/css/rate_module.min.css");

В «О себе» нужно будет вставить такой код, где последний c-column расширен для использования нестандартных персонажей:

[div=rate_module cc-6-g15]
[div=c-column][animes ids=2966 cover_notice=studio][/div]
[div=c-column][mangas ids=36131][/div]
[div=c-column][mangas ids=9115][/div]
[div=c-column][people ids=79][/div]
[div=c-column][characters ids=7373][/div]
[div=c-column b-catalog_entry data-chara=Nase-Yukana][div=cover]
[div=image-cutter][/div][div=title two_lined]Nase Yukana[/div]
[/div][/div]
[/div]

Чтобы добавить картинку, в «О себе» у атрибута data-chara прописываем имя (без пробелов, только английский), а в CSS к селектору атрибута с этим значением прописываем картинку, используя свойство background-image:

[data-chara=Nase-Yukana] .image-cutter::before {
  background-image: url("https://t.vndb.org/ch/13/80913.jpg");
}

Кроме того, один раз указываем скругление и общие свойства для фона:

.rate_module .image-cutter::before {
  background: center top / cover;
  border-radius: 9px;
}

Результат (последний персонаж из вн «Kanojo no Seiiki»):

909x277

@Yozoramoon

Ответы

Yozoramoon10 мая 2024#

@grin3671, спасибо большое, нравится ваше решение, но если через .rate-module делать у меня артефакты получаются интересные. Решил поделиться отчётом небольшим
По типу (весь код вставил полностью, всё куда надо):

спойлер

1920x316

Имеем то, что у обычных постеров портится размер, а .image-cutter не находит то, что ему нужно
Если я убираю этот класс в div, делаю примерно так:

спойлер

[div=cc-6-g15]
[div=b-catalog_entry c-column data-chara=Nase-Yukana]
[div=cover]
[div=image-cutter][/div]
[div=title two_lined]Nase Yukana[/div]
[/div]
[/div]
[/div]

А также делаю привязку в .css напрямую в куттере для положения картинки

.image-cutter::before {
  background: center center / cover;
  border-radius: 9px;
}

То всё работает, но только с кастомной картинкой (картинка по середине, всё окей):

спойлер

368x396

Если вставить плюсом

[div=c-column][mangas ids=36131][/div]

, он опять глючно отобразит стандартный постер
Вполне возможно в самом E-Design что-то сделано, и имеем такое
В принципе мне и этого достаточно вполне, кастомных персов я могу добавить, что и хотел очень

@grin3671

Твой комментарий

Комментарий #10668099 grin3671

Комментарий #10668099
grin3671