Сетка баннеров на главной

[chukcha]

в принципе почти готовое решение

 

[Yurta]

Кароче вот полный вариант, а там думаю уже разберетесь

 

<div class="row">
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="img-box h350">
         <img class="img-responsive" src="" alt="">
         <div class="box-caption">
         <a href=""><h2>Тут пишем загловок</h2></a>
            <a class="btn btn-default" href="">Подробнее</a>
         </div>
      </div>  
         <div class="img-box h250">
         <img class="img-responsive" src="" alt="">
         <div class="box-caption">
         <a href=""><h2>Тут пишем загловок</h2></a>
            <a class="btn btn-default" href="">Подробнее</a>
         </div>
      </div> 
   </div>

      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="img-box h150">
         <img class="img-responsive" src="" alt="">
         <div class="box-caption">
         <a href=""><h2>Тут пишем загловок</h2></a>
            <a class="btn btn-default" href="">Подробнее</a>
         </div>
      </div> 
         <div class="img-box h50">
         <img class="img-responsive" src="" alt="">
         <div class="box-caption">
         <a href=""><h2>Тут пишем загловок</h2></a>
            <a class="btn btn-default" href="">Подробнее</a>
         </div>
      </div>  
   </div>

</div>

И стили

 

.img-box {
  position: relative;
}

.box-caption {
  position: absolute;
  bottom: 0;
  text-align: center;
}

.h350 {
  height: 350px;
  overflow: hidden;
}

.h250 {
  height: 250px;
  overflow: hidden;
}

.h150 {
  height: 150px;
  overflow: hidden;
}

.h50 {
  height: 50px;
  overflow: hidden;
}

 

 

картинки пофиг, какого размера, главное чтоб не маленькие

Змінено 17 червня 2017 користувачем Yurta

[Eclair]

Это було круто, пошла пробовать)))))))))))))))))

[Yurta]

:)) 

 

в кнопке btn-default на свое заменить, это стандартная бутсрап кнопка, к примеру на btn-black  и прописать цвет текста, background и border-color 

[HyperLabTeam]

 

[Eclair]

В 6/17/2017 в 16:54, Yurta сказал:

картинки пофиг, какого размера, главное чтоб не маленькие

 

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

Змінено 19 червня 2017 користувачем Eclair

[Eclair]

В 6/17/2017 в 17:42, AWARO сказал:

 

 

Я купила qbanner, некачественный модуль, а именно: из админки на фронтенд передается на секунду синий фон при загрузке страницы; не responsive; про остальное промолчу. Авторам даже не писала.

Змінено 19 червня 2017 користувачем Eclair

[Eclair]

 

[Shureg]

В 17.06.2017 в 20:34, Shureg сказал:

Если баннеры одинаковой ширины, есть еще вот такой модЕрновый вариант  )

Легко и просто, на всех современных браузерах пашет

Ну я же говрил) Единственный недостаток - направление не слева направо, а сверху вниз. Но для баннеров без разницы.

ЗЫ: column-width лучше, чем column-count.  Адаптивней.

Змінено 19 червня 2017 користувачем Shureg

[Miha7685776]

15 минут назад, Eclair сказал:

 

мне лишный раз не дают писать. типа хуливарю и филюдю. короче

хорошим тоном считается display:inline-block и еще хорошим на флекс.  хуже на флоатах, но у вас есть сетка бута.

никакими массонриями тут не пахнет

Змінено 19 червня 2017 користувачем Miha7685776

[Eclair]

14 минут назад, Miha7685776 сказал:

мне лишный раз не дают писать. типа хуливарю и филюдю. короче

хорошим тоном считается display:inline-block и еще хорошим на флекс.  хуже на флоатах, но у вас есть сетка бута.

никакими массонриями тут не пахнет

 

Значит ли это, что должна быть еще обертка col-sm-6 col-xs-12 на каждый div?

[Tom]

https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=23014

Или с переводом

 

 

[Eclair]

3 минуты назад, Tom сказал:

https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=23014

Или с переводом

 

Custome_banner.ocmod.zip

Compatibility

2.0.0.0, 2.0.1.0, 2.0.1.1, 2.0.2.0, 2.0.3.1, 2.1.0.1, 2.1.0.2, 2.2.0.0

 

