[Решено] Вывод картинок горизонтально

Главные вкладки

Аватар пользователя rampage rampage 5 марта 2011 в 12:21

Всем добрый день! Недавно столкнулся с проблемой горизонтального вывода картинок, использовал модуль colorbox. Нетрудно было узнать, что надо использовать «display: inline;», но вот где именно — непонятно.
Вопрос, как мне и подсказали, решился правкой .css файла. Для темы, которую я использую, это файл style.css.
Всего-навсего достаточно было добавить такой код:

.node .field-item {
  display: inline;
}

Надеюсь, кому-нибудь пригодится.

Комментарии

Аватар пользователя astra astra 11 июня 2011 в 14:01

Я вставил ваш код в stile.css, "превью" встали в 2 столбца, но фото стали слитны, можно как то их разделить между собой и как можно увеличить количество превью?

Аватар пользователя rampage rampage 11 июня 2011 в 15:01

Да, разделить можно. Для этого надо настроить отступ, попробуйте свойство padding. Увеличить количество по горизонтали? Можно, по умолчанию влезает столько, сколько может влезть. Поэтому увеличьте ширину содержащего превью элемента.

Аватар пользователя Deman Deman 14 июля 2011 в 12:32

Спасибо большое, помогло
Вот только как сделать так, чтобы в разных типах контента оно выводилось по разному?

Аватар пользователя sumerokr sumerokr 10 ноября 2015 в 11:47

раз уж этот вопрос столь популярен у новичков, немного дополню решение..
более точный вариант будет таким:

.node .field-name-field-gallery .field-item {
display: inline;
}

вместо выделенного gallery пропишите машинное название созданного вами поля для галереи

вставлять этот код нужно *.css вашей темы (например - sites/all/themes/vasha_tema/css/styles.css)

Аватар пользователя Pirat Pirat 10 ноября 2015 в 11:47

