Восемь лет назад я добавил на этот сайт раздел «Заметки». Я настроил его так, чтобы заметки можно было синдицировать в Twitter. С тех пор это единственный способ публикации в Twitter.
Несколько месяцев спустя я добавил к своим заметкам фотографии. И снова это стало синдицироваться в Twitter.
Однако кое-что беспокоило меня уже долгое время. Изначально я думал, что если я размещу фотографию, то сопроводительный текст будет служить описанием изображения. Он мог бы эффективно действовать как alt текст для изображения, думал я. Но на практике так не получалось. Текст часто был комментарием к изображению, а это не то же самое, что описание содержимого.
Мне нужен был способ хранения текста alt для изображений. Усложняя ситуацию, можно было сделать так, чтобы в одной заметке было несколько изображений. Поэтому, несмотря на то, что заметка была одной строкой в моей базе данных, мне каким-то образом требовалась отдельная строка текста с описанием каждого изображения в одной заметке.
В итоге я остановился на использовании файловой системы вместо базы данных. Сами изображения хранятся в отдельных папках, поэтому я решил, что в каждой папке можно иметь сопроводительный файл alt.txt.
Возьмем для примера эту вчерашнюю заметку. Изображение разных размеров хранится в папке /images/uploaded/19077. Вот маленькая версия изображения, а вот оригинал. В этой же папке находится текст alt.
Это означает, что я читаю файл каждый раз, когда мне нужен текст alt, вместо того, чтобы читать из базы данных, что, вероятно, не самый эффективный способ, но, похоже, он работает нормально.
Вот еще один пример:
- исходное изображение,
- файл
alt.txt, и - сама заметка.
Чтобы добавить текст alt к изображению, мне нужно было обновить интерфейс публикации. По умолчанию это небольшая textarea, за которой следует загрузка файла input, а затем переключатель (чекбокс под капотом), чтобы выбрать, нужно ли синдицировать заметку в Twitter.
Теперь интерфейс обновляется автоматически, как только я использую этот input type="file" для выбора любых изображений для заметки. Используя API FileReader, я показываю предварительный просмотр выбранных изображений сразу после ввода файла.
Вот код, если вам когда-нибудь понадобится сделать что-то подобное. Я несколько абстрагировал его в этом списке — вы сможете вставить его в любую страницу, включающую input type="file" accept="image/*", и он будет автоматически генерировать превью.
Я был приятно удивлен тем, насколько это просто. API FileReader работал, как и ожидалось, без каких-либо проблем. Думаю, я всегда предполагал, что это будет довольно сложно сделать, потому что когда-то это было довольно сложно (или невозможно) сделать. Но теперь это удивительно просто. История о паутине.
Моя собственная версия скрипта делает немного больше; она также генерирует еще одну маленькую textarea сразу после каждого предварительного просмотра изображения, где я пишу сопроводительный текст alt.
Я также обновил скрипт на стороне сервера, который обрабатывает синдикацию в Twitter. Я использую метод /media/metadata/create для создания текста alt. Но по какой-то причине он не работает. Я не могу понять, почему. Я буду продолжать работать над этим.
А пока, если вы смотрите на изображение, которое я разместил в Twitter, и осуждаете меня за отсутствие текста alt, приношу свои извинения. Но каждый мой твит содержит ссылку на оригинальную заметку на этом сайте, и вы обязательно найдете там текст alt для изображения.