Кружочек из фотки

Главные вкладки

Аватар пользователя Dusk Dusk 8 октября в 3:38

Юзаю Olivero и не стесняюсь, мне очень понравилась тема, поставил на два сайта и вообще я фанат Drupal, а пробовал лет 15 назад 4-5 фигни... В общем лого ставлю, но эт лирика. Поскольку перерывы у меня в 3 года, я все забываю и сейчас отвлечен основной профессией. Но хочется ковыряться. Я даже вытрахал мозг beget и они научили меня ставить модули через composer Dirol . В смысле я выучил 2 команды. Всем рекомендую (хостинг, а не траханье мозга)

Вопрос, можно ли кружочки из Olivero использовать или они вшиты в тему? Мне под дизайн и мою любовь к кружочкам хочется всех юзверей ими сделать, пока не понял как это сделать средствами Image Effects.
Это либо css как-то закругляет, либо кто-то обрезает белый круг у фотки, кто?

Комментарии

Аватар пользователя cwpnaWLs7M4a cwpnaWLs7M4a 14 октября в 13:38

картинка прямоугольная. округляется с помощью класса:

.teaser__image img {
    width: var(--sp3-5);
    height: var(--sp3-5);
    object-fit: cover;
    border-radius: 50%;
}
Аватар пользователя Dusk Dusk 15 октября в 1:09

jura12 wrote:
картинка прямоугольная. округляется с помощью класса:

.teaser__image img {
    width: var(--sp3-5);
    height: var(--sp3-5);
    object-fit: cover;
    border-radius: 50%;
}

Да, эт я понимаю, я хочу, чтобы как на приличных сайтах человек сам мог выбрать, но в пресетте был бы круг

Аватар пользователя Dusk Dusk 15 октября в 2:35

jura12 wrote:
картинка прямоугольная. округляется с помощью класса:

.teaser__image img {
    width: var(--sp3-5);
    height: var(--sp3-5);
    object-fit: cover;
    border-radius: 50%;
}

Но можно прописать, а пресет сделать средствами Друпала.
А можете подсказать, что здесь за класс картинки, я отупел, не вижу в хроме:
https://o2.social/psychologists/anima

Аватар пользователя Dusk Dusk 15 октября в 3:18

Мне кажется проще пресет сделать, но нет таких вариантов в готовых, чтобы удалили все за округлой областью, хотя, блин должны быть уже.

Аватар пользователя Dusk Dusk 16 октября в 20:04

Во Вьюхе победил кружочек, там просто созданный класс добавил, а вот в сам документ как вписать класс, пока не понял (

Аватар пользователя VasyOK VasyOK 17 октября в 2:01

Прессет для того, чтобы сделать кружечек - не надо. Это возможно. Но давайте без технопорна.
Лучше ссылку дайте: где хотите кружечек сделать.

Аватар пользователя Dusk Dusk 17 октября в 2:14

Дык вот, вписал в css свой класс и добавил его во вьюху: { border-radius: 50%;} и с наследуемыми признаками от img завелось, хотя в хроме по-моему так и не работает.

А как здесь переопределить или добавить к img не знаю
https://o2.social/psychologists/aleksey-ezhkov

Аватар пользователя VasyOK VasyOK 17 октября в 2:32

Вот здесь надо прессет. Но только чтоб до квадрата обрезать например до 244px.

В CSS можно так:

.field--name-user-picture {
  border-radius: 50%;
  overflow: hidden;    
  width: 244px;
}

Или так:

.field--name-user-picture a {
  border-radius: 50%;
  overflow: hidden;
  width: 244px;
  display: block;
}

Потом тут (думаю понимаете зачем):

.field--name-user-picture a img {
  margin: 0;
}
Аватар пользователя Dusk Dusk 18 октября в 13:46

320 в прессете тоже сделать?
Сейчас везде 244 поставил.
В разных браузерах все по-разному, и только у одного психолого везде круг, картинка изначально квадратная.
https://o2.social/psychologists/zhanna-gureva
Какой-то треш)

Аватар пользователя VasyOK VasyOK 18 октября в 20:51

Прессет Scale and crop ( Масштабировать и обрезать) до пускай 320. Можно другое значение.
И в настройках отображения поля пользователя это прессет должен быть.

Аватар пользователя Dusk Dusk 1 ноября в 0:56

VasyOK wrote:
Прессет Scale and crop ( Масштабировать и обрезать) до пускай 320. Можно другое значение.
И в настройках отображения поля пользователя это прессет должен быть.

В общем в итоге я просто сделал маску в прессете, потому что это невозможно уже.
Причем, если включать в Управлении отображением Учётная запись пользователя, то вуаля css c кружочком работает, мой же прессет нет, компактный режим живет как хочет.

Но дело стало еще хуже я не отследил, но в какой-то момент слетел CSS у нескольких страниц, причем это простые страницы, ну одна точно:
https://o2.social/about
Причем в разных браузерах все по-разному, жесть какая-то, а выбрал Olivero, надеясь, что уж тема из коробки должна быть вылизана. Кажется, я ошибся. Чего-то дикого не делаю и такие косяки.
Ну, вот Oneall.login не захотел работать и глючил, убрал.
Чем можно отслеживать, кто портит жизнь? Потому что откатывать сайт в третий раз очень лень и непонятно не вернется ли это еще раз.