Поради по роботі з зображеннями в joomla
Створення адаптивного шаблону Joomla з використанням Bootstrap. Частина 5. Додавання іконок Bootstrap пунктам меню Joomla
У цій статті я розповім про те, як можна додавати іконки Bootstrap до окремих пунктів меню Joomla, просто редагуючи настройки цих пунктів.
Wedal Joomla Slider v1.1 - безкоштовний модуль слайдшоу для Joomla від wedal.ru (оновлення)
Сьогодні я хотів би представити вам оновлення модуля Wedal Joomla Slider - версію 1.1 =). Незважаючи на те, що 1.1 від 1.0 відокремлюють всього 10%, модуль був переписаний практично повністю. Я додав у нього кілька нових корисних можливостей, яких раніше не було і яких так не вистачало при розробці. Сподіваюся, вам вони сподобаються.
Критична вразливість в Joomla 3.4.4 - 3.6.3. Необхідно термінове оновлення до Joomla 3.6.4!
Нові функції Joomla 3.7
У цій статті я привожу огляд нових функцій Joomla 3.7 з прикладами.
Custom Filters Pro - швидкий і зручний фільтр по додатковим полях Virtuemart
Вчора мова піде про один з кращих розширень в плані фільтрації товарів Virtuemart- Custom Filters Pro.
- Як зробити повнорозмірні скріншоти сторінок в браузері і будь-яких вікон на комп'ютері.
- Як масово обробити зображення.
- Як додати на зображення водяний знак.
- Як підготувати зображення для завантаження на сайт.
- Яким способом можна швидко і зручно створити міні-зображення (превью) в Joomla.
- Як показати зображення Joomla-сайту у спливаючому вікні.
- Як полегшити завантаження сторінок сайту на Joomla, що містять велику кількість зображень.
Вступ.
Якщо ви маєте свій сайт, то напевно стикалися з завданням додавання на нього картинок. Це неминуче. При створенні сайту багато веб-майстри забувають, що, швидше за все, працювати з ним будуть люди, які не мають освіти в області IT. Багато, очевидні для айтішників речі, можуть здатися їм незнайомими і складними.
Візьмемо найпростішу задачу завантаження картинки до статті на сайті. Навіть тут є маса підводних каменів: розмір файлу зображення (вага), дозвіл зображення, пропорції зображення, розширення файлу зображення - все це важливо. Але складно пояснити це все замовникам.
Всі поради, які описані нижче, взяті виключно з особистого досвіду роботи. Маю велику надію, що вони виявляться корисними.
Як зробити повнорозмірні скріншоти сторінок в браузері і будь-яких вікон на комп'ютері.
Як зробити скріншот повної сторінки браузера, якщо на ній присутній смуга прокрутки? Зізнайтеся, ви знаєте? =). Зазвичай з таким завданням доводиться стикатися нечасто, але коли це відбувається, то зазвичай впадаєш в повний ступор.
А зробити ось такий скріншот вам по зубах?
Ні, ну зізнайтеся? =)
Ще не так давно, коли найпопулярнішою операційною системою була WindowsXP. навіть такий скріншот зробити було непросто. Доводилося натискати кнопку PrintScreen. відкривати Paint. вставляти скріншот зображення, вирізати потрібний кадр, зберігати в потрібному форматі. Все це, звичайно, доводилося робити, якщо на комп'ютері не було встановлено спеціалізованих програм.
Потім на зміну Windows XP прийшла Windows 7 (Vista не береться до уваги). Тут з'явився такий чудовий інструмент, як Ножиці. Тепер стандартними засобами Windows можна було зробити не тільки скріншот всієї сторінки, а також її окремої частини, при цьому обрізавши все зайве тут же. Використовуючи Ножиці, ми вже можемо отримати зображення, наведене вище, але як же, все-таки, бути з зображенням, яке не входить на один екран (має смугу прокрутки)? Тут я використовую два додаткових інструменту.
Після установки ви зможете зробити повний скріншот веб-сторінки одним кліком, а головне, тут же вирізати з нього потрібний блок і додати відсутню інформацію.
Додаємо (якщо необхідно):
Все відбувається дуже швидко і зручно. Можна спочатку виставити потрібну якість знімків і в майбутньому воно буде дотримуватися.
Прекрасно. Але що якщо потрібно зробити скріншот з прокруткою вікна в Windows? Тут на допомогу приходить друга програма: FastStoneCapture. Програма, на жаль, платна. Але коли це зупиняло наших людей? ;-). Завантажити її в Інтернеті не становить труднощів. Але якщо вона дійсно виявиться незамінною, чому б не підтримати розробника покупкою ліцензії? Тим більше, варто програма не так дорого.
Запускаємо і бачимо на екрані такий плаваючий блок:
Він дозволяє нам витворяти ну просто всяке. Можна робити скріншот екрану, окремого вікна, вікна з смугою прокрутки, виділеної області і іншого. Послідовність тут точно така ж, як і з FireShot: Скріншот, вирізаємо, редагуємо (якщо необхідно), зберігаємо.
Маючи в своєму арсеналі пару цих маленьких програм, ви назавжди забудете про проблеми зі створенням скріншотів.
Як масово обробити зображення.
Буває так, що на сайт потрібно завантажити велику кількість зображень, а якщо у вас інтернет-магазин, то зображень можуть бути сотні або навіть тисячі. Якщо ви хочете, щоб все будувалося рівно, то очевидно, що всі зображення повинні мати однакові розміри і пропорції. Як цього добитися?
Для масової обробки зображень я використовую безкоштовну програму FastStone Image Viewer. Це, звичайно, не Photoshop, але для безкоштовної програми, можливості FastStone Image Viewer дуже широкі.
Головне вікно програми показано на малюнку нижче:
Однією з найбільш зручних, на мій погляд, функцій даної програми, є можливість пакетної обробки зображень. Давайте подивимося, як це працює.
Відкриваємо папку з зображеннями і виконуємо Сервіс -> Пакетне перетворення / перейменування. Відкриється таке вікно:
У ньому ми вибираємо зображення для обробки і натискаємо кнопку Додатково. яка відкриє вікно з масою додаткових налаштувань для оброблюваних зображень:
- Змінити розмір зображень, в тому числі по одній зі сторін
- повернути зображення
- обрізати зображення
- Встановити розмір полотна (все, що на нього не поміститься, буде відрізано)
- Встановити глибину кольору, яскравість, контрастність і інші параметри зображень
- Додати на зображення текст або водяний знак
- Додати для зображення рамку
При цьому немає необхідності ставити все настройки при кожному використанні пакетної обробки зображень в FastStone Image Viewer. Створивши їх одного разу, ви можете зберегти настройки в файл і використовувати його, коли це буде необхідно.
Після установки всіх налаштувань ми тиснемо кнопку Старт і програма за нас обробляє всі зображення, приводячи їх до заданого в настройках формату.
Використовуючи FastStone Image Viewer, ви можете за секунди обробити зображення, на ручну роботу з якими у вас пішло б багато часу. Це дуже зручно.
Як додати на зображення водяний знак.
Завдання додавання на зображення водяного знака також відноситься до пакетної обробки зображень і використовується тут той же інструмент. У FastStone Image Viewer. в пакетному перетворенні / перейменування. ви можете відкрити вкладку Водяний знак. Там будуть такі настройки:
Якщо коротко, вам потрібно буде вибрати файл-картинку з водяним знаком і встановити його місце розташування на оброблених зображеннях. Єдина особливість, про яку варто згадати, картинка водяного знака повинна мати прозорий фон. В іншому випадку, фон знака буде накладено на фон оброблюваного зображення. Щоб фон був прозорим, картинка водяного знака повинна бути збережена в форматі «.png».
Після застосування настройки водяного знака, він буде доданий на все оброблені зображення. Пам'ятайте, що видалити такий знак з зображень вже не вийти, тому завжди зберігайте їх оригінали.
Як підготувати зображення для завантаження на сайт.
Давайте розглянемо деякі особливості підготовки зображень для завантаження на сайт. Кому-то вони можуть здатися очевидними, але згадати про них однозначно варто.
Не завантажуйте на сайт зображення, розміри яких більше, ніж максимальний дозвіл екрана сучасного монітора.
Намагайтеся робити розміри файлів зображень мінімальними.
Імена зображень не повинні містити кирилиці і прогалин. Регістр імен зображень і їх розширень повинен бути нижнім.
Неправильно: / мої картинки / Моя картінка.JPG
Якщо зображення публікуються в каталозі або слайдері, їх пропорції повинні бути однаковими.
Пам'ятайте, якщо ви хочете додати кілька зображень поруч один з одним так, щоб це виглядало рівно, уникнувши, при цьому, їх розтягнутості або сплющене, ви повинні зробити їх пропорції однаковими. Простіше кажучи, якщо одне зображення має розміри 200x100 (2: 1), то всі інші також повинні мати пропорції 2: 1.
Слідуючи даними нескладних правил, ви досягнете того, що все картинки у вас на сайті будуть відображатися рівно і красиво.
Яким способом можна швидко і зручно створити міні-зображення (превью) вJoomla і зробити їх збільшуються при натисканні.
Є ще одна особливість роботи з зображеннями на сайті. Не завжди є можливість показати відразу повнорозмірні зображення. Наприклад, в статті може бути показана зменшена копія основного зображення.
Якщо ми просто стиснемо основне зображення, задавши для нього фіксовану ширину і висоту відображення на сайті, це не зменшить розмір файлу зображення. Додавши на сторінку десяток таких «зменшених» зображень, ми отримаємо дуже великий розмір сторінки і все що випливають з цього проблеми.
Проблема тільки в трудомісткості такого рішення. потрібно:
- створити превью
- Завантажити на сайт основне зображення і превью
- Додати в матеріал превью
- Додати на превью посилання на основне зображення
Погодьтеся, список завеликий, особливо, якщо мова йде не про один, а про десяток зображень.
Для спрощення рішення даної задачі існує плагін для Joomla, який називається mavik Thumbnails. Плагін був написаний нашим розробником (ось гілка на Joomlaforum'е) і виявився дуже зручним, настільки зручним, що особисто я б включив його в базовий набір розширень Joomla.
Ще раз, якщо ви нічого не зрозуміли. Щоб отримати зменшені картинки в матеріалі, при кліці по яким буде відкриватися оригінальні у спливаючому вікні, вам потрібно:
- Встановити і налаштувати плагін mavik Thumbnails
- Додати оригінальну картинку до статті і стиснути її «за куточок» до розмірів необхідного превью
Усе! Решта плагін зробить за вас. Якщо ви публікуєте у себе на сайті статті, даний плагін може виявитися для вас просто незамінним.
Як полегшити завантаження сторінок сайту наJoomla, що містять велику кількість зображень.
Хитрі люди придумали дуже витончене рішення. При первинному завантаженні сторінки завантажуються тільки ті зображення, які входять на, так званий, перший екран монітора користувача (та частина сайту, яка видима на моніторі одразу після завантаження). Далі, коли користувач починає прокручувати сторінку вниз, поступово завантажуються і інші зображення із застосуванням технології AJAX. Даний спосіб відомий під назвою «LazyLoad» або «Ледача завантаження». Хороший приклад Lazy Load - нескінченна стрічка новин Вконтакте. Правда, там, таким чином, завантажуються не тільки зображення, а вся інформація в цілому.
Реалізувати «ледачу завантаження» в Joomla дуже просто. Чому? Це вже зробили за нас. Представляю вам ще один чудовий безкоштовний плагін - LLFJ - Lazy Load for Joomla!
- Встановлюємо та налаштовуємо
- активуємо
- насолоджуємося
Після активації плагіна сторінки з великою кількістю зображень почнуть завантажуватися значно швидше, а відвідувачі сайту стануть досить.