среда, 13 января 2010 г.

Изображение – ссылка на пост

Изображение – ссылка

Как сделать чтобы ссылка загруженного изображения Blogger вела на страницу сообщения? Отвечаю на вопросы читателей.


По-умолчанию, ссылка ведет на полноразмерное изображение, и обычными средствами Blogger это реализовать нельзя. Поэтому, я написал Javascript-функцию для ссылок изображений Blogger.



Важный момент. Помимо самой функции добавлены следующие условия:


  • на главной (индексной) странице блога ссылка изображения ведет на пост;
  • на странице сообщения ссылка ведет на изображение.

Это реализовано с помощью условных операторов Blogger:


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!-- код Javascript-->
</b:if>

Итак, два варианта подключения скрипта для изображений в шаблоне Blogger.


1. Полный код функции


Листинг 1: Полный код для вставки в шаблон Blogger.


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
/* Функция для ссылок изображений в Blogger
Denis Neverov aka Croaker, @jcden
http://dotrb.blogspot.com
*/
var nodeId = "Blog1";
var postClassName = "hentry";
var postTitleTag = "h3";

// Сторонняя функция getElementsByClassName
getElementsByClassName = function (classname, node){
if(!node) node = document.getElementsByTagName("body")[0];
var a = [];
var re = new RegExp('\\b' + classname + '\\b');
var els = node.getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
// Сама функция для обработки ссылок изображений
bloggerImageLink2Post = function(){
var node = document.getElementById(nodeId);
var posts = getElementsByClassName(postClassName, node);
for(var i=0,j=posts.length; i<j; i++){
var titleLinks = posts[i].getElementsByTagName(postTitleTag)[0].getElementsByTagName("a");
var imgs = posts[i].getElementsByTagName("img");
if (imgs[0] != undefined){
var aParent = imgs[0].parentNode;
if ( (aParent != undefined)&&(aParent.tagName == "A") ){
aParent.href = titleLinks[0].href;
}
}
}
}
// Вызов функции
bloggerImageLink2Post();
//]]>
</script>
</b:if>

Для чего нужен элемент CDATA, я рассказывал здесь: XML термин CDATA


Или второй вариант – подключение внешнего файла Javascript с последующим вызовом функции.


2. Подключаемый Javascript-файл


Листинг 2: Код для подключения внешнего файла javascript.


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script src='http://sites.google.com/site/railsdepot/files/imagelink2post.js' type='text/javascript'/>
<script type='text/javascript'>
bloggerImageLink2Post();
</script>
</b:if>

Используй либо первый вариант, либо второй (не оба сразу!)


Куда вставлять javascript-код


Скрипт (код javascript) вставлять в код шаблона Blogger перед закрывающим тегом </body>.


Если ты используешь код Google Analytics – тогда перед кодом Google Analytics.


Не забудь сохранить шаблон.


Post scriptum


Работа обоих вариантов скрипта протестирована в Firefox, Chrome, Opera и IE.


Код разрабатывался для стандартных шаблонов Blogger и для шаблонов на основе стандартных. В «сильно нестандартных» шаблонах Blogger может не работать. Скорей всего придется задавать собственные значения переменных nodeId, postClassName и postTitleTag.


P.S. Всем читателям еще раз желаю, чтобы Новый год был счастливым! И пусть любимые приносят только радостные известия.


© 2010 dotrb.blogspot.com

14 Комментариев :

AT комментирует...

1. А почему нельзя сделать обычными HTML-средствами? Ссылка на изображение имеется. А дальше ?

2. Так, из собственного опыта. Лучше разместить сначала второй способ, а потом более полный вариант разместить для тех, кому интересно возиться в "песочнице".

AT комментирует...

Хмм ... не совсем понятно, не то мой комментарий неправильно дошёл, не то он отредактирован был :)
К пункту 1:
А дальше ... +

Croaker комментирует...

В Blogger не предусмотрено редактирование комментариев. Видать, по пути кто-то сообщение понадкусал :)

1. Можно сделать обычными средствами HTML. Но тогда сообщение необходимо будет сначала создать, чтобы получить ссылку на пост. А потом уже редактировать.

Небольшой минус в том, что тогда и «внутри» поста ссылка будет вести на пост.

2. Верно подмечено. В дальнейшем, скорей всего, буду использовать такой «формат» для скриптов.

iLexxx комментирует...

спасибо вам за такой информативный блог!
использовал второй (компактный) вариант кода в своем блоге
http://russiancatspictures.blogspot.com/
вставил его до кода analytics, но все равно при нажатии на изображение, открывается не пост, а оригинальное изображение. что я делаю не так? или, если не трудно, подскажите, какие элементы страницы мешают выполнению кода.
заранее огромное спасибо.

Croaker комментирует...

Как вариант можно попробовать полный код. Недавно гугль что-то «химичил» с Google Sites – могли побиться ссылки.

iLexxx комментирует...

Спасибо огромное за подсказку! Все заработало! И еще раз — спасибо за пост!

iLexxx комментирует...

Croaker, хочу задать вопрос: можно ли с помощью подобного кода заменить изображения и на страницах постов (не только на главной)? Хочется, чтобы ссылки с изображений постов, не вели на картинки в более высоком разрешении, а ссылались, не знаю, на сам же пост. Либо, как альтернатива, не знаете, как в массовом порядке изменить разрешение всех снимков, загруженных в блог? Заранее спасибо за ответ…

Croaker комментирует...

iLexxx, чтобы ссылки с изображений и внутри поста ссылались на сам пост нужно включать код Javascript просто – без вот этой конструкции:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!-- код Javascript-->
</b:if>

Go! комментирует...

У меня не получилось, ни одним ни другим способом

Unknown комментирует...

Большое спасибо, первый способ работает на моём блоге.

Unknown комментирует...

Помогите с шаблоном Emporio пожалуйста! вот рою-рою, понимаю что рядом, но никак не могу догадаться, где искать. На главной(индексной) странице это шаблона, отображается контейнер с рамкой, в которой отражается фрагмент картинки из конкретного соббщения.. как это все убрать, что бы картинка была не узувеченной и траурного футера контейнера не было? футер, я вроде в просмотре кода элемента нашел как убрать, а вот с размером картинки, не могу..

Croaker комментирует...

Itao Family, Решение я нашел в настройках блога, в разделе Дизайн. Там есть гаджет Featured Post ("Избранное сообщение"). Это сообщение можно отключить — убрать отметку с опции Показать виджет "Избранное сообщение" в настройках гаджета.

P.S. А можно использовать этот гаджет по назначению :-). По-умолчанию он берет последнее сообщение в блоге и "уродует картинку". Можно назначить этому гаджету конкретное сообщение с оптимизированной картинкой.

Unknown комментирует...

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

Croaker комментирует...

Насколько я понял, этот гаджет Featured Post ("Избранное сообщение") включен в шаблон Emporio по-умолчанию. Судя по "поведению" (отображение картинки из поста на идексной странице) — это он (гаджет) и есть. Или что-то ну очень похожее.
Как отключить этот гаджет, я написал выше :)

Отправить комментарий

Жги!