• A
  • A
  • A
  • АБВ
  • АБВ
  • АБВ
  • А
  • А
  • А
  • А
  • А
Обычная версия сайта

Специальные шаблоны

Круглое фото

Цитата


Нажмите на кнопку «Использовать шаблон».

 

Круглое фото

Новый дизайн портала НИУ ВШЭ позволят публиковать на страницах круглые фотографии. Наиболее часто они используются при составлении списков сотрудников подразделений и участников различных проектов. Сделать аккуратный список персон вы можете с помощью шаблона (вторая иконка слева в верхнем ряду панели инструментов). При этом картинки будут получать круглую форму автоматически. Для этого необходимо выбрать среди шаблонов «круглое фото с текстом» и подтвердить добавление. В новом диалоговом окне выберите, является ли человек, которого Вы собираетесь добавить, сотрудником НИУ ВШЭ или нет. Для сотрудника просто введите в окно поиска ФИО и нажмите Enter или «найти», выберите из списка нужную персону. Должность Вы также можете выбрать из выпадающего списка или написать самостоятельно. Если человек не является сотрудником НИУ ВШЭ, Вы можете вручную вписать ФИО и должность в диалоговом окне, а также у Вас есть возможность загрузить фотографию и выбрать, как она будет отображаться на сайте (для этого после загрузки фото обязательно нажмите кнопку "Вырезать" и выберите фрагмент, который будет отображаться на странице). После подтверждения персоны в поле редактирования текста появится круглое фото с ФИО и должностью, справа от фото можно добавить текст.

В режиме "html" код размещённого файла выглядит следующим образом:
<div class="b-greetings__item congratulationDialog _mceNonEditable">
<div class="b-greetings__person small">
<div class="g-pic"><img src="/mirror/org/persons/cimage/0012154" alt="" /></div>
<div class="b-greetings__person_data small"><a href="http://www.hse.ru/org/persons/0012154" class="b link_dark2 link mceEditable">Фамилия Имя Отчество</a>
<p class="mceEditable">должность</p>
</div>
</div>
<div class="b-greetings__descr selcontent mceEditable">&nbsp;</div>
</div>

где

<div class="g-pic"><img src="/mirror/org/persons/cimage/0012154" alt="" /></div> — фото
<div class="b-greetings__person_data small"><a href="http://www.hse.ru/org/persons/0012154" class="b link_dark2 link mceEditable">Фамилия Имя Отчество</a> — фамилия, имя, отчество человека, информация о котором размещается, и ссылка на его страницу.
<p class="mceEditable">должность</p> — должность или какая либо дополнительная информация о человека
<div class="b-greetings__descr selcontent mceEditable">&nbsp;</div> — правая, текстовая часть блока "Круглое фото с текстом" а том случае, если никакого текста нет. Если размещается какой-либо текст справа от фото, вместо "&nbsp;" в коде будет показан добавленный текст.

Чтобы в html-коде найти информацию о нужном человеке, нажимаем на кнопку HTML в панели инструментов редакторского интерфейса. В открывшемся окне нажимаем сочетание клавиш Ctrl+F. В строку поиска вписываем ФИО искомого человека и нажимаем "Найти" или Enter.

Если необходимо удалить информацию о человеке, полностью удаляем блок вида

<div class="b-greetings__item congratulationDialog _mceNonEditable">
<div class="b-greetings__person small">
<div class="g-pic"><img src="/mirror/org/persons/cimage/0012154" alt="" /></div>
<div class="b-greetings__person_data small"><a href="http://www.hse.ru/org/persons/0012154" class="b link_dark2 link mceEditable">Фамилия Имя Отчество</a>
<p class="mceEditable">должность</p>
</div>
</div>
<div class="b-greetings__descr selcontent mceEditable">&nbsp;</div>
</div>

Обращайте особое внимание на первую и последнюю строчку данного блока.

 

Однако если по какой-то причине Вам этот способ не подходит, а Вы хотите использовать круглые фотографии, Вы можете скруглить фото вручную. Убедитесь, что в оригинале ваша фотография квадратная. Оптимальный размер для списка персон — 100x100px. В противном случае на выходе вы получите не круг, а овал.

Нажмите иконку добавления изображения, выберите нужный файл и нажмите кнопку «Загрузить». В браузере откроется окно следующего вида:

Перейдите на вкладку «Положение». Переключите значение Класса с --не установлено-- на (значение).

В появившейся строке пропишите класс g-pic.

Затем нажмите кнопку «Вставить» — фотография опубликуется круглой.

 

Цитата

В выпадающем списке выберите пункт «цитата» и нажмите кнопку добавить. В новом диалоговом окне выберите,  является ли человек, которого Вы собираетесь процитировать, сотрудником НИУ ВШЭ или нет. Для сотрудника просто введите в окно поиска ФИО и нажмите Enter или «найти», выберите из списка нужную персону. Должность Вы также можете выбрать из выпадающего списка или написать самостоятельно. Если автор цитаты не является сотрудником НИУ ВШЭ, Вы можете вручную вписать ФИО и должность в диалоговом окне, а также у Вас есть возможность загрузить фотографию и выбрать, как она будет отображаться на сайте (для этого после загрузки фото обязательно нажмите кнопку "Вырезать" и выберите фрагмент, который будет отображаться на странице). Можно вовсе не указывать, кому принадлежит цитата, просто оставив пустыми поля и нажав «ок» в этом окне. После подтверждения внесенных данных в форме выбора персоны в текстовом редакторе появится блок цитаты, куда необходимо внести ее текст. Цитата на портале будет выглядеть следующим образом:


 

Нашли опечатку?
Выделите её, нажмите Ctrl+Enter и отправьте нам уведомление. Спасибо за участие!