Перейти к содержанию

Рекомендуемые сообщения

Добрый день!

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

5945283c117ef_2017-06-1715_56_58-BONAPARTE.png.54c333dc851d07ae9e64209a5225ba5d.png

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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>

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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 ряда теста. предпологаю что тексты не часть фото, да и справиться-ли автор

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
15 минут назад, Miha7685776 сказал:

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

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

 

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

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

https://de.bonaparteshop.com/

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

<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']

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

Изменено пользователем Miha7685776

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 минуты назад, Yurta сказал:

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

 

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 минуту назад, Miha7685776 сказал:

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


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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Изменено пользователем Shureg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 минуту назад, Designer сказал:

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Только что, Shureg сказал:

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

 

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

 

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

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

и тд.
 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

<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>

 

Изменено пользователем Yurta

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Только что, chukcha сказал:

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

 

 

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

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

и тд.
 

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
7 минут назад, 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>

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

это html блок

 

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

 

 

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
3 минуты назад, Eclair сказал:

 

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

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

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 минуту назад, Eclair сказал:

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

width:100%

 

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Даже вот так

 


<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;
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
3 минуты назад, Eclair сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Гость
Эта тема закрыта для публикации ответов.

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.