epogrebnyak
commented
3 years ago Размер круга - как в Assignees когда наводишь всплывает кружок - чуть больше чем ишью.
Closed epogrebnyak closed 3 years ago
epogrebnyak
commented
3 years ago Размер круга - как в Assignees когда наводишь всплывает кружок - чуть больше чем ишью.
necelentano
commented
3 years ago Добавил стили для круглой рамки, размер фото 60px X 60px. Пример на этой странице. К сожалению через markdown добавление стилей не поддерживается в Goldmark (только для заголовков).
epogrebnyak
commented
3 years ago Через HTML нормально, в далекой перспективе может быть свой shortcode сделаем, и может его предложим в тему doks - мне кажется он многим полезен.
epogrebnyak
commented
3 years ago @necelentano - небольшое дополнение - мы можем в класс добавить, чтобы при наведении мышки выскакивало маленькое окно с текстом из alt? что-то что по-моему называется onMouseOver. У нас сейчас alt используется для только для текста, если кратинка не найдена.
Из изменение некритичное, если долго делать - то не надо.
epogrebnyak
commented
3 years ago Еще я для картинок, которые не сайта МГИМО сделал static/images/person директорию
necelentano
commented
3 years ago @necelentano - небольшое дополнение - мы можем в класс добавить, чтобы при наведении мышки выскакивало маленькое окно с текстом из alt? что-то что по-моему называется
onMouseOver. У нас сейчас alt используется для только для текста, если кратинка не найдена.Из изменение некритичное, если долго делать - то не надо.
В принципе можно просто использовать html атрибут title.
<img src="https://mgimo.ru/upload/iblock/310/alborova.jpg" alt="Фамилия Имя Отчество" title="Любой текст здесь" class="rounded-photo">
При наведении на фото будет всплывать tooltip с текстом, который укажем в title.
Почитать по ссылке ниже. The alt Attribute Is NOT For Tooltips
necelentano
commented
3 years ago Так как у нас уже есть в зависимостях Bootstrap по идее можно использовать их реализацию. Но там уже и разметка должна быть по их правилам, что возможно создаст трудности для тех, кто будет наполнять сайт содержанием. Bootstrap Tooltips
epogrebnyak
commented
3 years ago @necelentano - спасибо - понял про title, отдельно менять на уровне Bootstrap не будем
epogrebnyak
commented
3 years ago Важный вопрос - мы можем внутри тега IMG задавать обтекание текстом с каким-то допуском и align - влево или вправо?
Мне нужно как-то погрузить картинки людей в текст - одну влево с обтеканием, другую вправо:
necelentano
commented
3 years ago Попробуйте к самой ссылке, внутри которой картинка, добавить специальные классы Bootstrap. Пример.
<a href="https://mgimo.ru/people/kozlovskaya/" class="float-left mr-3 pt-2">
<img
src="https://mgimo.ru/upload/iblock/a9b/kozlovskaya.jpg"
alt="Козловская Елена Александровна"
class="rounded-photo"
/>
</a>Почитать про эти классы здесь.
Результат такой.
epogrebnyak
commented
3 years ago Выглядит отлично, подскажите плс где почитать про mr-10 pt-2?
necelentano
commented
3 years ago По ссылке, которую я давал выше есть инфа об этом. В Bootstrap использую сокращения типа: mr = margin-top pt = padding top Цифра в конце переменная $spacer с множителем = чем больше цифра тем больше внешний (или внутренний) отступ. Ниже выделил основное.
Where property is one of:
m - for classes that set margin
p - for classes that set padding
Where sides is one of:
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:
0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto
(You can add more sizes by adding entries to the $spacers Sass map variable.)
Нам нужно добавлять руководителей программ и других людей на сайт - большие прямоугольные фото для этого не подходят.
Нужен способ вставлять в белом круге фото. Наш основной источник фото - mgimo.ru/people, но можем и у себя сохранять.