Рецепт картинок для Twine 2: различия между версиями
Oreolek (обсуждение | вклад) (Новая страница: «[https://www.youtube.com/watch?v=klGqB3BpVW8 Видео от Константина Китманова] [Текст на английском https://twinery.org…») |
Oreolek (обсуждение | вклад) м |
||
Строка 1: | Строка 1: | ||
[https://www.youtube.com/watch?v=klGqB3BpVW8 Видео от Константина Китманова] | [https://www.youtube.com/watch?v=klGqB3BpVW8 Видео от Константина Китманова] | ||
− | [ | + | [https://twinery.org/cookbook/images/chapbook/chapbook_images.html Текст на английском] |
Для простоты пропустим вопрос хостинга. У вас есть HTML, рядом с ним лежит картинка. Название файла картинки нужно будет писать с учётом регистра<ref>т.е. если картинка называется <code>Привет.jpg</code>, её не надо подключать как <code>привет.jpg</code></ref>, потому что иначе оно не запустится онлайн. | Для простоты пропустим вопрос хостинга. У вас есть HTML, рядом с ним лежит картинка. Название файла картинки нужно будет писать с учётом регистра<ref>т.е. если картинка называется <code>Привет.jpg</code>, её не надо подключать как <code>привет.jpg</code></ref>, потому что иначе оно не запустится онлайн. |
Версия 15:29, 24 февраля 2020
Видео от Константина Китманова
Для простоты пропустим вопрос хостинга. У вас есть HTML, рядом с ним лежит картинка. Название файла картинки нужно будет писать с учётом регистра[1], потому что иначе оно не запустится онлайн.
Подключить файл
Достаточно просто написать: <img src="./logo.png" width="256" height="256">
и у вас вставится картинка logo.png
размером 256x256 пикселей.
SugarCube
В SugarCube есть особый тег для картинок: img
.
[img[Описание|Файл.png]] [img[$src]] [img[Файл.png][Ссылка]]
См. документацию на английском.
Зашить картинку в HTML
Придётся потрудиться, но это всё ещё возможно. Чтобы «зашить» картинку в сам HTML файл, её надо перевести в кодировку base64 и вставить в стили:
:: UserStylesheet[stylesheet] .base64image { width: 256px; height: 256px; background-image: url('data:image/png;base64…'); } :: Start <div class="base64image"></div>
Теперь вместо нескольких файлов у вас есть только один. Недостаток такого подхода в том, что размер файла быстро растёт.
Зашить видео в HTML
Приблизительно так же можно делать даже с видео. Не стоит, но мы всё равно вам расскажем, как.
:: Start <video autoplay controls src="data:video/mp4;base64,…"></video>
- ↑ т.е. если картинка называется
Привет.jpg
, её не надо подключать какпривет.jpg