• Добрый вечер!
    При попытке натянуть верстку на ВП столкнулся с ошибкой — некорректно выводит картинку новости. Ее растягивает на всю ширину экрана, а не сжимает ее до нужной величины. Собственно выглядеть должно как 50% экрана — картинка, другие 50% заголовок и текст новости.
    Чтоб было более понятно прикреплю картинки:
    Должно быть так: http://prntscr.com/dcv2z9
    Получается вот так: http://prntscr.com/dcv3rn
    Пытаюсь выводить так:

    <div class="col-lg-6 half bg">
    <?php the_post_thumbnail(array('class' => 'img-responsive')); ?>
                    </div>

    В верстке же она указывалась просто как:

    /* project background */
    #project .half.bg {
      background-image: url('../img/unsplash/1.jpg');
      background-size: cover;
      background-position: right;
    }

    Очень надеюсь на Вашу помощь.

    • Тема изменена 7 лет, 7 месяцев назад пользователем divanya.
    • Тема изменена 7 лет, 7 месяцев назад пользователем divanya.
Просмотр 15 ответов — с 1 по 15 (всего 16)
  • галочка на «Обрезать миниатюру точно по размерам (обычно сохраняются пропорции миниатюр)» стоит?

    это если вы не регистрировали свой размер миниатюр в теме.

    Нет не стоит, свои размеры не регистрировал.
    Если верстка кросбраузерная, то необходимо регистрировать все возможное размеры?

    регистрируете максимальный подходящий размер с кропингом, сохраняющим пропорции. и все. уменьшение картинки делаете браузером через css, ну там width: 50%; height:auto;

    в любом случае по вашему скрину непонятно, что вы там нахимичили — то ли у вас миниатюра без сохранения пропорций (вот и вырезался левый верхний квадрат), то ли у вас для .img-responsive прописан неправильный код.

    Дело не только в белом квадрате, изображение(которое неправильно отображается) стоит то же что и на верстке, с одинаковым размером.
    А если присвоить миниатюре класс самого блока:
    <?php the_post_thumbnail(array('class' => 'col-lg-6 half bg')); ?>
    Будет такое же отображение как и в верстке?
    Но ВП же меняет в таком случае название класса на:
    attachment-col-lg-6 half bg size-col-lg-6 half bg wp-post-image

    что значит с одинаковым размером?
    в верстке у вас картинка масштабируется благодаря background-size в css. а в теме вы картинку выводите через функцию миниатюры, которая могла быть сгенерирована ровно с том виде, что на скрине привели.
    вы залезьте на ftp в папочку wp-content/uploads и посмотрите в каком виде и в каком размере у вас там миниатюры создаются.

    Нарезает так:
    gardener1-150×100.jpg
    gardener1-640×426.jpg
    gardener1-768×512.jpg
    gardener1-1000×666.jpg
    gardener1.jpg
    Могу ли я как-то передать параметры:

    /* project background */
    #project .half.bg {
      background-image: url('../img/unsplash/1.jpg');
      background-size: cover;
      background-position: right;
    }

    При помощи <?php the_post_thumbnail(); ?> ?

    • Ответ изменён 7 лет, 7 месяцев назад пользователем divanya.

    Прописал так:

    <?php the_post_thumbnail( $attr = array(
        'src'   => $src,
        'class' => "col-lg-6 half bg")); 
    
    ?>

    Теперь все встало на свои места кроме ширины — http://prntscr.com/dcypyg
    Очень прошу помощи, я не гуру ВП, а всего лишь учусь.

    Все так-же в недоумении… Очень прошу помощи.

    • Ответ изменён 7 лет, 7 месяцев назад пользователем divanya.

    сложно вам помочь со стилями без сайта.
    так то инспектор запустил и посмотрел, что к чему.
    а по скрину фиг что поймешь — вот какого размера у вас там картинка растягивается?

    Вот ссылка на ВП: http://a0102462.xsph.ru
    Должно быть так(HTML верстка): http://prognoz.w-king.club

    вы решили свою проблему?
    а то смотрю ваш сайт открывается нормально.

    Нет, все равно данный класс неправильно применяет css стили. В мобильной версии картинка остается большой.
    Сервис отображения на моб. устройствах

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

    причем, проверив ваш сайт с верткой — там выводится также.

    глюк у вас только с первой картинкой, то стили тут непричем:

    
    <img width="1920" height="1200" src="" class="col-lg-6 half bg wp-post-image" alt="preloader-bg" srcset="http://a0102462.xsph.ru/wp-content/uploads/2014/09/preloader-bg.jpg 1920w, http://a0102462.xsph.ru/wp-content/uploads/2014/09/preloader-bg-150x94.jpg 150w, http://a0102462.xsph.ru/wp-content/uploads/2014/09/preloader-bg-640x400.jpg 640w, http://a0102462.xsph.ru/wp-content/uploads/2014/09/preloader-bg-768x480.jpg 768w, http://a0102462.xsph.ru/wp-content/uploads/2014/09/preloader-bg-1000x625.jpg 1000w" sizes="(max-width: 1920px) 100vw, 1920px">
    

    сама картинка выводится с размерами 1920 на 1200.

    Только первая картинка и текст натянуты на ВП, остальные блоки пока еще не трогал и они пока прописаны обычным html.

Просмотр 15 ответов — с 1 по 15 (всего 16)
  • Тема «Неправильный вывод миниатюры новости» закрыта для новых ответов.