После не долгого общения, ТС взялся за составление тестового СЯ для форума. Я рассказал в каком формате хотел бы видеть готовое СЯ и работа закипела. В данный момент жду выполнение заказа и приступаю к тестированию. О результатах обязательно отпишусь. Первое впечатление положительное. Надеюсь, что получиться у нас плодотворное сотрудничество.
Sitealert: Прошу прощения, на сегодня у меня работоспособность закончилась.:o
Ничего страшного ;) Большое спасибо за помощь в решении проблемы.
totamon: вроде без js не получится ваша задача... нужно вычислять, что больше ширина или высота, и меньшей стороне присваивать или ширину 100% или высоту 100%
Очень надеюсь, что без скриптов получиться все реализовать :o
tommy-gung: проще было ссылку на страницу дать, чем тут заниматься догадками
Не особо хотел палить пациента, ну если так проще, то проверяю на этом посте.
Сейчас включены настройки размеров в админке
HTML width and height attributes. e.g. width="180" height="124"
Sitealert, есть такое. Поэтому я и выклыдаваю промежуточные этапу, чтобы потом можно было понять хронологию событий, с чего начинали и что получили. По большому счету, сейчас осталось прикрутить object-fit: cover; и понять, почему заголовок не переносится. Это увы выше моих способностей 🤣
Sitealert: Хоть какая-то система с размерами и ориентацией картинок есть? Подогнать картинки по высоте, чтобы у вертикальных картинок были боковые поля?
Не, надо заполнить всю область, кок вот тут на примере с фоткой белок
Sitealert, да, но не так координально же ))) Тем более, что при таком "обрезании" не умещается полностью заголовок поста. Если обратите внимание, в предыдущих скринах он занимал 2 строчки, а в нынешнем одну.
Дублирую, то, что мне необходимо было:
В голове родилась мысль подгонялось по высоте под 125px, а ширину пропорционально. Если ширина на выходе больше 180px, то часть картинки обрезается (скрывается). Ширина блока должна быть строго 180px.
Но с другой стороны, если первое изображение поста вертикальное, что подогнав его по высоте в 125px мы получим большие отступы по краям. Что так же не презентабельно будет смотреться.
Прошу помощи в окультуривании всего этого хозяйства, чтобы картинка помещалась в размеры 180х125, а все, что не поместилось - обрезалось стилями.
Sitealert, нет. То, что они в ряд - это отлично, так и надо. А вот отступов между ними нет и картинка прижата к верхнему краю. Сейчас пытаюсь своими силами подшаманить, пока не особо получается ...
Вот как это выглядит с теми стилями, что я выложил в первом посте. Там, где размозня - названия постов, которые берутся из заголовка записи
После не долгого общения, ТС взялся за составление тестового СЯ для форума. Я рассказал в каком формате хотел бы видеть готовое СЯ и работа закипела. В данный момент жду выполнение заказа и приступаю к тестированию. О результатах обязательно отпишусь. Первое впечатление положительное. Надеюсь, что получиться у нас плодотворное сотрудничество.
Для форумов есть возможность составить СЯ ?
Тарифные планы:
До 100 ключей: за отзыв, делаем бесплатно.
Если такой тарифный план еще действует, то заказал бы для теста. Если все будет отлично - продолжу сотрудничество в более крупных размерах.
Sitealert, Спасибо большое. Все работает, как надо ))) Пошел довольный тестировать 🍿
Прошу прощения, на сегодня у меня работоспособность закончилась.:o
Ничего страшного ;) Большое спасибо за помощь в решении проблемы.
вроде без js не получится ваша задача... нужно вычислять, что больше ширина или высота, и меньшей стороне присваивать или ширину 100% или высоту 100%
Очень надеюсь, что без скриптов получиться все реализовать :o
проще было ссылку на страницу дать, чем тут заниматься догадками
Не особо хотел палить пациента, ну если так проще, то проверяю на этом посте.
Сейчас включены настройки размеров в админке
Sitealert, есть такое. Поэтому я и выклыдаваю промежуточные этапу, чтобы потом можно было понять хронологию событий, с чего начинали и что получили. По большому счету, сейчас осталось прикрутить object-fit: cover; и понять, почему заголовок не переносится. Это увы выше моих способностей 🤣
Хоть какая-то система с размерами и ориентацией картинок есть? Подогнать картинки по высоте, чтобы у вертикальных картинок были боковые поля?
Не, надо заполнить всю область, кок вот тут на примере с фоткой белок
Sitealert, да, но не так координально же ))) Тем более, что при таком "обрезании" не умещается полностью заголовок поста. Если обратите внимание, в предыдущих скринах он занимал 2 строчки, а в нынешнем одну.
Дублирую, то, что мне необходимо было:
Но с другой стороны, если первое изображение поста вертикальное, что подогнав его по высоте в 125px мы получим большие отступы по краям. Что так же не презентабельно будет смотреться.
Прошу помощи в окультуривании всего этого хозяйства, чтобы картинка помещалась в размеры 180х125, а все, что не поместилось - обрезалось стилями.
Неа (((
Появляется непонятный отступ снизу и картинка все равно не помещается.
.crp_related {
clear: both;
margin: 10px 0;
}
.crp_related h3 {
margin: 0 !important;
}
.crp_related ul {
list-style: none;
float: left;
margin: 0 !important;
padding: 0 !important;
}
.crp_related li, .crp_related a {
float: left;
overflow: hidden;
position: relative;
text-align: center;
}
.crp_related li {
margin: 5px !important;
border: 1px solid #ddd;
padding: 6px;
width: 180px;
height: 125px;
}
.crp_related li:hover {
background: #eee;
border-color: #bbb;
}
.crp_related a {
box-shadow: none !important;
text-decoration: none !important;
height: 100px;
}
.crp_related a:hover {
text-decoration: none;
}
.crp_related .crp_title {
color: #fff !important;
position: absolute;
bottom: 0;
padding: 3px;
color: #fff;
font-size: .9em;
text-shadow: 1000 .1em .1em .2em;
background: rgb(0.5, 0.5, 0.5);
background: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.crp_related li:hover .crp_title {
background: rgb(0.2, 0.2, 0.2);
background: rgba(0, 0, 0, 0.8);
}
.crp_related li {
vertical-align: bottom;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.crp_clear {
clear: both;
}
.crp_title:visited {
color: #fff !important;
}
Как только не пытался впихнуть этот триклятый object-fit: cover; - не хочет работать :(
Sitealert, нет. То, что они в ряд - это отлично, так и надо. А вот отступов между ними нет и картинка прижата к верхнему краю. Сейчас пытаюсь своими силами подшаманить, пока не особо получается ...
Вот как это выглядит с теми стилями, что я выложил в первом посте. Там, где размозня - названия постов, которые берутся из заголовка записи
С твоими стилями вывод приобретает вот такой вид:
tommy-gung, не, немного не то ((( Получается 3 слипшихся квадрата в ряд ...
tommy-gung, в коде это выглядит примерно вот так, только в 1 строчку