Подскажите пожалуйста в чем может быть проблема, сделал вроде как и советуют здесь, а все равно чего-то не выстраиваются они в ряд =(. Подробности на скринах.
З.Ы.
для темы есть только 1 *.css файл style.css

Аватар пользователя RedDemon RedDemon 21 августа 2011 в 13:55

Спасибо, очень долго искал решение, понятно было что всё на самом деле просто, но вот что и куда добавлять нашёл именно здесь.
У меня вопрос, после вставки кода, картинки расположены достаточно далеко друг от друга как сделать чтобы расстояние было величиной в 2-3 пробела, если знаете, подскажите пожалуйста

Аватар пользователя rampage rampage 21 августа 2011 в 14:32

"RedDemon" wrote:
У меня вопрос, после вставки кода, картинки расположены достаточно далеко друг от друга как сделать чтобы расстояние было величиной в 2-3 пробела, если знаете, подскажите пожалуйста

Расстояние между картинками регулируется свойствами css margin и padding. Найдите в вашем файле описания стилей (например, style.css), где прописаны эти свойства и попробуйте изменить их значение. Значения могут быть в пикселях (например, margin-left: 10px;) поэтому вы можете даже более точно, чем в 2-3 пробела определить расстояние.

Аватар пользователя artemrrr artemrrr 10 ноября 2015 в 11:47

Подскажите, у меня в материале ССК несколько полей в каждом поле выпадающий список сейчас они в столбик, это некрасиво и много места, КАК СДЕЛАТЬ их в линию друг за другом???
я прикрепил картину ... (если что)

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

Аватар пользователя sumerokr sumerokr 3 октября 2011 в 10:46

.node .views-exposed-form .views-exposed-widget {
float: left;
}
примерно так. прописывать туда же
"вставлять этот код нужно *.css вашей темы (например - sites/all/themes/vasha_tema/css/styles.css)"

Аватар пользователя artemrrr artemrrr 3 октября 2011 в 11:22

Что то у меня не получается, это моя тема она должна быть именно моей или стандартная подойдет (типа Garland)- я в ее styles.css ставлю, Может не туда ставлю строчку или можно в любое место в этом файле?

Аватар пользователя astra astra 10 октября 2011 в 2:02

А кто нибудь может подсказать, как соединить картинки в Colorbox`е? То есть на странице отдельной к примеру 5 фотографий, но одна из них показывается отдельно от других. Я просто не помню, что именно в настройках Colorbox`а надо сделать, где именно ставить галочку.

Разобрался, галку надо ставить на против "Per page gallery".

Но есть такой вопрос, что именно надо прописать в CCS, что скрыть фотографии и оставить только одну, как в этом примере?

Аватар пользователя Обычный человек Обычный человек 6 марта 2012 в 19:43

У меня такая же проблема, как и у
http://www.drupal.ru/comment/reply/58421/373933

Тема гарланд. В ней уже есть стили для данных дивов в самом конце файла ксс:

.field-name-field-image-more  .field-item{
float: left;
border: 5px;
margin: 5px;
}
.field-name-uc-product-image  {
float: left;
border: 5px;
margin: 5px;
}

Я ниже них добавляю

.node .field-name-uc-product-image .field-items {
  display: inline;
}

Но ничего не меняется. Пробовал всяко-разно менять, но так ничего и не вышло.

Грешу на clearfix в родительском диве
<div class="field field-name-body field-type-text-with-summary field-label-hidden clearfix">

Имеющий такую структуру:

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

Пробовал переопредить, но либо делаю неправильно, либо проблема не в нём.

Аватар пользователя Обычный человек Обычный человек 7 марта 2012 в 19:25

Люди, помогите пожалуйста. Весь уже измучался. Имеем стандартные темы гарланд или бартик.
Имеет такую структуру вывода: http://rghost.ru/36897675/image.png

Пробовал, как советовали выше, добавлять в ксс файл:

.node .field-name-field-image .field-items {
 display: inline;
 }

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

Может этот метод уже не работает? Тогда подскажите другой.

Аватар пользователя Обычный человек Обычный человек 8 марта 2012 в 4:15

О, боги! Проблему нашёл и она заключалась в том, что вместо
.field-items
надо было писать
.field-item

И ладно, чёрт с этим, разобрался. Но скажите мне почему так?! Ведь в коде ясно указано field-items, к тому же выше тоже советовали дописать её.

Аватар пользователя Обычный человек Обычный человек 8 марта 2012 в 15:43

Ну и внесу небольшую лепту:
Как вывести картинки в линию с подписями под ними.

<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
  <?php if (!$label_hidden) : ?>
    <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div>
  <?php endif; ?>
  <div class="field-items"<?php print $content_attributes; ?>>
 
    <?php foreach ($items as $delta => $item) : ?>
    <div class="image-main">
      <div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>><?php print render($item); ?></div>
      <div class = "field-alt"><?php print $item['#item']['alt']; ?></div>
      <div class = "field-title"><?php print $item['#item']['title']; ?></div>
    </div>
    <?php endforeach; ?>

  </div>
</div>

//основной код взят от сюда - http://drupalace.ru/lesson/primer-perekrytiya-shablona-cck

в css-файле прописывайте

.машиное-имя-поля .field-item {
display:inline;
}

.image-main  {
width: ширина-картинок px;
float:left;
}

Надеюсь кому-нибудь поможет.

p.s. буду очень рад если скажите почему используется такой код
      <div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>><?php print render($item); ?></div>
вместо такого
      <div class="field-item"> <?php print $delta % 2 ? 'odd' : 'even'; ?><?php print $item_attributes[$delta]; ?><?php print render($item); ?></div>
див класс не закрывается сразу же, а включает себя пхп

Аватар пользователя Обычный человек Обычный человек 10 ноября 2015 в 11:48

Ни дня покоя! Возможно я опять где-то сильно неправ, но на данный момент не могу понять где.
В чем заковырка?

упд:Выяснил что теперь строка

.field-name-uc-product-image .field-item {
}

Не несёт никак не учавствует. Вывод картинок задаётся в

.image-main  {
}

Перепробовал всякие комбинации и стилевые значения. Лучше чем на скрине в аттаче получить на удалось.

упд:Картина начала проясняться. Wronginline - вот что получаем если чуть расширить основное поле

Сам спросил, сам же и отвечаю. Всё дело оказалось в том, что миниатюры... были разного размера!!1

Аватар пользователя superintendent superintendent 12 апреля 2012 в 7:40

Куда вставлять код

.node .field-name-field-gallery .field-item {
display: inline;
}

в Corolla 7?

Там нет styles.css. Вставлял в другие файлы .css - не помогает, все равно выводит картинки вертикально.

Ну и: поле картинки у меня field_image, поэтому код вставляю такой:

.node .field-name-field-image .field-item {
display: inline;
}
Аватар пользователя soloas soloas 5 декабря 2012 в 20:36

K.V. wrote:
Куда вставлять код

.node .field-name-field-gallery .field-item {
display: inline;
}

в Corolla 7?

Там нет styles.css. Вставлял в другие файлы .css - не помогает, все равно выводит картинки вертикально.

Ну и: поле картинки у меня field_image, поэтому код вставляю такой:

.node .field-name-field-image .field-item {
display: inline;
}

Вот решение для Corolla 7.x-3.0-rc1
Код вставляем sites/all/themes/corolla/css/fields.css

.field-item
{
float: left;
}
Аватар пользователя soloas soloas 10 ноября 2015 в 11:48

РЕШЕНО:

Немного поправил код для Corolla 7.x-3.0-rc1

Теперь изображения в ноде горизонтально и не слипаются.

.field-name-field-image .field-item {
  float: left;
  margin-bottom: 15px;
  margin-right: 15px;
}

ВАЖНО:
В настройках темы должны быть выставлены параметры для Image Setting:
Alignment - flu view: нет
Alignment - teaser vidv: нет

Аватар пользователя ET_skyline ET_skyline 6 марта 2013 в 2:09

Всем добрый день! Использую тему Elegant Theme от Devsaran.com В css прописал

.node .field-name-field-photo .field-item {
display: inline;
}

photo - мое имя поля для галереи

ноль реакции. В других темах работает проверял. Может кто сталкивался.