Image lj-cut своими руками
Jun. 22nd, 2007 02:08 pmНо вот незадача. Иногда, когда выкладываешь фотки и иже с ним, хочется сделать так: во френдленте поместить маленькую превьюшку, а в посте сделасть большую картинку. Ну и вообще — иногда хочется, чтобы во френдленте было одно и мало, а в посте другое и много. Но вот незадача — тег <lj-cut> позволяет только указывать текс в качестве ссылки на подкатное содержимое, а не произвольный кусок html. И тогда приходится делать некрасиво — иметь и превьюшку, и картинку в посте, или картинку иметь вне поста, и так далее.
В итоге, когда я увидел извращение лака со скриншотом подкатного поста, я решил, что надо это дело прекращать. И слабал небольшой хак, который позволяет делать следующее: во френдленте показывать одно, а в посте — другое. Выглядит это так (во френдленте Вы можете наблюдать одну картинку — маленькую, а в посте другую — большую):

Делается это следующим образом:
<div style="display:none">
<lj-cut>
<div style="display:none">
</lj-cut>
</div>
<a href="http://esyr.livejournal.com/82676.html">
<center><img src="http://esyr.us/photo/_winnie/2_thumb.jpg" /></center>
</a>
<div style="display:none">
<lj-cut>
</div>
</div>
<center><img src="http://esyr.us/photo/_winnie/2.jpg" /><br /></center>
<div style="display:none">
</lj-cut>
</div>
Пользоваться этим, соответственно, путём замены двух выделенных полужирным начертанием кусков кода и заменой ссылки. Ну и автоформатирование отключить хорошо бы.
Если кто не понял, как это работает, объясняю подробно: <div style="display:none"></div> скрывает весь входящий в него контент (но в коде страницы он есть). LJ при использовании тега <lj-cut>...</lj-cut> вырезает из кода страницы всё, что находится внутри него. И тогда:
Если мы во френдленте, то мы получаем такой код:
<div style="display:none">
<lj-cut /> //На самом деле тут что-то в духе
//<b>( <a href="http://esyr.livejournal.com/82676.html#cutid1">Read more...</a> )</b>, но не суть
</div>
<a href="http://esyr.livejournal.com/82676.html">
<center><img src="http://esyr.us/photo/_winnie/2_thumb.jpg" /></center>
</a>
<div style="display:none">
<lj-cut />
</div>
А видим, с учётом скрытия информации тегом <div style="display:none"></div> следующее:
<a href="http://esyr.livejournal.com/82676.html"> <center><img src="http://esyr.us/photo/_winnie/2_thumb.jpg" /></center> </a>
То есть некоторую превьюшку. Или что мы там написали между двумя lj-cut'ами. Когда же мы открываем пост, то в коде имеем следующее (для читабельности отсутупы поправлены и пустые строки расставлены):
<div style="display:none">
<div style="display:none">
</div>
<a href="http://esyr.livejournal.com/82676.html">
<center>
<img src="http://esyr.us/photo/_winnie/2_thumb.jpg" />
</center>
</a>
<div style="display:none">
</div>
</div>
<center>
<img src="http://esyr.us/photo/_winnie/2.jpg" /><br />
</center>
<div style="display:none">
</div>
А с учётом <div style="display:none"></div> видим следующее:
<center><img src="http://esyr.us/photo/_winnie/2.jpg" /><br /></center>
То есть то, что мы разместили во втором кате. Как-то так.
К недостаткам данного хака можно отнести разве что тот факт, что нам ручками надо ставить ссылку на пост, то есть сначала запостить его, а потом уже получить ссылку на него, открыть его для редактирования и вставить эту ссылку в пост. Воркэраундом данного недостатка является первоначальное посченье в виде личной записи.
Как-то так.