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

[Eclair]

Добрый день!

Ищу способ сделать сетку баннеров на главной, приблизительно как здесь:

Пробовала qbanner, очень некачественный модуль.

Куда копать?)) Спасип.

[Miha7685776]

именно такой не подойдет. под тексты нет поля. есть имя и урл. ну можно, но если знать как.

сверстать, поставить модулем html как вариант.

[chukcha]

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

именно такой не подойдет. под тексты нет поля. есть имя и урл. ну можно, но если знать как.

сверстать, поставить модулем html как вариант.

Как вариант
Но, зная цель эих баннеров! тут нужно несколько банеров с разными сетками

 

Т.е. нужен модуль с гибкой бутсраповской сеткой

типа
 

<div class="row">
  <div class="col-sm-8">
  <div class="col-sm-4">
</div>

<div class="row">
  <div class="col-sm-6">
  <div class="col-sm-6">
</div>

 

[Miha7685776]

5 минут назад, chukcha сказал:

Как вариант
Но, зная цель эих баннеров! тут нужно несколько банеров с разными сетками

 

Т.е. нужен модуль с гибкой бутсраповской сеткой

типа
 

<div class="row">
  <div class="col-sm-8">
  <div class="col-sm-4">
</div>

<div class="row">
  <div class="col-sm-6">
  <div class="col-sm-6">
</div>

 

ну бросить счетчик под цикл и делать разную сетку, ок. я про 2 ряда теста. предпологаю что тексты не часть фото, да и справиться-ли автор

[Eclair]

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

именно такой не подойдет. под тексты нет поля. есть имя и урл. ну можно, но если знать как.

сверстать, поставить модулем html как вариант.

 

Автор не справится:)

Текст "вклеен" в фото, правда не знаю как это воспримет рейтинг гугл, да и ладно.

https://de.bonaparteshop.com/

[Yurta]

Ну, как вариант можно и так https://codepen.io/dudleystorey/pen/eAqzk

 

[Eclair]

Я думаю нарисовать bootstrap разметку в html  и прикрепить HTML модулем, как Miha говорит

[Miha7685776]

ну так в чем проблема? если режет фото, то убирай обработку. сетка такая пойдет. 

<div class="row">
  <div class="col-sm-6">
  <div class="col-sm-6">
</div>

в чем проблема, если можешь справиться?

обработка убирается так

примерно есть такой код

'image' => $this->model_tool_image->resize($result['image'], $setting['width'], $setting['height'])

делаем так

'image' =>$result['image']

теперь выйдет как мама родила

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

[Eclair]

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

Ну, как вариант можно и так https://codepen.io/dudleystorey/pen/eAqzk

 

 

Flex понимает же только Хром?

[Eclair]

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

ну так в чем проблема? если режет фото, то убирай обработку. сетка такая пойдет. 

<div class="row">
  <div class="col-sm-6">
  <div class="col-sm-6">
</div>

в чем проблема, если можешь справиться?

 

Точно, столбцы одинаковые, надо строчки только подогнать

[Yurta]

Флекс понимают почти все даже ie

[Shureg]

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

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

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

[Eclair]

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

Eclair, MosaicJS вам в помощь для такой реализации

 

Спасибо, это круто))))

[Eclair]

Только что, Shureg сказал:

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

 

 

да, ширина одинаковая, высота разная

[chukcha]

Слишком много условностей, например ссылка

 

 

ссылка в виде наложения, ссылка в виде клика по картинке, причем ссылка должна быть "универсальная" index.php?route=

или с выбором сущности (категория товар статья проивольнвя) (данет)
наложение текстовых блоков (данет)

и тд.
 

[Yurta]

Самый простой вариант 

 

<div class="row">
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="img-box">
         <img class="img-responsive" src="" alt="">
      </div>  
       <div class="img-box">
         <img class="img-responsive" src="" alt="">
      </div> 
   </div>
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="img-box">
         <img class="img-responsive" src="" alt="">
      </div>  
       <div class="img-box">
         <img class="img-responsive" src="" alt="">
      </div> 
   </div>
</div>

 

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

[Eclair]

Только что, chukcha сказал:

Слишком много условностей, например ссылка

 

 

ссылка в виде наложения, ссылка в виде клика по картинке, причем ссылка должна быть "универсальная" index.php?route=

или с выбором сущности (категория товар статья проивольнвя) (данет)
наложение текстовых блоков (данет)

и тд.
 

 

Просто ссылка на категорию : ) Тексты вряд ли удастся, это уже другной уровень разработки/верстки

[Miha7685776]

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

 

Точно, столбцы одинаковые, надо строчки только подогнать

если фото именно такие, они сами будут такими. флоат там

[Eclair]

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

Самый простой вариант 

 

<div class="row">
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="img-box">
         <img class="img-responsive" src="" alt="">
      </div>  
       <div class="img-box">
         <img class="img-responsive" src="" alt="">
      </div> 
   </div>
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="img-box">
         <img class="img-responsive" src="" alt="">
      </div>  
       <div class="img-box">
         <img class="img-responsive" src="" alt="">
      </div> 
   </div>
</div>

 

щас буду пробовать, чешу затылок какие пропорции у изображений должны быть

[chukcha]

но самый простой и быстрый

это html блок

 

т.е. сверстала блок и вперед

 

 

Можно подготовить различный набор сеток, чтоб не париться

 

И уже
играться содержимым баннера , те. ссылки, клики мапы

[Shureg]

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

 

да, ширина одинаковая, высота разная

Тогда вам прямая дорога к использованию css column-count

Пара строк css и простейший html

 

[chukcha]

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

какие пропорции у изображений

width:100%

 

а размеры задаст блок

 

[Yurta]

Даже вот так

 

<div class="row">
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="img-box">
         <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">
         <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">
         <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">
         <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;
}

 

[Yurta]

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

щас буду пробовать, чешу затылок какие пропорции у изображений должны быть

Пропорции не нужны, ставьте боkьшое изображение, а класс .img-responsive сам подгонит (адаптив), а вам останется если нужно просто добавить height и overfllow:hidden для каждого Img-box

[Eclair]

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

Пропорции не нужны, ставьте боkьшое изображение, а класс .img-responsive сам подгонит (адаптив), а вам останется если нужно просто добавить height и overfllow:hidden для каждого Img-box

.img-box {
  position: relative;
height: тут сколько-то;
overflow: hidden;
}

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