Размер банера в теме prostore Есть решение


Здравствуйте. Как настроить банер на главной странице который отображает блок промо? Размеры пробовал 1000х350, широкоформатные, короче режет фотки как хочет рандомно и получается гадость.

Мне нужно разместить там изображение с лицами, т.е чтобы не резало, ну проще говоря я хочу сделать шапку как в ютабе или вк под нужные размеры, загрузить и радоваться http://joxi.ru/brRZnPqHQnn5Yr

Второй вопрос как убрать цвет фона который портит банер, он дымку накладывает при всех раскладах

http://joxi.ru/5mdqnPKfvppNK2


2 ответа
  • Владимир Сергеев
    Разработчик
    Решение
    25 сентября 2017 21:43

    Здравствуйте, Лев!
    Изображения обрезаются для того, чтобы сохранить высоту, ведь если они не изменят свой размер и пропорции, то изменится высота.
    И тогда весь текст может не влезть в промо-карточку меньшей высоты.

    Поэтому я всем рекомендую использовать изображения без текста, а текст наносить с помощью полей промо-карточки.

    Но у вас нестандартная ситуация – обрезаются лица.
    В таком случае действительно лучше сделать так, чтобы изображение масштабировалось, а не обрезалось.
    Поэтому вам всё-таки придётся залезть в код и сделать кое-какие правки.

    Итак. Откройте приложение Магазин –> витрина –> proStore –> шаблоны.
    В списке файлов найдите файл с именем home.slider.html

    В данном файле найдите код (там два фрагмента: ближе к началу файла и ближе к концу – для разных режимов):

    <li data-count="{$count++}" style="background-image: url('{$promo.image}'); min-height:{$slider_height}px;">
        <a href="{$promo.link|escape}" class="slider-inner" style="min-height:{$slider_height}px;"{if !empty($theme_settings.slider_promo_blank)} target="_blank"{/if}>
            {if !empty($promo.background_color)}
            	<div class="overlay" data-opacity="{$theme_settings.p_overlay_op}" data-opacity-hover="{$theme_settings.p_overlay_op_hover}" style="background: {$promo.background_color}; opacity: {$theme_settings.p_overlay_op};"></div>
            {/if}
    
            {if !empty($promo.title)}
            	<div class="slider-title {$theme_settings.slider_promo_align}" style="color: {$promo.color}; font-size: 2.2em; text-transform: uppercase; font-weight: 300;">{$promo.title}
            	</div>
            {/if}
            {if !empty($promo.body)}
            	<div class="slider-text {$theme_settings.slider_promo_align}" style="color: {$promo.color}; font-size: 1.2em;">
            		{$promo.body|nl2br}
            	</div>
            {/if}
    
            {if !empty($promo.countdown_datetime)}
                <div class="promo-countdown" data-start="{date('Y-m-d'|cat:+2|cat:' H:i:s')}" data-end="{$promo.countdown_datetime}" style="opacity: 0;">{$promo.countdown_datetime}{$smarty.now|date_format:'O'}</div>
            {/if}
        </a>
    </li>

    И замените его на этот код:

    <li data-count="{$count++}">
        <a href="{$promo.link|escape}"{if !empty($theme_settings.slider_promo_blank)} target="_blank"{/if}>
            <img src="{$promo.image}" alt="{if !empty($promo.title)}{$promo.title}{/if}" />
        </a>
    </li>

    Но учтите, что в таком случае Заголовок и подзаголовок промо-карточек выводится не будут.

  • Лев
    Решение
    26 сентября 2017 13:41

    Спасибо ! Всё получилось - теперь космос

Добавить ответ
Чтобы добавить комментарий, зарегистрируйтесь или войдите
Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
Подписывайтесь и получайте скидки!

Узнавайте первым о скидках и специальных предложениях!