esyr: (Default)
[personal profile] esyr
В LJ есть такая замечательная фича, как lj-cut. Она позволяет писать достаточно объёмные вещи в постах и при этом не засорять френдленту окружающих. Ну и попутно заинтриговать читателей, не заставлять грузить свои многометровые произведения искусства всех своих френдов и так далее.

Но вот незадача. Иногда, когда выкладываешь фотки и иже с ним, хочется сделать так: во френдленте поместить маленькую превьюшку, а в посте сделасть большую картинку. Ну и вообще — иногда хочется, чтобы во френдленте было одно и мало, а в посте другое и много. Но вот незадача — тег <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>

То есть то, что мы разместили во втором кате. Как-то так.

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

Как-то так.

This account has disabled anonymous posting.
If you don't have an account you can create one now.
HTML doesn't work in the subject.
More info about formatting

Profile

esyr: (Default)
esyr

October 2010

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
31      

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Apr. 6th, 2026 10:14 pm
Powered by Dreamwidth Studios