Головна » Блоги » InstantCMS - переваги та недоліки системи » Тег figure для системного поля image в шаблоні InstantCMS другої гілки

Тег figure для системного поля image в шаблоні InstantCMS другої гілки

0
Голосів: 0
Опубліковано: 2018 / 02 / 04
Переглядів: 43
Категорія: Різне
Редагувалося: 7 раз — останній 4 лютого 2018


Тег <figure>

figure - тег, що використовується для групування елементів в HTML. Найчастіше використовується при виводі картинок та пояснювальних підписів до них. Рахується, що пошукові системи відносяться до такої подачі елементів більш прихильно.


Поле "image"

Системне поле в InstantCMS другої гілки. Служить для завантаження та виводу картинок. Поле має кілька гарних можливостей. Для прикладу, воно дозволяє сформувати одразу кілька розмірів картинки, вивести різні розміри в різних місцях сайту, збільшити розмір картинки кліком по ній.


Виводимо figure з картинкою та пояснювальним підписом для неї в шаблоні InstantCMS

Для початку, в потрібному типі контенту створимо поле в якому будемо вказувати підпис до картинки. Тип поля - строкове, назва - люба, системне ім'я - title_photo (можете використати своє, але не забудьте потім замінити його в приведеному нижче коді).

В залежності від того, чи існує таке поле в типі контенту та чи заповнене воно в конкретному записі, підмінимо код виводу поля з картинкою в шаблоні.
Зміни будемо вносити в файл templates>default>content>default_item.tpl.php.
Видалимо поле з підписом з масиву полів. Для цього де-небудь вверху файла вставимо код:
Код PHP:
  1.  
  2. <?php
  3. //OV:: приберемо з масиву полів поле з додатковою назвою для картинки (цей код треба розмістити вище масиву полів)
  4. unset($fields['title_photo']);
  5. ?>
  6.  
Далі треба знайти код, що виводить HTML полів:
Код PHP:
  1.  
  2. <div class="value"><?php echo $field['html']; ?></div>
  3.  
та замінити його на такий:
Код PHP:
  1.  
  2. <div class="value">
  3. <?php if($field['type'] == 'image' && !empty($item['title_photo'])) { ?>
  4. <figure>
  5. <?php
  6. $field_name = $field['name'];//OV:: системна назва поля
  7. $size_full = $fields[$field_name]['options']['size_full'];//OV:: пресет картинки в записі
  8. $size_modal = $fields[$field_name]['options']['size_modal'];//OV:: пресет картинки в записі при кліку
  9. $url_size_modal = html_image_src($item[$field_name], $size_modal, true); //OV:: шлях до пресету картинки в записі при кліку
  10. $title_photo = $item['title_photo'];//OV:: додаткове поле для вказання назви картинки
  11. ?>
  12. <?php if ($url_size_modal) { ?><a title="<?php echo $item['title_photo'] ;?>" class="ajax-modal modal_image hover_image" href="<?php echo $url_size_modal; ?>"><?php } ?>
  13. <?php echo html_image($item[$field_name], $size_full, $title_photo ? $title_photo : $item['title']); ?>
  14. <?php if ($size_modal) { ?></a><?php } ?>
  15. <?php if(!empty($item['title_photo'])) { ?>
  16. <figcaption><?php html($item['title_photo']); ?></figcaption>
  17. <?php } ?>
  18. </figure>
  19. <?php } else { ?>
  20. <?php echo $field['html']; ?>
  21. <?php } ?>
  22. </div>
  23.  


Стилізуємо тег figure

Для того. щоби наша картинка з підписом виглядала одинаково в різних браузерах (нагадаю, що в браузерах є свої "вбудовані" стилі і вони не завжди співпадають), трішки стилізуємо наші елементи:
Код CSS:
  1.  
  2. <style>
  3. figure{
  4. border: 1px solid #eee;
  5. display: inline-block;
  6. margin: 15px 0;
  7. padding: 10px;
  8. }
  9. figure *{
  10. display: block;
  11. }
  12. figcaption {
  13. font-weight: 700;
  14. margin: 5px 0 0;
  15. }
  16. </style>
  17.  
  18.  
В коді все відкоментовано, розібратися в ньому не складе проблем. За допомогою цього кода, ми не тільки об'єднаємо картинку та її підпис в тег figure, а й зможемо без проблем скористатися функцією поля, що дозволяє вивести збільшений пресет картинки в модальному вікні.

Готово!

Читайте також:

  • "Резиновий" шаблон для InstantCMS
    "Резиновий" шаблон для InstantCMS

    Вітаю! Запрошую всіх зацікавлених до тестування "резинового" шаблону для InstantCMS. Шаблон є варіантом дефолтного; передбачена можливість розміщення модулів в блоки, які закриваються та відкривают...

  • Шаблон Tseso - фінішна пряма
    Шаблон Tseso - фінішна пряма

    Вітаю, шановні! Кінець-кінцем зібрався з духом і зробив давно задумане. Якщо дозволите, для початку історія шаблону в двох словах. Шаблон задумувався як невеличке розширення можливостей дефолту та ...

  • Нова версія шаблону Tseso
    Нова версія шаблону Tseso

    Вітаю, шановні! Підготував нову версію шаблона для InstanCMS 2.8.0. Зміни стосуються стильових файлів (точніше, іх "правопису" та правил підключення). Кілька слів про зміни: 1. всі прави...

  • Вкладка профілю - записи в каталозі для 1.10.6 (плагін)
    Вкладка профілю - записи в каталозі для 1.10.6 (плагін)

    Плагін обзавівся кількома додатковими налаштуваннями, текстовим файлом, прикладом стилю. Демки, на жаль, немає. Парочка скринів нижче. Так виглядаме в профілі: зменшене Зображення. Клацніть, щоб ...

Коментарі (0)

Немає коментарів. Ваш буде першим!