К моему дайри-мануалу - кусок про картинки, лайфхаки и полезные ссылки

[_Ир-Рианн_]

Хххххей. Я Ир-Рианн, и я хочу рассказать вам дофига всего. У меня много разных проектов и творчества - тексты, рукоделие и всякое разно ещё.
Но начну я не с них, а со своей давней идеи написать большой подробный мануал для дайри. Понятно оформленный, со всем разбитием по блокам, с наглядными примерами, всем таким. Потому что надо оно много кому, да и мне как верстальщику намного проще иметь всё под рукой зараз.
Пока что оно, увы, только в виде разрозненой инфы - когда постами с кусочками мануала, а когда и просто ссылками.
Так что, когда в обсуждении правил встал вопрос про оформление картинок, я с радостью решил поделиться... И, в итоге, родил очередной связный кусочек будущего мануала, которым и делюсь. Надеюсь, оно будет вам полезно


Как сделать так, чтобы у большой картинки было превью, а она сама ужалась до границ поста или до фиксированного размера?
Использовать код

[MORE=<img src="" width="120px;">]<img src="" style="max-width:100%;">[/MORE]

Вставьте ссылки на картинку между кавычек.
Размер превью вместо 120px можно вписать любой.
Можно указать высоту превью: height="120px;"
Можно уменьшить процент максимальной ширины картинки, чтобы она была, скажем, на две трети поста: 66%.
Можно сделать фиксированную ширину или высоту, например:

[MORE=<img src="" width="120px;">]<img src="" width="500px;">[/MORE]

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

Примеры:

[MORE=<img src="http://soft.sibnet.ru/data/screenshot/g20505.jpg" width="120px;">]<img src="http://soft.sibnet.ru/data/screenshot/g20505.jpg" style="max-width:100%;">[/MORE]

[MORE=<img src="http://soft.sibnet.ru/data/screenshot/g20505.jpg" height="120px;">]<img src="http://soft.sibnet.ru/data/screenshot/g20505.jpg" style="max-width:80%;">[/MORE]

[MORE=<img src="http://soft.sibnet.ru/data/screenshot/g20505.jpg" height="150px;">]<img src="http://soft.sibnet.ru/data/screenshot/g20505.jpg" width="500px;">[/MORE]

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

Настройки -> Настройки сайта -> Настраиваемые кнопки
Добавить новую кнопку

В появившемся окне вставить нужное - например, как у меня:

1. Динамическая картинка с превью

Название: Ширина картинки под морем ужмётся до границ поста. Выделите в посте ссылку на картинку и нажмите кнопку, либо нажмите кнопку и вставьте ссылки на картинку между кавычек. Размер превью вместо 120px можно вписать любой. Можно указать высоту: height="120px;"
Обозначение: static.diary.ru/userdir/1/4/6/9/1469514/8444395...
Значение:

[MORE=<img src="[cuRs][maRk]" width="120px;">]<img src="[maRk]" style="max-width:100%;">[/MORE]

Порядок: 1
Тип: Общая
Галочка - Показывать эту кнопку на панели форматирования текста
Нажимаем "Сохранить".

Как это выглядит в посте:

[MORE=<img src="https://shugaev.su/wp-content/uploads/2015/07/6.jpg" width="120px;">]<img src="https://shugaev.su/wp-content/uploads/2015/07/6.jpg" style="max-width:100%;">[/MORE]

2. Дин. картинка с превью и ссылкой

Название: Картинка под морем ужмётся по ширине до границ поста, одновременно являясь ссылкой на что угодно. Например, на эту же картинку для открытия в полном размере в новой вкладке. Прочее см. в описании предыдущей кнопки.
Обозначение: static.diary.ru/userdir/1/4/6/9/1469514/8539331...
Значение:

[MORE=<img src="[cuRs][maRk]" width="120px;">]<a href="[maRk]" target=_blank><img src="[maRk]" style="max-width:100%;"></a>[/MORE]

Порядок: 2
Тип: Общая
Галочка - Показывать эту кнопку на панели форматирования текста
Нажимаем "Сохранить".

Как это выглядит в посте:

[MORE=<img src="https://shugaev.su/wp-content/uploads/2015/07/6.jpg" width="120px;">]<a href="https://shugaev.su/wp-content/uploads/2015/07/6.jpg" target=_blank><img src="https://shugaev.su/wp-content/uploads/2015/07/6.jpg" style="max-width:100%;"></a>[/MORE]

И ещё всякое полезное к мануалу.
Двойной клик по некликабельному содержанию моря убирает весь материал обратно под море))

