Найти на сайте

Увеличение/уменьшение шрифта в статьях и блогах

+58
3.4K
  2. Блоги
  3. Увеличение/уменьшение шрифта в статьях и блогах
Здравствуйте, уважаемый пользователи InstantCMS.
Всех с Рождеством! Желаю всем счастья, здоровья и огромных успехов в нашем нелегком, но очень увлекательном деле :)
Попросил меня знакомый сделать регулировку размера шрифта в новостях, так как шаблон у него почти стандартный, некоторые посетители жаловались на читаемость новостей. Конечно ставить грубый шрифт на сайте никто не хочет, все стремятся за красотой и стильностью, но забывать о людях со слабым зрением и преклонного возраста тоже не стоит… Конечно во всех браузерах есть поддержка для людей с ограниченными возможностями, но все же...
Делается все настолько просто, что я рассмеялся из за просьбы, но видя его восторг решил написать решение и тут. Возможно пригодится и еще кому то.

Итак, покажу на примере стандартного шаблона.
1. Новости, статьи.
Открываем файл \templates\_default_\components\com_content_read.tpl
Находим строчку 
  1.  
  2. {* =============== Текст статьи =============================== *}
  3. <div class="con_text" style="overflow:hidden">
  4.  
перед ней вставляем блок со ссылками для изменения шрифта (картинки предварительно надо закинуть в папку /images)
  1. <div style="text-align:right;">
  2. <a href="javascript:()" onclick="changeFont(0.8)"><img src="/images/zoom_out.png"></a>
  3. <a href="javascript:()" onclick="changeFont(1.2)"><img src="/images/zoom_in.png"></a>
  4. </div>
Далее в конце файла вставляем скрипт
  1. {literal}
  2. <script>
  3.  function changeFont(inc) {
  4.      var size =  parseFloat($(".con_text").css('font-size'), 10); 
  5.     $(".con_text").css('fontSize',size*inc+'px');
  6.     }
  7. </script>
  8. {/literal}
Все готово, тестируем результат...
Для других шаблонов все аналогично, только надо править файл в папке с вашим шаблоном и блок с текстом может иметь другой класс, тоесть вместо $(".con_text") вам необходимо написать класс нужного блока.
Можно сделать немного по другому, и вместо увеличения и уменьшения размера шрифта встроить например 3 фиксированных размера, и вывести картинки "маленький", "средний", "большой". Тогда скрипт меняем так:
  1. {literal}
  2. <script>
  3.  function changeFont(inc) {
  4.      $(".con_text").css('fontSize',inc+'px');
  5.     }
  6. </script>
  7. {/literal}
а в блоке со ссылками назначаем нужные размеры:
  1. <div style="text-align:right;">
  2. <a href="javascript:()" onclick="changeFont(12)"><img src="/images/ваша картинка"></a>
  3. <a href="javascript:()" onclick="changeFont(14)"><img src="/images/ваша картинка"></a>
  4. <a href="javascript:()" onclick="changeFont(18)"><img src="/images/ваша картинка"></a>
  5. </div>
2. Блоги. Для блогов все аналогично, на примере стандартного шаблона: открываем файл \templates\_default_\components\com_blog_view_post.tpl находим строчку 
  1. <div class="blog_post_body">{$post.content_html}</div>
перед ней вставляем тот же блок что и для новостей, в конце файла вставляем тот же скрипт, не забыв изменить класс блока на ".blog_post_body" (в стандартном шаблоне):
  1. {literal}
  2. <script>
  3.  function changeFont(inc) {
  4.      var size =  parseFloat($(".blog_post_body").css('font-size'), 10); 
  5.     $(".blog_post_body").css('fontSize',size*inc+'px');
  6.     }
  7. </script>
  8. {/literal}
