Войти

Авторизация

Логин:
Пароль:
Забыли пароль?
Регистрация
Сайт пользователей Artisteer и Themler. Официальный торговый представитель.

[РЕШЕНО] Вопрос по картинкам в блоках

проблемы с отображением
Захожу иногда
alexmoon
Сообщений: 49
1576 дней назад
Всем привет.
Друзья, собственно вопрос вот в чем. При создании структуры (таблицы) в программе блоки картинок автоматом сжимаются, что актуально для html-версии или при импорте с контентом.
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.


Но, когда мы устанавливаем шаблон в вопдпресс, то все превью для той же главной (как и для категорий) обрезаются самим движком (в данном случае - шаблоном), и естественно - по всему сайту.
И если идут блоки на главной допустим: 3,2,2,3, то все картинки-превью в них везде одинаковы и либо выглядят некрасиво, либо вообще вылезают за края блоков.
Собственно, это лирика, и все с этим сталкивались.
Выглядит вот так:
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

Собственно сам ламерский вопрос: как малыми жертвами побороть этот недуг? Через css поправить не получается, ведь генерятся они самим шабом.
Редактировалось: 1 раз (Последний: 29 октября 2013 в 15:50)
Постоянный участник
Степаныч
Медаль
Сообщений: 664
12 дней назад
alexmoon:

Собственно сам ламерский вопрос: как малыми жертвами побороть этот недуг? Через css поправить не получается, ведь генерятся они самим шабом.
Ламерский ответ laugh , а готовить предварительно изображения по шаблону не вариант?
Довольно часто приходится.
Насколько знаю механизм обрезки изображений и их масштабирование это актуальный вопрос не только для WP и пока кажется универсального способа подходящего всем нет.
Модератор Постоянный участник
samson
Медаль За активное участие в жизни сайта.
Сообщений: 963
11 дней назад
alexmoon, v
Не совсем понятно то есть вы экспортируете с контентом?
А само разбиение на блоки сделано с помощью таблицы в программе?
Если так то не пойму почему с CSS не вариант?
Открываете исходник HTML в программе и добавляете к классу НУЖНЫХ изображений свой класс, ниже на примере я добавил
img_block:

""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.


Ну а дальше в CSS уже для img_block пишем свойства, возможно с применением important придется.
Но наверно как то так. smoke
Захожу иногда
alexmoon
Сообщений: 49
1576 дней назад
samson, смысл я уловил, не могу понять как див задать отдельный для каждой строки...
Предварительное решение:
имеем морду, для каждой строки (пост 1, пост 2, пост3 - все верхние первые) прописываем id чтобы цепляться в css темы. Другой id для каждых последующих строк (пост4, пост5) и ниже (пост 6, пост7).
Далее для дива картинки прописываем max-width/max-height в px, т.е. у меня выглядить так:
Код PHP:
  1. img.wp-post-image {
  2. margin: 0 5px 5px 0 !important;
  3. max-height: 90px;
  4. max-width: 150px;
  5. }
и в css привязываем к id нужной строки для данного дива картинки. В IE7 и ниже не работает, но в остальных ок.
Но, думаю, что вариант samson'a лучше, а также есть еще простые варианты. Подождем еще мнений :)
Редактировалось: 3 раза (Последний: 29 октября 2013 в 17:03)
Модератор Постоянный участник
samson
Медаль За активное участие в жизни сайта.
Сообщений: 963
11 дней назад
alexmoon, можно и к id но можно и просто в стилях так задавать:
Код PHP:
  1.  
  2. img.wp-post-image.img_block {
  3.  
  4. }
  5.  
Так можно не только к линиям, но и отдельным изображениям. ИМХО.

Кстати так можно не только при экспорте с контентом, но и в самом движке, в редакторе делать, в источнике.
Возможно и не очень удобный вариант если сайт на заказ, но зато без пиления. joke
Но может и правда кто другое скажет.
Постоянный участник
artnikov
Медаль За активное участие в жизни сайта.
Сообщений: 479
216 дней назад
alexmoon:
Предварительное решение:
Через css, можно все, даже адаптив, более менее сносный...
Думаю. самый простой вариант:
.block img, img.block{
width:100%;
max-width:150px;
height:auto;
}
Ну и соответственно, если хотите только к этой странице привязать, то пишите доп. блок, можно div,можно id, на ваше усмотрение...
А совсем, если честно, данной проблемы НИКОГДА НЕ наблюдал... Все вроде как само встает... smoke
P.S. Сори, сейчас посмотрел в старых шаблонах, для Artisteer, это всегда была слишком сложная задача, поэтому ВСЕГДА писал дополнительные стили, для блоков...
То есть, ВЫ задаете блок с параметрами float: left(right), задаете его ширину, через max-width,(чтоб адаптив не испортить) и соответственно, для изображений, как написал выше... И соответственно менял структуру html, данной страницы, исходя из правил css... Простите, НО другого выхода в данной ситуации, увы НЕТ. joke
Или еще вариант, сразу при верстке редактировать изображения, в программе ЭТА возможность предусмотрена, единственный недостаток, это запись в html свойств css, а это НЕ всегда прилично...
Редактировалось: 2 раза (Последний: 29 октября 2013 в 19:21)
Захожу иногда
alexmoon
Сообщений: 49
1576 дней назад
Спасибо большое коллеги!
С самими картинками разобрался, они дейтвительно выводятся через свой div, сейчас хочу попробовать прописать разные стили для вообще всех блоков на главной, через прописывание им отдельных Id-шек. Правлю конечно после активации шаблона, дописывая свойства в css темы.
Чуть позже выложу результат.
Модератор Постоянный участник
samson
Медаль За активное участие в жизни сайта.
Сообщений: 963
11 дней назад
alexmoon:
хочу попробовать прописать разные стили для вообще всех блоков на главной, через прописывание им отдельных Id-шек.
Зачем Вам в HTML5 -id ? это лишнее усложнение. Можно просто как Вам уже показывал, прописывать второе правило.
Захожу иногда
alexmoon
Сообщений: 49
1576 дней назад
Коллеги, всё получилось, как и обсудили. Пока прописал через id по-быстрому, но наверное надо сделать как говорит уважаемый samson, попробую еще попричесывать.
Выглядит условно вот так:
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.


