OpenCart. Как изменить размеры слайдера

Этот туториал покажет, как изменить размеры изображения слайдера в шаблонах OpenCart.

OpenCart. Как изменить размеры слайдера

Допустим, у вас есть картинка размером 1200 X 831 px и нужно добавить ее в баннер, сохранив исходную пропорцию.

1. Войдите в админ панель OpenCart и откройте меню “Расширения -> Модули (Extensions” -> “Modules”).

2. Из списка выберите модуль “Newcarousel” и кликните “Редактировать (Edit)”.

3. На странице редактирования модуля замените размеры (W + H), установленные по умолчанию, размерами вашей новой картинки (в нашем случае, 1200 X 831 px) и нажмите кнопку “Сохранить (Save)”.

4. Откройте меню Система -> Оформление -> Баннеры (System -> Design -> Banners).

5. Из списка выберите “slideshow” и кликните “Редактировать (Edit)”.

6. На странице редактирования баннера под изображением, которое вы хотите изменить, нажмите кнопку “Обзор (Browse)” . Во всплывающем окне кликните “Загрузить (Upload)”, выберите новое изображения и нажмите кнопку “Открыть (Open)”, чтобы загрузить его.

7. Когда изображение будет загружено, вы увидите следующее сообщение:

8. В окне Менеджер изображений (Image Manager) найдите ваше изображение и выберите его двойным щелчком кнопки мыши.

9. Миниатюра оригинального изображения замениться вашим изображением. В правом верхнем углу нажмите кнопку “Сохранить (Save)”, чтобы сохранить изменения.

10. Откройте ваш сайт в браузере Mozilla Firefox.

11. Используя плагин Firebug, найдите код <div id="camera_wrap"> (id тега div может отличаться в зависимости от версии шаблона). См. скриншот ниже.

12. Например, этот div использует следующее css правило:

    .camera_wrap {
    display: none;
    float: left;
    position: relative;
    z-index: 0;
    }
    

13. Чтобы ваше изображение не выглядело вытянутым на сайте, добавьте новый атрибут к этому css правилу, например, width: 1200px ! important; (где 1200px — ширина вашего нового изображения).

14. В этом же css правиле удалите атрибут float: left; и вместо него добавьте атрибут margin: 0 auto; , чтобы отцентрировать ваше изображение на сайте.

15. Скопируйте отредактированное css правило из окна Firebug и замените им исходное правило в файле catalog/view/theme/theme###/stylesheet/camera.css:

    .camera_wrap {
    width: 1200px ! important;
    margin: 0 auto;
    display: none;
    position: relative;
    z-index: 0;
    }
    

16. Сохраните изменения в файле camera.css .

17. Откройте файл newcarousel.tpl из папки catalog/view/theme/theme###/module/ с помощью программы Adobe Dreamweaver или с помощью другого кодового редактора. В данном файле найдите исходный скритп слайдера между двумя тегами <script></script>. См. скриншот ниже.

18. Так как ширина вашей нового изображения 1200px и высота 600px, процентное соотношение размеров картинки будет равняться 69.25% (831/1200*100=69.25). В данном скрипте замените height: ’32.86%’ на height: 69.25%’, и сохраните изменения.

19. Откройте свой сайт. Теперь вы можете видеть новое изображение с исходными пропорциями на вашем сайте.

Вы также можете воспользоваться детальным видео туториалом:

OpenCart. How to change slider dimensions