В связи с недавними взломами демо сайтов у меня пока нет, поэтому только скрин. Готовое решение с картинками можно скачать тут для 1.10.1
Буду рад, если кому то пригодится...
Иллюстрация
Плагин "Подсветка результатов поискового запроса"
Увод паролей от FTP из-за собственной лени и неосторожности
+2
Слава Слава 11 лет назад #
Работает. Спасибо.
+1
wils wils 11 лет назад #
Отлично супер спасибо
0
Андрей Андрей 11 лет назад #
супер! с +- лучше, ибо можно подстроиться под размер, какой тебе надо!
спасибо!

а вообще, такие фичи нужно встраивать в инсталлятор, чтобы был хороший функционал по дефолту, а не по рысканью по форуму!
0
Reborn Reborn 11 лет назад #
Спасибо)) +++
0
Thanatognozija Thanatognozija 11 лет назад #
А можно это посмотреть где-то? Извините...
0
deltas deltas 11 лет назад #
Да, можете глянуть здесь...
0
Thanatognozija Thanatognozija 11 лет назад #
Оооооооооо, классно, это ведь то, что мне надо. Спасибо, буду колдовать. Это конечно страшные символы, но буду пробовать. И, плюсик еще в профиль надо срочно Вам поставить.
0
wils wils 11 лет назад #
почему то, не на всех статьях увеличивает.. как сделать чтоб везде увеличивал?
Для других шаблонов все аналогично, только надо править файл в папке с вашим шаблоном и блок с текстом может иметь другой класс, тоесть вместо $(".con_text") вам необходимо написать класс нужного блока.
здесь подробней можно? спасибо
+2
deltas deltas 11 лет назад #
На некоторых шаблонах разработчики меняют название класса блока новости. Посмотреть его можете в файле \templates\ВАША_ТЕМА\components\com_content_read.tpl в строчке
Код PHP:
  1. {* =============== Текст статьи =============================== *}
  2. <div class="con_text" style="overflow:hidden">
Тут видим название класса con_text, у вас может быть другим... Вот его и надо вписать в скрипте в нужных местах
Код PHP:
  1.     {literal}
  2.     <script>
  3.     function changeFont(inc) {
  4.     var size = parseFloat($(".ВОТ ТУТ").css('font-size'), 10);
  5.     $(".И ВОТ ЗДЕСЬ").css('fontSize',size*inc+'px');
  6.     }
  7.     </script>
  8.     {/literal}
