Всё о web

Для чайников и не только


Подписи к изображениям на баннере Opencart 2.x

Март 15, 2016

В стандартном баннере нельзя поставить подпись к изображению. Можно конечно открыть изображение в редакторе и добавить текст, но это не наш выбор. Мы немного подправим стандартный модуль баннеров и сделаем возможность редактирования подписей из админки.

Открываем: /catalog/view/theme/default/template/module/banner.tpl

Меняем этот кусочек кода:

    <?php if ($banner['link']) { ?>
    <a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
    <?php } else { ?>
    <img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
    <?php } ?>

На:

    <?php if ($banner['link']) { ?>
    <a href="<?php echo $banner['link']; ?>">
    <?php if($banner['title']) { ?>
    <div style="position:absolute; bottom:0px; left:0px; width:100%; background: rgba(0, 0, 0, 0.5); font-size: 17px; color: #fff; text-align:center; padding: 5px 0px;"><?php echo $banner['title']; ?></div>
    <?php } ?>
    <img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
    <?php } else { ?>
    <?php if($banner['title']) { ?>
    <div style="position:absolute; bottom:0px; left:0px; width:100%; background: rgba(0, 0, 0, 0.5); font-size: 17px; color: #fff; text-align:center; padding: 5px 0px;"><?php echo $banner['title']; ?></div>
    <?php } ?>
    <img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
    <?php } ?>

Во-первых, мы добавили проверку, есть ли у нас подпись к слайду, во вторых вывели подпись в отдельный слой. Стили слоя можно менять по своёму усмотрению, но вот эту часть: "position:absolute; bottom:0px; left:0px; width:100%;" желательно оставить неизменной, она располагает подпись внизу баннера.

Подпись к изображениям на баннере opencart

Подписи к изображениям добавляются из админки, в меню создания баннера.



Комментарии

2 комментариев | “Подписи к изображениям на баннере Opencart 2.x

  1. В коде где то ошибка, у меня сайт перекосился)))
    выкладываю весь код модуля, на OC 2.1.0 работает нормально
    <div id="banner»>

    <a href="»>

    <img src="» alt=»» class=»img-responsive» />

    <img src="» alt=»» class=»img-responsive» />

  2. не получилось вставить код, опишу словами:
    в коде из первого окошка во 2-й строке перед тегом IMG вставить строки 3-5 из второго окошка.
    в коде из первого окошка в 4-й строке перед тегом IMG вставить строки 8-10 из второго окошка.

Оставить комментарий:

Ваш e-mail не будет опубликован. Обязательные поля помечены *