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

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

Аватар пользователя 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 не захотел работать и глючил, убрал.
Чем можно отслеживать, кто портит жизнь? Потому что откатывать сайт в третий раз очень лень и непонятно не вернется ли это еще раз.

Аватар пользователя Dusk Dusk 11 ноября в 7:49

В общем решил таки попробовать Bootstrap5. А перед этим сделать копию. Копию сделать не вышло, часть таблиц не загружается, не смогли даже beget восстановить, говорят какие-то модули кешируют, по итогу тексты есть только в профилях пользователей.
Однако Bootstrap5 избавил меня от всех проблем с CSS, кроме картинок, на картинки маска не ложится, хотя при этом у одного психолога ок. Видать проблема в каком-то модуле, может в Paragraph, я его не использовал ранее.

Еще народ пишет про Сloudflare и проблему с ним.
https://www.drupal.org/project/drupal/issues/3393274

Когда РКН ломал сеть этот сайт конечно начал глючит и вообще на него невозможно было зайти. При это мой второй сайт на Drupal 10 с такими же настройками в Сloudflare и более того с этой же шкурой вообще никак не реагировал блокировку РКН.

Выходит и Сloudflare вроде не виноват.

Впервые сталкиваюсь с таким, я много несложных проектов делал начиная с Drupal 5, сейчас все летит на самых простых вещах.

Аватар пользователя VasyOK VasyOK 11 ноября в 18:38

Dusk, единственное, что нужно это прессетом до квадрата картинку обрезать и CSS подправить. Пока что, ерундень пишете.
Bootstrap - требует знания его классов и возможно работы с CSS препроцессорами. Хотите - изучайте.

Аватар пользователя Dusk Dusk 12 ноября в 16:53

Почитайте, почитайте что люди люди пишут по ссылке. Неужели вы думаете, я не могу строку в CSS вставить? А сейчас и строка не нужна, я маску сделал и она не работает.

А по делу, в итоге отключив объединение CSS и JS файлов на сайте, отключив проксирование и установив передачу данных на TLS 1.0 на CF сайт стал более-менее работать.