♓ Ремейк рыбы
или Как без больших хлопот запостить полсотни фот-2
- А зачем полсотни? Кому под силу прокрутить такой постище?
- Возможны разные подходы к ведению журнала. Ежедневные записи тем привлекательней, чем более компактно изложены,
сжать свою гениальную мысль до размеров афоризма в этом случае - выигрышная стратегия.
Другой вариант - сайт на движке блога. С расчетом на вечность на поисковый интерес.
К примеру, посетитель со стороны хочет посмотреть что за "Махтеш" такой, стоит ли туда ехать,
чего ждать от этого места, для такой цели больше подходит если материал собран на одной странице, а не разбросан по записям.
Или последовательное описание веломаршрута, Патиш, тоже нет смысла разрывать на части, хоть там и за сотню иллюстраций.
Спойлеры и кат в блоге удачно позволяют совместить предпочтения, сворачивая подробности для целевых запросов.
С того времени как перекроили движок ЖЖ и форму новой записи, прежние рецепты требуют некоторых уточнений.
Соберем "рыбу"-шаблон заново. Добавив некоторые украшательства:
Картинка с тенью, код для нее -
- Для чего эдакое архитектурное излишество?
- В оформительских наставлениях советуют подбирать кадры по формату, чтобы запись выглядела четкой и стильной;
но одна на всех ширина не всегда хороша - где-то сюжет требует квадрата, где-то вытянутой формы,
виртуальное паспарту выравнивает разнобой прямоугольников и пост получается опрятным.
(рамочки/с тенями можно дорисовать и в фоторедакторе,
но оформлять их в кодах HTML по некоторым причинам предпочтительней)
#c6c9cc; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1100px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a">
# Цифры со значком решетка - код цвета. Желаемый оттенок можно подобрать на одном из сайтов и еще тысячей способов.
И, главный номер программы:
"рыба" на двадцать посадочных мест с предустановленным катом и блоками -
<div style="box-shadow: 4px 3px 9px #40310a"><img title="всплывающая подсказка_1" src="http://ссылка_на_картинку/FotoName_001.jpg" alt="описание картинки(не обязательно)"></div><br> Pыбарыбарыба-----------< <br><br> <lj-cut text="Заглянуть под кат ➥"> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_2" src="http://ссылка_на_картинку/FotoName_002.jpg" alt="описание картинки(не обязательно)"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_3" src="http://ссылка_на_картинку/FotoName_003.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_4" src="http://ссылка_на_картинку/FotoName_004.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_5" src="http://ссылка_на_картинку/FotoName_005.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_6" src="http://ссылка_на_картинку/FotoName_006.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_7" src="http://ссылка_на_картинку/FotoName_007.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_8" src="http://ссылка_на_картинку/FotoName_008.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_9" src="http://ссылка_на_картинку/FotoName_009.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_10" src="http://ссылка_на_картинку/FotoName_010.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_11" src="http://ссылка_на_картинку/FotoName_011.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_12" src="http://ссылка_на_картинку/FotoName_012.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_13" src="http://ссылка_на_картинку/FotoName_013.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_14" src="http://ссылка_на_картинку/FotoName_014.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_15" src="http://ссылка_на_картинку/FotoName_015.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_16" src="http://ссылка_на_картинку/FotoName_016.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_17" src="http://ссылка_на_картинку/FotoName_017.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_18" src="http://ссылка_на_картинку/FotoName_018.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_19" src="http://ссылка_на_картинку/FotoName_019.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< <br><br><br> <div style="BACKGROUND: #ded7ce; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1000px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая подсказка_20" src="http://ссылка_на_картинку/FotoName_020.jpg" alt="описание картинки"></div><br> Pыбарыбарыба-----------< </lj-cut> <br><br><br>
- Зачем в шаблоне "Pыбарыбарыба-----------<" ?- Надпись сподручней убрать автозаменой, если в этом месте комментарий не нужен, чем пустую строку.Шаблон примерный, лучший способ настроить его под себя выясняется на практике.
◘ Выстраиваем видеоряд в желаемом порядке,
просмотрщиков и сортировщиков существует масса, из массы мне больше всего по душе -
FastStone_Image_Viewer
легкая, бесплатная программа с дружественным интерфейсом и подсказками. Картинки тасуются просто перетаскиванием,
пользовательский порядок запоминается. Пикасса и прочие он-лайны тоже так могут, но FSI удобней =)
◘ Там же запускаем переименование
(чтобы пользоваться шаблоном, нужны однотипные имена картинок с последовательной нумерацией)
◘ Грузим файлы на фотохостинг
Кому что привычней. Оптимально, чтоб хост не менял названия файлов.
В противном случае с автозаменой возиться придется дольше.
◘ Открываем "рыбу" в текстовом редакторе (типа Блокнота), "http://ссылка_на_картинку/FotoName" в шаблоне заменяем на актуальный адрес,
автозаменой, разом во всех позициях, в этом и фишка последовательно пронумерованных имен файлов.
◘ Одним глазом смотрим на очередную картинку во вьюире, другим на текст в Блокноте и в нужном месте вставляем комментарии.
Из разных опробованных способов верстки, для ЖЖ этот оказался оптимальным.
Спец-проги для HТМL с просмотром дают тяжелый, сложный код, для блога такой не годится.
Родной визуальный редактор ЖЖ попробовать можно, но зачастую он корежит "рыбу",
по опыту - это немногим лучше, чем набивать пост вообще вручную, поштучно каждый элемент.
Семагик - аналогично, в итоге приходится править абзацы строка за строкой.
◘ Проще сформировать текст полностью в стороннем редакторе и вставить в режиме HТМL при "отключенном автоформате".
На Яндекс-фотках можно получить готовый код сразу для всей последовательности выбранных картинок,
и при желании автозаменой же окружить их блоками и прочими украшательствами.
Как по мне, так с "рыбой" быстрее, но Яндекс тоже вариант.
Трюк на случай, если хостинг дает ссылки с непредсказуемым кодом:Открываем альбом с превьюшками, кнопкой мыши копируем урл выбранной картинки,напр. в Гугл-фото он такой вот:https://lh6.googleusercontent.com/-N8jyO9vmyfQ/TC9LDJACwGI/AAAAAAAAEy4/w9IV-nhdlK4/s128/P1100501.jpgПолучаем адрес того же фото штатным способом:https://lh6.googleusercontent.com/-N8jyO9vmyfQ/TC9LDJACwGI/AAAAAAAAEy4/w9IV-nhdlK4/s800/P1100501.jpgСравниваем, находим отличие и исправляем s128 на s800. Так хотя бы все ссылки добываются на одной странице, в один клик, без лишних перезагрузок.
Из пущих изысков - блок с фоновой картинкой
❞ AkelPad – отличная функциональная замена блокноту Windows
AkelPad - текстовый редактор с открытым исходным кодом, созданный, чтобы быть маленьким и быстрым.
Данная программа позволяет открывать текстовые файлы в различных кодировках. Причем при открытии пользователь может вручную указать, какую кодировку использовать для отображения данного текстового файла. От простого Блокнота инструмент отличают - продвинутый поиск по тексту с поддержкой регулярных выражений, настраиваемые опции автозамены, транслитерация, многоуровневая система отката, наличие списка последних открытых в программе документов, запоминание положения знака вставки и последней строки поиска/замены..
Работает с текстовыми документами в одно- или многооконном режиме, простот и дружелюбен, отличается минимальными потребностями в ресурсах компьютера.
Программу можно бесплатно скачать на сайте разработчика. Русский язык поддерживается.
AkelPad поддерживает подключение дополнительных модулей и дает возможность выводить документ на печать. ❝
прозрачная тень накладывается на фон страницы.
800px; background: url(http://ССЫЛКА_НА_КАРТИНКУ.jpg); PADDING-BOTTOM: 5px; PADDING-TOP: 5px; border: 5px ridge #F0F8FF; border-radius: 9px 0px 9px 0px; box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5);">
❞ СЮДА_ВСТАВЛЯЕМ_ТЕКСТ_ЦИТАТЫ ❝
В том же стиле -
Репост лайт-версия:
Позаимствовано у
fotovivo в Го под деревом ☂
Позаимствовано у
ИМЯРЕК" title="ИМЯРЕК"> в Зашибись, какой пост
ВСТАВИТЬ_ОТРЫВОК_И/ИЛИ КАРТИНКУ
Официальные реквизиты репоста сохраняются,
если кто считает, что это дает какие-то бонусы, то всё на месте,
но вместо копипаст-простыни имеем аккуратную аннотированную ссылку на запись, которой решили поделиться.
Ксл, не всякий репост - спам. Порекомендовать нечто неширокоизвестное - благое дело. Досаждает засорение ленты однообразной рекламой одних и те же персонажей.
Код для четырехлепесткового коллажа, где каждый лепесток - отдельная ссылка:
#link1">http://moya_kartinka_1.jpg); width: 400px; height: 400px; border: 4px solid #ffffff; border-radius: 260px 120px 0px 120px;">#link2">http://moya_kartinka_3.jpg); width: 400px; height: 400px; border: 4px solid #ffffff; border-radius: 120px 260px 120px 0px;">#link3">http://moya_kartinka_2.jpg); width: 400px; height: 400px; border: 4px solid #ffffff; border-radius: 120px 0px 120px 260px; ">#link4">http://moya_kartinka_4.jpg); width: 400px; height: 400px; border: 4px solid #ffffff; border-radius: 0px 120px 280px 120px;">
Код кнопки устроен по тому же принципу блока с закруглениями (без картинок, только хтмл):
