Далее представлены шаблоны, полезные при оформлении и добавлении изображений в Ваших статьях.
Если Вы хотите получить больше подробностей, примеров употребления, а также информацию о расширенном функционале сайта, пройдите на страницу-оглавление для разделов инструкции по оформлению.
Вы также всегда можете открыть исходный код практически любой страницы на сайте (в том числе этой), чтобы увидеть, как те или иные функции были применены автором статьи.
Содержание |
Добавление изображений
Изображения могут быть добавлены ссылкой или файлом, прикреплённым к статье.
Для прикрепления файла следуйте следующему алгоритму:
Внизу страницы нажмите "Файлы" — нажмите на поле с надписью "Нажмите, чтобы загрузить файл, или перетащите файлы сюда" — при помощи появившегося диалогового окна найдите файл в Вашей файловой системе — выберите файл, нажмите в диалоговом окне "Открыть" — нажмите "Загрузить".
Название файла необходимо использовать в качестве "имени файла" в коде для добавления изображения. Добавить изображение в статью можно при помощи следующего кода:
Код
[[include component:image-block name=имя_файла |caption=Подпись |width=размер_в_пикселях]]
**Особые условия содержания:** SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.
Базовый синтаксис кода:
- "name" — название или адрес файла, который должен отображаться в блоке.
- "caption" — подпись к изображению.
- "width" — ширина изображения.
Результат
Подпись
Особые условия содержания: SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.
Пример загруженного в "Файлы" статьи изображения
Код
[[include component:image-block name=863.jpg|caption=SCP-863|width=100px]]
**Особые условия содержания:** SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.
Результат
![863.jpg](http://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg)
SCP-863
Особые условия содержания: SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.
Пример размещённого в интернете изображения
Код
[[include component:image-block name=https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg|caption=SCP-863|width=100px]]
**Особые условия содержания:** SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.
Результат
![863.jpg](https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg)
SCP-863
Особые условия содержания: SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.
Альтернативный способ добавления изображений [[image]]
Если Вы рассчитываете употребить какие-то свойства CSS относительно изображения, не прибегая к сложным манипуляциям с [[include]], Вам стоит использовать тег [[image]].
[[image]] уникален тем, что может быть размещён в тексте, в отличии от [[include]].
Например, прямо посреди текста , внезапно для читателя. Учтите, что рисунок размещается от нижней границы строки, таким образом занимая верхнее пространство, отодвигая строку от предшествовавших.
Например, таким образом добавляются "точки" классов в списках объектов, которые на самом деле являются картинками. Точно также и с иконками напротив пунктов бокового меню сайта.
Пример употребления тега [[image]]
Код
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg width="100px"]]
**Особые условия содержания:** SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.
Результат
Особые условия содержания: SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.
Классы rimg, limg, cimg
Для оформления тега [[image]] используйте стандартные конструкции классов "rimg", "cimg", "limg".
Код
[[div class="limg"]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg width="100px"]]
[[/div]]
[[div class="cimg"]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg width="100px"]]
[[/div]]
[[div class="rimg"]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg width="100px"]]
[[/div]]
**Особые условия содержания:** SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.
Результат
Особые условия содержания: SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.
Тег "span" внутри классов rimg, limg, cimg
Как видно из результатов, использовать рекомендуется лишь один из доступных классов размещения изображений.
Помимо этого, классы "limg", "cimg", "rimg" имеют свойства, которые позволяют им преобразовывать блоки [[span]] внутри блоков [[div]] в подпись под изображением.
Код
[[div class="limg"]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg width="100px"]]
[[span]]SCP-863[[/span]]
[[/div]]
[[div class="cimg"]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg width="100px"]]
[[span]]SCP-863[[/span]]
[[/div]]
[[div class="rimg"]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-beginners-guide/863.jpg width="100px"]]
[[span]]SCP-863[[/span]]
[[/div]]
**Особые условия содержания:** SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.
Результат
SCP-863
SCP-863
SCP-863
Особые условия содержания: SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.
Свойства и аттрибуты тега [[image]]
Для тега [[image]] предусмотрено несколько свойств, которые вписываются в пределы квадратных скобок.
Название атрибута | Допустимые значения | Пример значения | Описание | Пример употребления |
link | адресное название страницы на сайте или URL | "scp-863", "http://www.example.com", "#anchor", "#" | Изображение становится ссылкой, по нажатии на которую можно перейти на другую страницу; ссылка с апострофом '*' откроет страницу в новом окне; можно применить в отношении якорей на странице с изображением; "#" отправляет экран браузера на верх страницы | [[image 863.jpg link="scp-863"]] ![]() |
alt | текст | "SCP-863" | Замена текста в случае, если картинка недоступна. Также используется поисковыми системами для описания картинки. | [[image 864.jpg alt="SCP-863"]] ![]() |
title | текст | "SCP-863" | Отображает с небольшой задержкой текст при наведении на изображение. Ускорить отображение текста, как и каким-либо образом изменить рамку, шрифт или цвет фона или текста в ней, на стороне сайта невозможно. Для примера употребления подобной системы на стороне сайта обратитесь к системе стандартизации S7. | [[image 863.jpg title="SCP-863"]] ![]() |
width | Количество пикселей или процентов | "200px", "100%" | Применяет указанное значение к ширине изображения. Основной способ задать размер изображения. Если значение указано в процентах — оно будет брать процент размера не от оригинального изображения, а от блока, в котором оно находится. | [[image 863.jpg width="100px"]] ![]() [[image 863.jpg width="50%"]] ![]() [[image 863.jpg width="100%"]] ![]() |
height | Количество пикселей или процентов | "200px", "100%" | Применяет указанное значение к высоте изображения. В отличии от ширины, высота изображения не влияет на его размеры, пока не указана в пикселях. Примеры, когда это свойство применяется в пикселях, мы разберём дальше. | [[image 863.jpg height="100px"]] ![]() [[image 863.jpg height="50%"]] ![]() [[image 863.jpg height="100%"]] ![]() |
style | стандартное CSS-свойство | "border: 1px solid red; padding: 2em;" | Добавляет стиль CSS посредством свойств, перечисленных в атрибуте изображения. Упрощённо говоря, позволяет делать с изображением что угодно в пределах спецификации и поддержки CSS отдельного браузера. При знании CSS Вам будет проще, не открывая Paint, GIMP, Photoshop или иной фоторедактор, редактировать некоторые характеристики изображения. | [[image 863.jpg style="rotate: 15deg;"]] ![]() [[image 863.jpg style="filter: hue-rotate(90deg);"]] ![]() [[image 863.jpg style="transform: scaleX(-1);"]] ![]() |
class или id | класс или id CSS | "mystyle" | Применяет указанный в [[module CSS]] класс или номер к изображению и не только. Рекомендуемый способ редактирования кода, чтобы не засорять текст редактора CSS на каждой картинке, а собрать его в одном месте на странице. Также — наиболее удобный способ применять стили CSS сразу к нескольким изображениям. |
Выравнивание image
Для тега [[image]] предусмотрено выравнивание следующих типов:
- [[=image… - центрирование изображения
![863.jpg](http://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg)
- [[<image… - изображение слева
![863.jpg](http://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg)
- [[>image… - изображение справа
![863.jpg](http://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg)
- [[f<image… - обтекаемое текстом изображение слева
![863.jpg](http://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg)
Особые условия содержания: SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.
- [[f>image… - - обтекаемое текстом изображение справа
![863.jpg](http://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg)
Особые условия содержания: SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.
Свойства CSS в атрибуте style
Возможности изменения изображения с помощью свойств в атрибуте "style" безграничны. По-настоящему раскрыть потенциал CSS на сайте возможно с помощью изучения синтаксиса каскадных стилей, например, с помощью общедоступного словаря/туториала.
Фильтры filter
Фильтры могут применяться не только к изображениям.
[[image 863.jpg width="100"]] | ![]() |
---|---|
[[image 863.jpg style="filter:blur(1px)" width="100"]] [[image 863.jpg style="filter:blur(2px)" width="100"]] | ![]() ![]() |
[[image 863.jpg style="filter:brightness(0.5)" width="100"]] [[image 863.jpg style="filter:brightness(1.5)" width="100"]] | ![]() ![]() |
[[image 863.jpg style="filter:contrast(0.5)" width="100"]] [[image 863.jpg style="filter:contrast(1.5)" width="100"]] | ![]() ![]() |
[[image 863.jpg style="filter:grayscale(0.5)" width="100"]] [[image 863.jpg style="filter:grayscale(1.5)" width="100"]] | ![]() ![]() |
[[image 863.jpg style="filter:hue-rotate(100deg)" width="100"]] [[image 863.jpg style="filter:hue-rotate(360deg)" width="100"]] | ![]() ![]() |
[[image 863.jpg style="filter:invert(1)" width="100"]] [[image 863.jpg style="filter:invert(2)" width="100"]] | ![]() ![]() |
[[image 863.jpg style="filter:opacity(0.5)" width="100"]] [[image 863.jpg style="filter:opacity(1)" width="100"]] | ![]() ![]() |
[[image 863.jpg style="filter:saturate(0.5)" width="100"]] [[image 863.jpg style="filter:saturate(2)" width="100"]] | ![]() ![]() |
[[image 863.jpg style="filter:sepia(0.5)" width="100"]] [[image 863.jpg style="filter:sepia(1)" width="100"]] | ![]() ![]() |
[[image 863.jpg style="filter:drop-shadow(16px 16px 20px red);" width="100"]] [[image 863.jpg style="filter:drop-shadow(6px 6px 2px blue);" width="100"]] | ![]() ![]() |
Добавление изображений через свойство CSS "background"
С помощью свойства "background" становится возможно добавить изображение в качестве фона к блокам [[div]] и [[span]].
Код
**Особые условия содержания:** [[span style="background: url(https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg); background-size: 50px; font-size: 40px;color:transparent;"]]SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены[[/span]].
Результат
Особые условия содержания: SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.
Если мы отойдём на секунду от столь радикального примера употребления тега, Вы можете обратить внимание, что для блоков [[span]] и [[div]] необходимо указывать адрес фонового изображения. Для нашего сайта это, обычно, следующая форма:
- https://files.scpfoundation.net/local--files/ адрес страницы, например, article-design-adding-images/863.jpg
Посмотрим на более вменяемые примеры применения свойства background.
Код
[[div class="cimg" style="height: 480px; width: 720px;"]]
[[div style="display: flex; flex-direction: column; background: url(https://upload.wikimedia.org/wikipedia/en/thumb/4/41/ENERGY_CONVERSION_RESEARCH_LABORATORY_%28ECRL%29.jpg/1200px-ENERGY_CONVERSION_RESEARCH_LABORATORY_%28ECRL%29.jpg?20080613005928); background-size: cover; height: 480px; width: 720px; background-position-y: center; background-position-x: center; background-repeat: no-repeat;"]]
[[div style="color: white !important; font-size: 175%; background: black; font-weight: normal;"]]
Глава N — Электрическая будка
[[/div]]
[[/div]]
[[/div]]
Результат
Глава N — Электрическая будка
Или:
Код
[[module CSS]]
.customHeadings {
font-size: 65%;
filter: grayscale(1) invert(1);
}
.titleBlock {
background: url(https://files.scpfoundation.net/local--files/draft:somewhere-in-nevada/Khunjerab_-_the_snowy_landscape.jpg);
width: 100%;
height: 300px;
background-position: -180px -180px;
filter: grayscale(1);
}
.titleContents {
color: #FFF;
font-weight: normal;
font-size: 190%;
width:75%;
height: 200px;
padding: 50px;
background: linear-gradient(90deg, rgb(0, 0, 0) 10%, rgb(27, 27, 27) 50%, rgba(59, 59, 59, 0) 90%);
}
@media only screen and (max-width: 600px) {
.titleBlock {
font-size: 75%;
}
.customHeadings > ul > li {
padding: 0;
}
.titleContents {
width: 75%;
}
}
[[/module]]
[[div class="titleBlock"]]
[[div class="titleContents"]]
ЗДЕСЬ МОГЛА БЫТЬ ВАША РЕКЛАМА
[[div class="customHeadings"]]
##000|ОГЛАВЛЕНИЕ рассказа:##
**[#anchor-1 ● ЯКОРЬ 1]**
**[#anchor-2 ● ЯКОРЬ 2]**
**[#anchor-3 ● ЯКОРЬ 3]**
[[/div]]
[[/div]]
[[/div]]
Результат
Карусель изображений
Карусель возможно добавить, например, следующим способом:
Квадраты демонстрируют трюк, благодаря которому получается "зациклить" карусель и начинать её заново, без "скачка" от третьего изображения к первому - всего тут четыре изображения, и первое заменяет собой четвёртое, что видно по смене цвета квадрата.
Код для происходящего выше выглядит так:
[!-- КВАДРАТЫ #############################--] [[div class="carousel"]] [[div class="slidingDiv"]] [[div class="div1"]] [[/div]] [[div class="div2"]] [[/div]] [[div class="div3"]] [[/div]] [[/div]] [[/div]] [!-- КАРТИНКИ #############################--] [[div class="carousel" style="overflow: hidden;"]] [[div class="slidingDiv"]] [[div class="div1" style="background: url(https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg); background-size: contain; background-repeat: no-repeat;"]] [[/div]] [[div class="div2" style="background: url(https://files.scpfoundation.net/local--files/scp-864/864-new.jpg); background-size: contain; background-repeat: no-repeat;"]] [[/div]] [[div class="div3" style="background: url(https://files.scpfoundation.net/local--files/scp-862/SCP-862.jpg); background-size: contain; background-repeat: no-repeat;"]] [[/div]] [[div class="div4" style="background: url(https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg); background-size: contain; background-repeat: no-repeat;"]] [[/div]] [[/div]] [[/div]] [[module CSS]] .carousel { width: 150px; background: #eee; overflow: hidden; } .slidingDiv { position: relative; display: flex; right: 150px; animation: slide-in-right 20s infinite both; [!-- анимация для движения блоков --] } @-webkit-keyframes slide-in-right { 0% { -webkit-transform: translateX(150px); transform: translateX(150px); } 33% { -webkit-transform: translateX(0); transform: translateX(0); } 66% { -webkit-transform: translateX(-150px); transform: translateX(-150px); } 100% { -webkit-transform: translateX(-300px); transform: translateX(-300px); } } @keyframes slide-in-right { 0% { -webkit-transform: translateX(150px); transform: translateX(150px); } 33% { -webkit-transform: translateX(0); transform: translateX(0); } 66% { -webkit-transform: translateX(-150px); transform: translateX(-150px); } 100% { -webkit-transform: translateX(-300px); transform: translateX(-300px); } } .div1 { position: relative; background: red; width:150px; height: 150px; order: 1; flex: none; } .div2 { position: relative; background: yellow; width:150px; height: 150px; order: 2; flex: none; } .div3 { position: relative; background: green; width:150px; height: 150px; order: 3; flex: none; } .div4 { position: relative; background: green; width:150px; height: 150px; order: 4; flex: none; } [[/module]]
Принципы работы данной карусели - это тема отдельной инструкции, так как для простой череды изображений, которые Вы можете использовать в статье, Вам достаточно применить следующий код:
[[div style="overflow: overlay; display: flex; width: 150px;"]] [[div style="background: url(https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; flex: none;"]] [[/div]] [[div style="background: url(https://files.scpfoundation.net/local--files/scp-864/864-new.jpg); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; flex: none;"]] [[/div]] [[div style="background: url(https://files.scpfoundation.net/local--files/scp-862/SCP-862.jpg); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; flex: none;"]] [[/div]] [[div style="background: url(https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; flex: none;"]] [[/div]] [[/div]]
В первом блоке [[div]]:
- "overflow: overlay;" отвечает за появление "проматывания" внизу картинок;
- "display: flex;" определяет способ отображения остальных блоков, в которых находятся картинки.
В остальных блоках [[div]]:
- "background-size: contain" позволяет растянуть изображение на все 150×150 пикселов блока в ширину и высоту;
- "background-repeat: no-repeat;" предотвращает повторение изображения, как это выглядит в примере с картинкой, прячущей текст, выше;
- "flex: none;" позволяет выстроить блоки в горизонтальную линию.
Похожий принцип, но уже с "overflow-y", применим для вертикального прокручивания.
[[div style="overflow-y: auto; display: flex; flex-direction: column; height: 150px; width: 150px;"]] [[div style="background: url(https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; flex: none;"]] [[/div]] [[div style="background: url(https://files.scpfoundation.net/local--files/scp-864/864-new.jpg); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; flex: none;"]] [[/div]] [[div style="background: url(https://files.scpfoundation.net/local--files/scp-862/SCP-862.jpg); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; flex: none;"]] [[/div]] [[div style="background: url(https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg); background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; flex: none;"]] [[/div]] [[/div]]
Это лишь два возможных способа решить вопрос "карусели". Возможно также использовать JavaScript и блок [[HTML]] для создания "кнопок", переключающих картинки.
Блоки [[div]] рассматриваются подробно в разделе Настраиваемые блоки, а блок [[HTML]] - в разделе Интерактивный контент.
Ссылка поверх абзаца / текста
[[image]], в некоторых критических случаях применения, может использоваться для создания ссылок на другие страницы поверх текста или иных элементов.
Код
[[div class="blockquote" style="position: relative;"]]
[[image Empty.png width="100%" height="100%;" link="sandbox:scp-template" style="position: absolute; background: aliceblue; opacity: 25%; top: 50%; left: 50%; transform: translate(-50%, -50%);"]]
**Особые условия содержания содержания:** Фиктивная корпорация, контролируемая Фондом, выкупила Голос Графства Дикси, единственную местную новостную службу службу в области влияния [[[scp-2930|SCCP-2930]]]. Местная мобильная оперативная группа 352-Ламед (“Стучащие Стучащие по дереву”) и их Региональный Пресс-Директор Т. Соловски Соловски ответственны за соблюдение соблюдение текущего режима контроля, согласно согласно которому никакие иные местные средства средства массовой информации не могут посещать собрания собрания совета совета Кросс-сити сити и никакие протоколы, записи, стенограммы стенограммы, или цитаты собраний собраний коллектива ратуши Кросс-сити сити не должны попасть в свободный свободный доступ в сеть сеть Интернет.
[[/div]]
Результат
Особые условия содержания содержания: Фиктивная корпорация, контролируемая Фондом, выкупила Голос Графства Дикси, единственную местную новостную службу службу в области влияния SCCP-2930. Местная мобильная оперативная группа 352-Ламед (“Стучащие Стучащие по дереву”) и их Региональный Пресс-Директор Т. Соловски Соловски ответственны за соблюдение соблюдение текущего режима контроля, согласно согласно которому никакие иные местные средства средства массовой информации не могут посещать собрания собрания совета совета Кросс-сити сити и никакие протоколы, записи, стенограммы стенограммы, или цитаты собраний собраний коллектива ратуши Кросс-сити сити не должны попасть в свободный свободный доступ в сеть сеть Интернет.
Несмотря на то, что это относится к настраиваемым блокам, мы опишем применяемые здесь свойства:
- position: relative — позиционирует блок относительно самого себя, не влияя на структуру документа и окружающие блоки;
- position: absolute — позиционирует блок относительно родительского блока, в котором тот находится;
- background: aliceblue — фоновый цвет блока. Сама по себе используемая [[image]] она прозрачная и прикреплена к этой статье файлом Empty.png;
- opacity: 25% — описывает прозрачность блока. В данном случае, он на 75% прозрачен, чтобы видеть текст. Вы, тем не менее, можете использовать это для того, чтобы оставлять "подсказки" о ссылках полупрозрачными элементами;
- top: 50%; left: 50%; transform: translate(-50%, -50%); — три свойства, позиционирующие блок со свойством "position: absolute" относительно родителя. В данном случае это можно интерпретировать как "сместить вниз на 50%; сместить вправо на 50%; трансформировать по горизонтали на 50%; трансформировать по вертикали на 50%". Не спрашивайте, это не я придумал.
Этот приём можно применить хоть на всю страницу целиком, но это рискованно и может караться предупреждением от администрации, если это повлияет на функционал сайта.
Галерея изображений
Вы можете использовать продвинутые приёмы управления каскадными стилями и селекторами, чтобы создать галереи изображений.
Код
[[size 150%]]Для увеличения изображения наведите на него указатель и зажмите левую кнопку мышки.[[/size]]
[[div class="thisFakeGallery"]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]] /* изображение-пример. */
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[image https://files.scpfoundation.net/local--files/sandbox:article-design-adding-images/863.jpg]]
[[/div]] — закрывающий тег для блока.
[[module CSS]]
.thisFakeGallery > p {
display: flex; /* принцип отображения содержимого блока, "гибкое" */
flex-direction: row; /* направление содержимого в виде "строки". Будь здесь пронумерованные изображения, то они шли бы 1-2-3-4-5. Если здесь написать вместо "row" свойство "column", то они пойдут таким порядком вниз по "столбцу". Если добавить "reverse-" в начале "row" или "column", то изображения пойдут в порядке 5-4-3-2-1. */
flex-wrap: wrap;
}
.thisFakeGallery > p > img{
width: 12em;
clear: both;
margin: .5em;
padding: .5em;
/* border: 1px solid black;
background: white; */
transition: transform .2s; /* скорость "роста" изображения при приближении */
cursor: pointer;
}
.thisFakeGallery > p > img:active {
transform: scale(3.0); /* коэффициент приближения, в данном случае составляет 300% */
z-index: 999; /* это правило "поднимает" изображение поверх всех прочих элементов на странице */
}
[[/module]]
Результат
Для увеличения изображения наведите на него указатель и зажмите левую кнопку мышки.
В зависимости от размера изображения Вы можете сделать их больше четырёх в ряд (у меня они четыре в ряд при 16:9 экране).
Кроме того, Вы можете проследовать комментариям в коде и настроить галерею иным образом.
[ОГЛАВЛЕНИЕ]
«С чего начать новичку | Добавление изображений | Настраиваемые блоки»