Я на ocstore 2.3 ((( Но спасибо : )

Змінено 19 червня 2017 користувачем Eclair

[Miha7685776]

7 минут назад, Eclair сказал:

 

Значит ли это, что должна быть еще обертка col-sm-6 col-xs-12 на каждый div?

блин сума можно сойти.

да. как Yurta писал только не надо давать высоту.

по инлайн

<div class="banners-block">

       <div class="banners-block_item">

               <img class="banners-block_item__img" src="" alt="" />

       </div>

       <div class="banners-block_item">

               <img class="banners-block_item__img" src="" alt="" />

       </div>

       <div class="banners-block_item">

               <img class="banners-block_item__img" src="" alt="" />

       </div>

       <div class="banners-block_item">

               <img class="banners-block_item__img" src="" alt="" />

       </div>

</div>

 

.banners-block{

}

.banners-block_item{

display:inline-block;

vertical-align:top;

width:100%;

max-width:500px;

}

.banners-block_item__img{

max-width:100%;

}

 

 

 

все. а там уже гуглите медиа запросы, и тд и тп

[Tom]

В 19.06.2017 в 11:36, Eclair сказал:

Compatibility

2.0.0.0, 2.0.1.0, 2.0.1.1, 2.0.2.0, 2.0.3.1, 2.1.0.1, 2.1.0.2, 2.2.0.0

 

Я на ocstore 2.3 ((( Но спасибо : )

Адаптировал

 

 

[Eclair]

6 минут назад, Tom сказал:

Адаптировал

 

Custome_banner.2.3.ocmod.zip

теперь их сразу два: )

[Tom]

Вы что и первый установили?

Ищите папки 

admin\controller\module

и

catalog\controller\module

и переименуйте их например добавив в конце нижнее подчёркивание.

admin\controller\module_

catalog\controller\module_

 

[Shureg]

1 час назад, Eclair сказал:

 

А чем вас этот вариант не устроил?

[Eclair]

2 минуты назад, Tom сказал:

Вы что и первый установили?

Ищите папки 

admin\controller\module

и

catalog\controller\module

и переименуйте их например добавив в конце нижнее подчёркивание.

admin\controller\module_

catalog\controller\module_

 

 

Теперь хоть в глазах не двоится:)))Спасип. А модулю мануала не было?))) Или поспасть сначала, со вчерашнего полудня эту задачу решаю.

[Eclair]

3 минуты назад, Shureg сказал:

А чем вас этот вариант не устроил?

 

Miha зарубил (((( Сказал это не по православному и что-то там про бутстрап, в чем я окончательно потерялась)))))

Змінено 19 червня 2017 користувачем Eclair

[Shureg]

Ах, Miha зарубил.. ну, тогда конечно, это такой авторитет Он тут в каждой бочке  теме "авторитетствует"

Змінено 19 червня 2017 користувачем Shureg

[Tom]

12 минут назад, Eclair сказал:

 

Теперь хоть в глазах не двоится:)))Спасип. А модулю мануала не было?))) Или поспасть сначала, со вчерашнего полудня эту задачу решаю.

Я его перевёл.Читать инструкции...,так там явно не тянет на премию Оскар модуль данный.Прост, как кусок хозяйственного мыла.

Дизайн -Баннеры загрузили картинки.

Дополнения-Модули Кастомный баннер указали ,какой из ранее загруженных баннеров(наборов картинок) будем использовать.

В настройках через запятую указали всем картинкам ширину и так же высоту.

Указали нужный нам заголовок.Нужно или нет выводить заголовок(можете там текст свой на баннеры подцепить), а так же цепляете любой класс(например my_banner) и потом можно в стилях заголовок разместить так и там где он больше по душе, потому как он подхватит этот самый класс my_banner.

Всё.

[Eclair]

2 минуты назад, Tom сказал:

Я его перевёл.Читать инструкции...,так там явно не тянет на премию Оскар модуль данный.Прост, как кусок хозяйственного мыла.

Дизайн -Баннеры загрузили картинки.

Дополнения-Модули Кастомный баннер указали ,какой из ранее загруженных баннеров(наборов картинок) будем использовать.

В настройках через запятую указали всем картинкам ширину и так же высоту.

Указали нужный нам заголовок.Нужно или нет выводить заголовок(можете там текст свой на баннеры подцепить), а так же цепляете любой класс(например my_banner) и потом можно в стилях заголовок разместить так и там где он больше по душе.

Всё.

 

Капец, я не посмотрела, что в каждый Дизайн->Баннер можно запихать уйму картинок, для меня один баннер - одна картинка (надеюсь они не сменяют друг дружку как слайдеры, иначе смысл теряется).

[Shureg]

Упражняться с модулями, конечно, полезно для общего развития.

Но именно ваш вариант масонри можно сделать либо с помощью скрипта, либо через css. И бутстрап в обоих случаях не участвует)

Хотя, в принципе, если задавать через css  column-count, то внутри колонок можно и бутстрапом осторожненько размеры задать.

Змінено 19 червня 2017 користувачем Shureg

[Eclair]

1 минуту назад, Shureg сказал:

Упражняться с модулями, конечно, полезно для общего развития.

Но именно ваш вариант масонри можно сделать либо с помощью скрипта, либо через css. И бутстрап в обоих случаях не участвует)

 

Это хорошо или плохо?))))