Ссылками на то, что я выкладывал у себя в дневнике -
Подборка весьма полезных дайро-ссылок, нашёл через фленту - polar-star.diary.ru/p215278006.htm Собственно, очень годная сборка, ио много ссылок, но не систематизация.
Подборка смайликов, делал давно сам - polar-star.diary.ru/p208847013.htm
Как вытянуть картинку при неочевидности ссылки на неё и вставить в дайри - для Гугл Хрома - polar-star.diary.ru/p208470045.htm -описание громоздкое, я его пилил давно, со временем буду перепиливать и дорабатывать.
Азы дайри-таблиц, безопасные цвета, групповое редактирование тем - polar-star.diary.ru/p195776697.htm - мой почти ссылкосборник, несистематизирован.

И то, на что незачем ссылку, проще скопировать сюда - не моё, но найденное.
Как вернуть вернуть ширину полей дайри как было.
Установить расширение Stylish, создать новый стиль (иконка на верхней панели - три точки - Управление стилями - Создать). В названии можно указать что угодно, например "Diary Full Width", в окне для кода прописать

max-width: 100% !important;
padding-left: 0px !important;
padding-right: 0px !important;

В "Применить к" нажать "Указать", выбрать "URL в домене", в поле написать "diary.ru". Под названием стиля поставить галочку "Включено", нажать "Сохранить". Теперь при заходе на дайри рядом с иконкой Stylish будет высвечиваться количество доступных стилей. Если нажать, откроется список, где можно включать/отключать отдельные стили.
В Опере примерно то же самое, только после установки расширения при нажатии на иконку нет трех точек.


Если вам по теме дайри-кодов надо что-то конкретное - говорите Попробую ответить, если смогу. И на базе ответов - может, появится вдохновение на ещё кусок к мануалу.
И да, эту запись можно потом будет преобразовать в тему техподдержки при соо

@темы: мастер-класс, административное

Comments

[captainspring]

Люблю вас безмерно сейчас, спасибо большое!

[Edelgarde]

Господи, куда вас за всё это поцеловать? Столько офигенных штук, но я вот как человек вообще не понимающий во всём этом ни-че-го, понятия не имела, как бы исхитриться и сделать вот так красиво! Ооочень здорово, облегчили жизнь, спасибо большое!

[AxisNk]

_Ир-Рианн_, спасибо!

[_Ир-Рианн_]

Урурурурррр, большущее спасибо, я очень рад, что вам пригодилось!!!)))))

[Ласка-из-Сказки]

_Ир-Рианн_, разрешите утащить?

[_Ир-Рианн_]

Тигряшка Ди, мыр, с удовольствием))

[Ласка-из-Сказки]

_Ир-Рианн_, большое спасибо! Очень нужное дело делаете!

[_Ир-Рианн_]

Тигряшка Ди, уруруруурррр!!)))
Спасибо огромное, это важно очень)) И помогает не забрасывать начатое)) Оно в работе, просто медленное пока) Но как только - буду выкладывать))

[Ласка-из-Сказки]

_Ир-Рианн_, не-не, такое нельзя забрасывать! Это очень полезно, особенно для таких криворуких юзеров, как я, у которых максимум познаний - как вставить простую картинку в пост, да и то только потому, что тут готовый шаблончик есть))

[_Ир-Рианн_]

Тигряшка Ди,
Рада очень, что так полезно. В планах охватить вообще всё, ну и сейчас тестирую разное-прекрасное по вообще всем основным функциям хтмл и цсс. Например, позавчера в совместных раскопках с братом-кодером тестировали возможность регулируемой прозрачности - на дайри да, она работает)) хотя в функционале о ней ни слова. Ну и много разного, что вообще хочу собрать и понять, как верстальщик, а энциклопедия-мануал, в которую для себя буду собирать, чую, многим вообще пригодится. И вот таким юзерам начального уровня, как вы, и более продвинутым) Просто иногда смотришь на объём предполагаемых работ и дууумаешь - а может ну его на... И тут очень вовремя ваш коммент.) Ну раз не на, а вперёд, значит, будем дерзать))

[Ласка-из-Сказки]

_Ир-Рианн_, думаю, это очень нужное дело. В таких вещах мало кто понимает. А сам такого полезного для себя никогда не сделаешь, потому что для этого нужны знания определенные, уровень умения, надо во всем этом хорошо разбираться.

[_Ир-Рианн_]

Тигряшка Ди, о.... вот это меня ещё больше убеждает в нужности этого дела)))))спасибо)))

[Ласка-из-Сказки]

_Ир-Рианн_,

[_Ир-Рианн_]

Тигряшка Ди,