Всё в принципе хорошо. Но, есть нюанс с тайтлом перед картинкой. Смотрим:
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.


Проблема в том, что если у вас есть 2 или 3 блока в рядом (горизонтально), то если тайтл записи длиннее, чем у соседа, то один из блоков сдвигается вниз, что вообще не красиво.
Пока я решил эту проблему костылём, выделив по-умолчанию высоту для тайтла, если длина его переносится на строку, и прижал сам тайтл к низу блока. В общем, смотрим код css в примере.

Но думаю, что это вообще не правильно (если тайтл будет длиннее трех строк, то вообще верстка поплывет), и есть умное нормальное решение. Подскажите плз, как вы решаете эту проблему???

UPD Костыль (если не видно на скрин) для поля тайтла:

Код PHP:
  1. .postheader {
  2. color: #E9EDF2;
  3. display: table-cell;
  4. font-family: Arial,'Arial Unicode MS',Helvetica,Sans-Serif;
  5. font-size: 24px;
  6. font-style: normal;
  7. font-weight: normal;
  8. height: 60px;
  9. margin: 5px 10px;
  10. vertical-align: bottom;
  11. }
Редактировалось: 1 раз (Последний: 30 октября 2013 в 19:37)
Постоянный участник
Handy
Медаль
Сообщений: 768
9 дней назад
alexmoon:
Пока я решил эту проблему костылём, выделив по-умолчанию высоту для тайтла, если длина его переносится на строку, и прижал сам тайтл к низу блока. В общем, смотрим код css в примере.

Но думаю, что это вообще не правильно (если тайтл будет длиннее трех строк, то вообще верстка поплывет), и есть умное нормальное решение. Подскажите плз, как вы решаете эту проблему???

Ставить не фиксированную высоту для блока, а примерно так min-height: 50px;
Тогда при превышении высоты блок будет расширяться вниз.
Еще один способ обрезать длинные заголовки с помощью truncate
но это уже в самом движке придется да и лишен универсальности.
Больше наверно ничего не придумаешь scratch
качественное продвижение и раскрутка сайтов в сеопульте
Захожу иногда
alexmoon
Сообщений: 49
1576 дней назад
Handi:

Ставить не фиксированную высоту для блока, а примерно так min-height: 50px;
Тогда при превышении высоты блок будет расширяться вниз.
min-height работает, тоже вариант, спасибо. Но, почему-то в таком случае нельзя занизить к полу сам текст тайтла, т.е. verical-align: bottom; - не работает :(
В моем коде - работает, для display: table-cell (для остальных вариантов - тоже текст не прижимается к полу)
Постоянный участник
Handy
Медаль
Сообщений: 768
9 дней назад
А там случайно для заголовков line-height не задан?
тогда заголовок будет находится в пределах его и вертикальное положение не поймет.

Но думаю
Но, почему-то в таком случае нельзя занизить к полу сам текст тайтла, т.е. verical-align: bottom; - не работает
сама мысль правильная нужно найти что мешает verical-align.
качественное продвижение и раскрутка сайтов в сеопульте
Постоянный участник
sagus85
Медаль
Сообщений: 288
60 дней назад
alexmoon, там в стилях примерно в строке 82 заданы свойства для всех заголовков.
Поэтому просто для одного действовать не будет.
Как вариант думаю можно попробовать тоже что и для картинок писать дополнительные стили.
Захожу иногда
alexmoon
Сообщений: 49
1576 дней назад
Handi:
А там случайно для заголовков line-height не задан?
нет, поэтому и непонятно что мешает. Но пока пользуюсь вариантом, что я привел в коде выше.
Подождем может кто предложит лучше решение ;)

sagus85:
Поэтому просто для одного действовать не будет.
Так и хорошо, что для всех, мы выставляем условия, не зная какой длины тайтл объявится в конкретном блоке, ведь контент динамический. Так что, вполне хорошо. Стили прописали ;)
Модератор Постоянный участник
samson
Медаль За активное участие в жизни сайта.
Сообщений: 963
11 дней назад
alexmoon, verical-align с дивами не работает crazy
Хотел ответить коротко, но не получится нужно экспериментировать.
Поэтому вот смотрите может что подберете для своего варианта:
Скрытый текст виден только зарегистрированным пользователям

Ну и здесь гляньте:
Скрытый текст виден только зарегистрированным пользователям


Можно попробовать ход конем crazy
Сделать что то подобное в программе, не в рабочем шаблоне, а просто в тестовом, задать как Вам нужно,
а после экспорта посмотреть через фаербаг как именно получились стили.
|
Перейти на форум: