Rimon Lusi (fotovivo) wrote,
Rimon Lusi
fotovivo

♓ Ремейк рыбы

или Как без больших хлопот запостить полсотни фот-2

makro





- А зачем полсотни? Кому под силу прокрутить такой постище?
- Возможны разные подходы к ведению журнала. Ежедневные записи тем привлекательней, чем более компактно изложены,
сжать свою гениальную мысль до размеров афоризма в этом случае - выигрышная стратегия.
Другой вариант - сайт на движке блога. С расчетом на вечность на поисковый интерес.
К примеру, посетитель со стороны хочет посмотреть что за "Махтеш" такой, стоит ли туда ехать,
чего ждать от этого места, для такой цели больше подходит если материал собран на одной странице, а не разбросан по записям.
Или последовательное описание веломаршрута, Патиш, тоже нет смысла разрывать на части, хоть там и за сотню иллюстраций.

Спойлеры и кат в блоге удачно позволяют совместить предпочтения, сворачивая подробности для целевых запросов.

С того времени как перекроили движок ЖЖ и форму новой записи, прежние рецепты требуют некоторых уточнений.
Соберем "рыбу"-шаблон заново. Добавив некоторые украшательства:


Картинка с тенью, код для нее -


<div style="DISPLAY: inline-block; box-shadow: 4px 3px 9px #40310a"><img title="всплывающая_подсказка_1" src="http://MY_FOTO.jpg" alt="opisanie"></div>





Подложка под фото -

makro



makro




- Для чего эдакое архитектурное излишество?
- В оформительских наставлениях советуют подбирать кадры по формату, чтобы запись выглядела четкой и стильной;
но одна на всех ширина не всегда хороша - где-то сюжет требует квадрата, где-то вытянутой формы,
виртуальное паспарту выравнивает разнобой прямоугольников и пост получается опрятным.
(рамочки/с тенями можно дорисовать и в фоторедакторе,
но оформлять их в кодах HTML по некоторым причинам предпочтительней)


Код блока с фоном:


<div style="BACKGROUND: #c6c9cc; TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1100px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая_подсказка_1" src="http://MY_FOTO.jpg" alt="opisanie"></div>



# Цифры со значком решетка - код цвета.
Желаемый оттенок можно подобрать на одном из сайтов и еще тысячей способов.




И, главный номер программы:
"рыба" на двадцать посадочных мест с предустановленным катом и блоками -



- Зачем в шаблоне "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.
Так хотя бы все ссылки добываются на одной странице, в один клик, без лишних перезагрузок.




makro



Из пущих изысков - блок с фоновой картинкой


<div style="BACKGROUND: #c6c9cc; background: url(http://fon_kartinka.jpg); TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-TOP: 25px; WIDTH: 1100px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><img title="всплывающая_подсказка_1" src="http://MY_FOTO.jpg" alt="opisanie"></div>




Цитата в рамочке:




AkelPad – отличная функциональная замена блокноту Windows
AkelPad - текстовый редактор с открытым исходным кодом, созданный, чтобы быть маленьким и быстрым.
Данная программа позволяет открывать текстовые файлы в различных кодировках. Причем при открытии пользователь может вручную указать, какую кодировку использовать для отображения данного текстового файла. От простого Блокнота инструмент отличают - продвинутый поиск по тексту с поддержкой регулярных выражений, настраиваемые опции автозамены, транслитерация, многоуровневая система отката, наличие списка последних открытых в программе документов, запоминание положения знака вставки и последней строки поиска/замены..
Работает с текстовыми документами в одно- или многооконном режиме, простот и дружелюбен, отличается минимальными потребностями в ресурсах компьютера.
Программу можно бесплатно скачать на сайте разработчика. Русский язык поддерживается.
AkelPad поддерживает подключение дополнительных модулей и дает возможность выводить документ на печать.




прозрачная тень накладывается на фон страницы.


Код для цитаты:


<div style=" WIDTH: 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);">
<blockquote><span style="font-size: 1.4em">❞</span> СЮДА_ВСТАВЛЯЕМ_ТЕКСТ_ЦИТАТЫ <span style="font-size: 1.4em">❝</span></blockquote></div>





В том же стиле -
Репост лайт-версия:

Позаимствовано у
fotovivo в Го под деревом ☂








код для этой конструкции:


<div style=" BACKGROUND: #ded7ce; PADDING-BOTTOM: 5px; PADDING-TOP: 5px;  WIDTH: 1100px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><blockquote>Позаимствовано у
<lj user="ИМЯРЕК" title="ИМЯРЕК"> в <a href="http://ИМЯРЕК.livejournal.com/00000.html">Зашибись, какой пост</A>
<div class="repost">
<div style=" BACKGROUND: #e3dfdf; PADDING-BOTTOM: 5px; PADDING-TOP: 5px;  WIDTH: 1100px; border-radius: 9px; box-shadow: 2px 1px 4px #40310a"><blockquote>ВСТАВИТЬ_ОТРЫВОК_И/ИЛИ КАРТИНКУ</blockquote></div></DIV></blockquote></DIV>



Официальные реквизиты репоста сохраняются,
если кто считает, что это дает какие-то бонусы, то всё на месте,
но вместо копипаст-простыни имеем аккуратную аннотированную ссылку на запись, которой решили поделиться.


Ксл, не всякий репост - спам.
Порекомендовать нечто неширокоизвестное - благое дело. Досаждает засорение ленты
однообразной рекламой одних и те же персонажей.





На закуску

Иерусалимские разговоры




Код для четырехлепесткового коллажа, где каждый лепесток - отдельная ссылка:



<table border="0" cellpadding="0" cellspacing="1"><tbody><tr><td align="center"><a href="#link1"><p style="background: url(http://moya_kartinka_1.jpg); width: 400px; height: 400px; border: 4px solid #ffffff; border-radius: 260px 120px 0px 120px;"></p></a></td><td align="center"><a href="#link2"><p style=" background: url(http://moya_kartinka_3.jpg); width: 400px; height: 400px; border: 4px solid #ffffff; border-radius: 120px 260px 120px 0px;"></p></a></td></tr><tr><td align="center"><a href="#link3"><p style=" background: url(http://moya_kartinka_2.jpg); width: 400px; height: 400px; border: 4px solid #ffffff; border-radius: 120px 0px 120px 260px; "></p></a></td><td align="center"><a href="#link4"><p style=" background: url(http://moya_kartinka_4.jpg); width: 400px; height: 400px; border: 4px solid #ffffff; border-radius: 0px 120px 280px 120px;"></p></a></td></tr></tbody></table>




Код кнопки устроен по тому же принципу блока с закруглениями (без картинок, только хтмл):


☞ ЖМИ!




Flag Counter

PS
А к чему пункт первый в метках - об этом следующим разом.
Tags: блогоухищрения, веб-штучки
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 65 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →