Previous Entry Share Next Entry
Как фото из 500px опубликовать в блоге livejournal?
орёл, Eagle
straannick

(ответ на вопрос, заданный здесь)

Так же, как и любое другое. Форматы (шаблоны) html-кода следующие:

если хотите просто показать картинку -
<img src='.. ссылка на фото 500pх' alt='текст описания фото'>

если хотите показать картинку, и чтобы по клику на картинку осуществлялся переход на соответствующую страницу 500px (как это сделано, например, в сообщении) -
<a href='... ссылка на страницу 500px ...' alt='текст описания фото'><img src='.. ссылка на фото 500pх' alt='текст описания фото'></a>

атрибут alt нужен, чтобы улучшить индексацию сообщения и фотографии - этот текст попадает в индекс поисковика.

500px shareСо ссылкой на страницу всё понятно, а вот где взять ссылку на фотографию? Давайте разберёмся на примере яблоньки из этого поста. Проще всего нажать на кнопку Share (стрелка) и в случае с livejournal выбрать "Embed". После этого откроется окошко с фотографией и html-кодом внизу, который и надо вставить в блог, на сайт и т.п. Чем можно и ограничиться.

500px code for sharing

Однако, нетрудно заметить, что в тексте много нам ненужного мусора и саморерекламы 500px. Зачем "class='pixel-photo"? Кому нужен в такой простой ситуации javascript?!
Тем не менее, в тексте есть всё, что нам нужно (правда, следует оговориться, что в коде ссылка лишь на уменьшенную до 900 пикселей копию фотографии, что вполне достаточно для наших целей). И мы можем на основе него сформировать нужную нам ссылку по первому или второму шаблону. Конкретно в сообщении с веткой яблони это выглядит так:

<a href='https://500px.com/photo/153688747/apple-tree-beauty-by-oleg-ivanov' alt='Apple tree beauty by Oleg Ivanov on 500px.com. Красота ветки цветущей яблони на фоне ненастного неба'><img src='https://drscdn.500px.org/photo/153688747/m%3D900/1859c7b9e15ac8f1e80c43e55ba82d44' alt='Apple tree beauty by Oleg Ivanov on 500px.com. Красота ветки цветущей яблони на фоне ненастного неба' title='Красота ветки цветущей яблони на фоне ненастного неба'></a>

Следует ещё добавить, что я давно не использую встроенный редактор livejournal. Готовлю html-код в специализированном редакторе и потом публикую его, копируя подготовленный код в окошко закладки html с включенной опцией "отключить автоформат".
HTML-редактор livejournal

Вот, собственно, и всё.





This entry was originally posted at http://straannick.dreamwidth.org/34363.html. Please comment there using OpenID.

  • 1
А я надеялся, что у Вас в запасе более простой вариант. )

Я делаю чуть проще. Убираю ненужные в жж (та как они не работают)классы и скрипты и вырезав код картинки () ставлю в пустое место в ссылке на страницу: ...ненастного неба'>(здесь)</a>

А сам код интересен, но работает только на сайте, где не запрещены скрипты. На фото всплывает ссылка на страницу,на профиль, на сайт 500px, а так же можно лайкнуть фото "не выходя из дома".

Можете посмотреть как это работает у меня на сайте.

Посмотрел. Вот Ваш код:
<img alt="Отец Илий. by Алексей Федосеенко on 500px" class="main" src="https://drscdn.500px.org/photo/156814745/m%3D900/fe57c144b2efb4a267b25c84db96b907">
Сделано по описанному мной шаблону №1. А что может быть проще, чем просто дать img по ссылке? В случае с 500px надо просто знать откуда эту ссылку взять.
Для шаблона 1 Вы делаете не проще, а сложнее, потому что в данном случае не нужно ничего убирать, нужно просто скопировать img.
- - - -
Дополнение. Пардон, не разглядел сразу выше img iframe, а ниже script :-) Но это всё вместе сложнее шаблона 2. И, тем не менее, не увидел как можно лайкнуть - есть просто переадресация в профиль.



Edited at 2016-06-04 08:42 am (UTC)

Дело вкуса.

По мне так проще скопировать код и убрать все лишнее.

Лайк всплывает в правом верхнем углу.

Edited at 2016-06-04 09:48 am (UTC)

  • 1
?

Log in