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

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

+1
Голосів: 1
Опубліковано: 2018 / 02 / 04
Переглядів: 115
Категорія: Різне
Редагувалося: 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 - фінішна пряма

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

  • Маска для сторінки виводу віджетів "Всі, крім головної" в InstantCMS другої гілки
    Маска для сторінки виводу віджетів "Всі, крім головної" в InstantCMS другої гілки

    Вітаю! Дуже часто стикаюся з необхідністю такої сторінки в своїй роботі. На форумі офсайту сситеми, та і в інтернеті також, колеги пропонують в якості позитивних масок перерахувати всі потрібні сто...

  • Віджет "Список контенту з фільтрацією" для InstantCMS 2
    Віджет "Список контенту з фільтрацією" для InstantCMS 2

    Віджет виводить список категорій до яких належать запси, які виведені віджетом. При кліку по назві категорії, записи "фільтруються" за належністю до неї. В налаштуваннях можна вказати роз...

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

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