Пинтерест – наше всё.  Спустя не один месяц увлечения пинтерестом и не один год увлечения блогеньем я наконец сообразила, как сделать фотографии в блоге удобными для пинтереста.  В технике я соображаю долго.  Зато я нюхаю и слышу хорошо.  Щас я вам про пинтерест и фотографии расскажу очень подробно.  Вы знаете, мне только дай повод, я стока букофф напишу – зачитаешься.

Сегодня мой повод – как сделать html-код фотографии удобным для пинтереста, чтобы фото можно было запинить сразу из блога, и в пинтересте сразу было описание фотографии.

Фишка фотографии в атрибутах alt и title.

Все фотографии моего блога хранятся на фликре.  Не спрашивайте меня, почему.  Раньше все фотографии на фликре хранили, ну и я тоже начала.  Вполне возможно, это не самый оптимальный способ, но мне нравится.  Бесплатно, удобно, все дела.

Для примера у нас сегодня фотография Муси, у меня на жёстком диске она называется musia-the-black-cat-for-pinterest.jpg.  Фликр по умолчанию ставит в поле title и alt ваше название фотографии.  Ниже мы увидим, что мы сами хозяева своей судьбы, и можем легко атрибуты тайтл и альт менять, как нам заблагорассудится.

Я загрузила фотографию на фликр, и выбрала embed – вставить фото, значит.  Фликр сгенерировал такой код:

<a data-flickr-embed=”true”  href=”https://www.flickr.com/photos/76958872@N05/24572256290/in/dateposted/” title=”musia-the-black-cat-for-pinterest”><img src=”https://farm2.staticflickr.com/1488/24572256290_60f2a2f37f_z.jpg” width=”240″ height=”320″ alt=”musia-the-black-cat-for-pinterest”></a><script async src=”//embedr.flickr.com/assets/client-code.js” charset=”utf-8″></script>

вот эта фотография:

видите выделенные зелёным части?  Если мы их оставим, как есть, то на сайт вместе с фотографией вставится фликровый скрипт. Я предпочитаю его убирать из кода, оставлять только саму фотографию.  Выделенный зелёным текст просто удаляем.

Вот код, который я вижу в хтмл-коде своего блога, и вот фото, которое вы видите на странице:

<a href=”https://www.flickr.com/photos/76958872@N05/24572256290/in/dateposted/” title=”musia-the-black-cat-for-pinterest”><img src=”https://farm2.staticflickr.com/1488/24572256290_60f2a2f37f_z.jpg” width=”480″ height=”640″ alt=”musia-the-black-cat-for-pinterest”></a>

href – ссылка, куда ведёт нажатие на фотографию, в моём случае фликр; src – источник фото, т.е. адрес, где лежит фотография, размер и атрибуты alt – альтернативный текст и title – название.  Фликр автоматически в поле title и alt вставляет название, под каким файл хранился на жёстком диске.  Оба эти атрибута можно менять в коде мануально, делать такими, как вам удобно.

Title – это всплывающий текст, который посетитель сайта видит, когда наводит мышь на изображение.  Наведите мышь на фото ниже:

А вот как выглядит атрибут title в хтмл-коде фотографии:
<a href=”https://www.flickr.com/photos/76958872@N05/24572256290/in/dateposted/” title=”Видите, вы навели мышь на эту фотографию и всплыл вот такой текст.  Это я его вставила в атрибут тайтл.  Вот какая я молодец.“>

Какой текст я сама в этот тайтл напишу, такой и будет появляться при наведении мыши на фото.

А теперь – то, с чего мы начали сегодняшний день, как сделать фотографии удобными для пинтереста.

Когда вы прикалываете фотографию к себе в пинтерест, пинтерест в качестве описания фотографии автоматически использует текст, который указан в кавычках при атрибуте alt. Если атрибут альт пустой, описания не будет.  Если там что-то написано, оно автоматически будет описанием.  Этот атрибут тоже можно менять вручную, что вы туда напишете, то там и будет.  Попробуйте, приколите к себе в пинтерест фотографию ниже:

С добавлением положения по центру и открывания в новом окне полный html-код этой последней фотографии выглядит так:

<a title=”здесь я задала сама атрибут альт, попробуйте, запиньте эту фотографию к себе в пинтерест” href=”https://www.flickr.com/photos/76958872@N05/24572256290/in/dateposted/” target=”_blank”>
<img class=”aligncenter” src=”https://farm2.staticflickr.com/1488/24572256290_60f2a2f37f.jpg” alt=”чёрный кот Муся – самый прекрасный кот на свете | Хорошо.Громко.” width=”375″ height=”500″ /></a>

тайтл – текст, который всплывает при наведении мыши на фото, href – ссылка, куда ведёт фотография, target – открывать в том же окне или в новом, class – выравнивание, src – источник, alt – альтернативный текст, то, что автоматически прицепляет в качестве описания пинтерест.  Теперь тому, кто хочет приколоть к себе в Пинтерест эту фотографию, не нужно самому придумывать и писать описание, оно уже есть готовое в самой фотографии.  Плюс в это описание можно включить название вашего сайта или любой другой текст, какой вам захочется.  Вот что увидит тот, кто захочет запинить к себе эту фотографию – это текст из атрибута alt.

Всё вышеперечисленное относится и к Яндекс.Фоткам, кстати.  Там тоже можно бесплатно хранить огромное количество фотографий, и код фотографии для блога выглядит примерно так же, как и фликровский.  Только в качестве источника фото src указан, ясное дело, яндекс.фотки, а не фликр.

В моём личном пинтересте коту Мусе (и котам вообще) посвящена целая доска.  Приходите фолловить Хорошо.Громко. в Пинтересте 🙂