не знаю если честно как подробнее объяснить :)
0
wils wils 11 лет назад #
теперь понятно спасибо
0
Thanatognozija Thanatognozija 11 лет назад #
У меня все работает, только если я нажимаю на кнопку увеличения, то увеличивается не текст статьи, а блок "Похожие статьи:" :(
0
Thanatognozija Thanatognozija 11 лет назад #
Если я этот плагин отключаю (Похожие статьи) то ничего не происходит вообще.
0
Thanatognozija Thanatognozija 11 лет назад #
Посмотреть можно тут: http://tanat.info/saity/news/vrachi-zapustili-serdce-ostanovivshesja-na-poltora-chasa.html может у кого тоже так?
0
deltas deltas 11 лет назад #
У вас в шаблоне для каждого параграфа назначен размер шрифта. Текст сожержится в <p class="style2"> для которого прописан font-size:13px; В скрипте поменяйте $(".con_text").css на $(".style2").css в двух местах...
0
deltas deltas 11 лет назад #
Отвечал выше - если у вас контент не в этом блоке <div class="con_text" style="overflow:hidden"> то найдите в каком блоке располагается статья {$article_content}
0
Thanatognozija Thanatognozija 11 лет назад #
У меня все вроде в этом блоке:
Код PHP:
  1. <div class="con_text" style="overflow:hidden">
  2.     {if $article.image}
  3.         <div class="con_image" style="float:left;margin-top:10px;margin-right:20px;margin-bottom:20px">
  4.             <img src="/images/photos/medium/{$article.image}" border="0" alt="{$article.image}"/>
  5.         </div>
  6.     {/if}
  7.     {$article.content}
  8. </div>
Или я что-то не понимаю?
0
Thanatognozija Thanatognozija 11 лет назад #
Более того, увеличивается не шрифт, а только промежуток и стрелочка... Нет, нет, я не хочу сказать, что что-то не работает, но лишь то, что я где-то протупил полюбому. Извините...
0
Thanatognozija Thanatognozija 11 лет назад #
О, меня осенило, может для этого должен быть класс <p>? Дело в том, что у меня другие классы для абзаца.
0
deltas deltas 11 лет назад #
У вас в шаблоне для каждого параграфа назначен размер шрифта. Текст содержится в <p class="style2"> для которого прописан font-size:13px; В скрипте поменяйте $(".con_text").css на $(".style2").css в двух местах...
0
Thanatognozija Thanatognozija 11 лет назад #
Да, deltas, все так и произошло и теперь все работает как надо. Спасибо большое. Буду воевать с блогами теперь.
0
maia maia 11 лет назад #
Спасибо!
0
Thanatognozija Thanatognozija 11 лет назад #
Я прошу прощения, это опять я... Скажите, а может такое можно сделать везде, для комментариев тоже? На форумах. У человека появляется право выбора. Вот, я лично, всегда увеличиваю страницу браузера, а ведь тогда шаблон разъезжается, а так, все в норме, только текст - удобно ведь.
0
deltas deltas 11 лет назад #
Да никаких проблемм, встраиваете аналогичный код в нужные файлы шаблона, узнав предварительно класс или название блока в котором располагается нужный контент и заменяете в скрипте название...
0
deltas deltas 11 лет назад #
функцию совсем легко модифицировать и передавать не только размер но и имя блока типа onclick="changeFont(comments,0.8)">
-1
Владимир Владимир 11 лет назад #
А как сделать такое же для универсального каталога?
0
SE7EN SE7EN 11 лет назад #
А как сделать такое же для универсального каталога?
Нет тут уж нужно мыслить более масштабно. Как такое сделать для всего движка? вещ-то полезная!
0
Harconen Harconen 11 лет назад #
.con_text{
margin:15px 0px;
}
этот есть тока не работает !!
0
Harconen Harconen 11 лет назад #
зделал так как написана не работает

Итак, покажу на примере стандартного шаблона.
1. Новости,статьи.
Открываем файл \templates\_default_\components\com_content_read.tpl
Находим строчку
Код PHP:

{* =============== Текст статьи =============================== *}
<div class="con_text" style="overflow:hidden">

перед ней вставляем блок со ссылками для изменения шрифта (картинки предварительно надо закинуть в папку /images)
Код PHP:
<div style="text-align:right;">
<a href="javascript:()" onclick="changeFont(0.8)"><img src="/images/zoom_out.png"></a>
<a href="javascript:()" onclick="changeFont(1.2)"><img src="/images/zoom_in.png"></a>
</div>
Далее в конце файла вставляем скрипт
Код PHP:
{literal}
<script>
function changeFont(inc) {
var size = parseFloat($(".con_text").css('font-size'), 10);
$(".con_text").css('fontSize',size*inc+'px');
}
</script>
{/literal}
0
Harconen Harconen 11 лет назад #
ясно некто не подскажет
0
Patriot Patriot 11 лет назад #
И как я его раньше не заметил... Благодарю Deltas, классный и полезный зумчик!
p.s. только вот не понял, для чего (?) в архиве папка modules, ведь она пустая...

Еще от автора

Обновление компонента "Replacement замена в контенте" + бонус

Обновление компонента "Replacement замена в контенте" + бонус

Как и обещал, поработал над обновлением компонента Replacement.
14
Replacement - замена в контенте. Компонент для ICMS 2.x

Replacement - замена в контенте. Компонент для ICMS 2.x

Компонент на основе фильтра "Красивые заметки в тексте" для первой версии. По просьбам пользователей сделал подобное для второй ветки.
7
Фильтр ICMS Note - Красивые заметки в тексте

Фильтр ICMS Note - Красивые заметки в тексте

Опять же по просьбе Nomin сделал фильтр для создания красивых заметок в тексте.
21

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.