Как подогнать изображение под размер записи в WordPress

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

Встречайте очередную статью для новичков в WordPress! :-)


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

В идеальном варианте, широкоформатное изображение должно точно вписаться по ширине:
Как подогнать изображение под размер записи в WordPress

А бывает и вот такая неприятность (выявлено в плагине wPPage):
Как подогнать изображение под размер записи в WordPress

Видите разницу? В первом случае изображение точно вписалось по ширине, а во втором — вылезло за границы, из-за чего внешний вид страницы сразу стал в разы хуже.

Как же это исправить?

Есть два варианта: изменить масштаб изображения в самом WordPress, либо изменить фактический размер изображения в графическом редакторе.

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

Всё дело в том, что когда вы масштабируете размер изображения средствами WordPress, вы фактически не изменяете его истинный размер. В итоге, браузерам ваших посетителей придётся сначала загрузить полную версию изображения, а затем изменить масштаб «на лету», чтобы оно вписалось по ширине в окно.

Я рекомендую изменять размер изображения под нужный вам, используя любой удобный графический редактор. Это может быть Adobe Photoshop, GIMP, Paint.Net или какой-нибудь другой.

Как узнать требуемый размер?

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

Рассмотрим на примере браузера Google Chrome, в остальных (Opera, Mozilla Firefox, Яндекс.Браузер) всё делается абсолютно аналогично.

  • Нажимаем правой кнопкой мыши на любом элементе на странице и в появившемся меню выбираем «Инспектировать элемент»:
    Как подогнать изображение под размер записи в WordPress
  • Откроется отладчик:
    Как подогнать изображение под размер записи в WordPress
  • Пугаться его вида не стоит — он не такой страшный, как кажется.
    В нашем случае был выделен и подсвечен тот элемент, на котором я нажал правой кнопкой мыши.
  • Теперь нам нужно определить контейнер, в котором выводится наш контент, собственно.
    Для этого перещёлкиваем по всем элементам древовидной структуры, снизу вверх:
    Как подогнать изображение под размер записи в WordPress
  • Обращаем внимание на то, что при выборе какого-либо элемента, он будет подсвечиваться на самой странице сайта:
    Как подогнать изображение под размер записи в WordPress
  • Ваша цель — найти такой элемент, который бы был по размерам с шириной страницы.
    В моём случае это элемент ps_content:
    Как подогнать изображение под размер записи в WordPress
  • Как я узнал, что это именно он? Смотрите на скриншот, вы поймёте сразу:
    Как подогнать изображение под размер записи в WordPress
  • Обратили внимание, что именно эта ширина и нужна мне для картинки?
  • Теперь остаётся лишь найти эти самые размеры ширины контейнера. Вот они:
    Как подогнать изображение под размер записи в WordPress

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

Есть вопросы? Задайте их в комментариях! :-)

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Комментарии

  • Здравствуйте, а подскажите как сделать чтоб ширина изображения была равна ширине страницы? Т.е. без белых полей(отступов) по бокам?
    У меня ширина страницы 1000, контекста поставила в коде 1000, но остались отступы, но с текстом нормально, а вот картинки на главной хочу во всю ширину страницы…ставлю 1000- съезжает как показано у Вас в статье.
    Очень рассчитываю на Ваш ответ)))

  • Дело понятное. Но ответ хотелось бы найти..

    • В том смысле, Николай, что рекомендации Гугла это не панацея. Ни один сайт не удастся довести до 100% в соответствие с их рекомендациями. И ваш вопрос можете оставить открытым, не тратьте время на него.

  • они у меня подключены, просто PageSpeed рекомендует сжать themes/arclite/fonts/share.ttf что уменьшит ее размер на 61,1 КБ (55 %).
    Сжатие страницы content/themes/arclite/fonts/union.ttf уменьшит ее размер на 27,6 КБ (38 %).Непонятно как их сжать эти страницы? Это ведь не CSS, а просто шрифты..где не спаришивал никто не в курсе, как они сжимаются??

  • Это я так понимаю, что это коды шрифтов, но как их сжать непонятно???

  • Александр добрый день. Вы не подскажете как сжать коды share.ttf и union.ttf fonts файлов?

  • Александр спасибо. Достал вас уже своими проблемами. Проблему практически решил.. Спасибо, что, как всегда, не отказали.

  • Александр добрый день. Помогите еще разок. Последний. не к кому просто обратиться.

  • Огромное спасибо Александру. Проблема решена на все 100%.

  • Со всеми кодами пробовал с этим .entry-content p:first-child img:first-child {width:200px !important;height:200px !important;} вообще меняет даже картинки темы

  • Наверное какой то код в функции еще надо добавлять..

  • Александар все тоже и с новым кодом, даже тему переустановил!

  • Вставил все то же — ничего не поменялось…Не понимаю..Наверное что-то надо в функции темы добавлять.

    • Где вы что меняете, Николай? Я смотрю ваш файл style.css и вижу в нём вот это последней строкой:
      .entry-content img:first-child {width:200px !important;height:200px !important;}

      Но это совсем не тот код, который я указал комментарием ниже!

  • Вот прямая ссылка до файла CSS, в которой я вставляете указанный вами код (вставлен в самом конце) http://stroikredit.com/wp-content/themes/bw/style.css?ver=3.8.1

  • Вот к примеру http://stroikredit.com/oshibki-pri-stroitelstve-kirpichnogo-doma.html ссылка на страницу, где ВСЕ изображения изменяют свой размер.

  • Вот например http://stroikredit.com/oshibki-pri-stroitelstve-kirpichnogo-doma.html все одного размера. В конце там вообще большое должно быть.

  • Установил. Ссылка http://stroikredit.com/ . Александр спасибо.

    • Читайте внимательнее, Николай. Мне нужна ссылка не на главную страницу, а на любую из записей, где ВСЕ изображения (как вы пишите) изменяют свой размер.

      И укажите полную ссылку до файла CSS, в которой вы вставляете указанный мною код.

  • Поменял, все как и раньше — меняет все изображения.

    • Установите указанный в предыдущем комментарии код в style.css и дайте мне ссылку на запись вашего сайта, где я могу это сам увидеть.

  • Добрый день, так и для меня хобби. Этот код #content img:first-child {width:200px;height:200px;} работает но меняет все изображения, а не первые. Извините за потраченное время, как мое так и ваше. И все-равно спасибо.

  • Да, тут мне явно не помогут.

    • То есть, вы считаете, что я должен всё бросить и уделить максимум времени вашей проблеме, Николай? Блог для меня лишь хобби, на которое я не хочу тратить всё время и распыляться на каждую мелочную проблему, поймите.

      #content img:first-child {width:200px;height:200px;} — вот этот код у вас должен быть не в functions.php, а в style.css. Это так, навскидку.

      И, если вдруг этот код не заработает, то я не буду больше тратить время на разбор этой ситуации. Всё на самом деле слишком просто, чтобы по 3 часа переписываться и изменять размер картинок. Всех благ вам.

  • У меня в функциях вот такой код добавляю к нему и в стили и всеравно все картинки изменяют размер! #content img:first-child {width:200px;height:200px;} и все равно
    add_theme_support( ‘post-thumbnails’ );
    set_post_thumbnail_size( 150, 150, false );
    add_image_size( ‘slider-img’, 1440, 400, true );
    add_image_size( ‘content-img’, 300, 150, true );
    add_image_size( ‘thumbnail-img’, 62, 62, true );
    add_image_size( ‘feat-img’, 1000 );

  • кажется нашел выход c вашей помощью — дописал в функции стиль #content img {width:200;height:200;} и изображения уменьшились, но проблема что все. А надо первые. Может подскажете что дописать чтобы только первые уменьшить и чтобы задать им положение находиться слева или справа/

    • Чтобы только первые, измените код на такой:
      #content img:first-child {width:200px;height:200px;}

      Если надо выровнять справа или слева, тогда надо добавить ещё float:left или float:right, для левого и правого обтекания, соответственно.

  • Заплатить понятно и совсем не жалко, тем более есть чем. Только у меня нет сейчас возможности перевести деньги, именно поэтому и ищу способ сделать все бесплатно. А фраза «все так говорят» — это не для того чтобы кого-то уколоть, нет — просто так на самом деле все так и говорят! Но есть один сайт, мне там сильно помогли, не совсем красиво конечно, но обращусь еще разок и думаю выручат, там правда помогают не совсем опытным в этом деле людям (таким как я чайникам)!

  • Ясно. Все так говорят. Спасибо и на этом.

    • Если вам что-то конкретное надо реализовать — составляйте список требований в Microsoft Word по порядку 1-2-3, отправляйте на support@gruz0.ru, я составлю смету на эти работы и, если ценник вас устроит, решу ваши проблемы.

      И, безусловно, неприятно получать подобные фразы, типа «все так говорят».

  • Уже думаю что так вообще сделать нельзя, хотя все так и было. Где ни спрашиваю никто не знает. О проблема.

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

  • В старой теме вот так было прописано в функциях
    if ( function_exists( ‘add_theme_support’ ) ) {
    add_theme_support( ‘post-thumbnails’, array( ‘post’ ) );
    }
    set_post_thumbnail_size( 200, 200, true );

  • Да вставляю и выравниваю и все. Но дело в том, что мне не нужны миниатюры. Мне надо просто сделать одинакового размера первые картинки в статьях. И просто переместить их в одну сторону. Все так ранее и было, просто поменял тему и все проблемы сейчас. Там можно было добавлять миниатюру или нет, но все первые картинки были одного размера и перемещены в одну сторону.

  • А, я думал нельзя публиковать ссылку. Только пожалуйста потом удалите. Сайт http://stroikredit.com
    Надо чтобы первые картинки в статьях были одного размера и перемещены на одну сторону — в лево или право.. Спасибо!

    • А вы как эту картинку вставляете? Просто в текст самой записи и выравниваете справа-слева или каким-то иным хитрым образом?

      Суть в том, что если вы добавили «Миниатюру записи», то теперь вам необходимо открыть каждую запись на редактирование и выбрать картинку для этой миниатюры в этом блоке.

      Затем отредактировать тему, добавив функцию the_post_thumbnail в файл index.php (или в другой, в зависимости от структуры вашей темы).

      На словах я не смогу вам всё это объяснить, Николай. Если вы никогда с этим не сталкивались, то у вас два варианта — гуглить решение в интернете, либо обратиться к специалисту, который за деньги реализует ваши пожелания.

  • Александр помогите разобраться, как сделать размер одинаковым выводящихся в анонсах статей первых изображений. Спасибо.
    код add_theme_support(‘post-thumbnails’); добавил . А что дальше??

  • Все функция добавить миниатюру добавилась в админ панели. Как сейчас сделать, чтобы первые изображения в статьях выводились в заданном размере, просто в CCS стиль дописать? Или еще что-то надо вставлять. Я с вашей помощью уже на пути к успеху.

  • Буду добавлять. А что дальше, чтобы первые изображения в статьях стали меньше?

  • Нету у меня ее. Буду вставлять. Александр а в какое именно место?

  • Ну ее же можно эту функцию как-то вставить?

    • Вы, когда создаёте новую запись в своём блоге, наблюдаете в правом нижнем углу под метками и рубриками область «Миниатюра записи»? Если нет, тогда в файл functions.php добавьте следующий код: add_theme_support(‘post-thumbnails’);, после этого у вас в Записях появится соответствующая настройка.

      Но, опять же, размер этих изображений придётся менять через код вашей темы в файлах index.php, category.php, tag.php и, наверно, где-нибудь ещё.

  • У меня нету функции использовать миниатюру для записи. Как исправить. Куда что вписать. Чтобы появилась миниатюры и чтобы уменьшить первое изображение в статьях? Надежда вся на вас.

  • Что-то не находил — искал я эту функцию. А как именно, точно и в каком файле ее прописать. Например под размер картинок 150х50.

  • Добрый день, спасибо за ответ. Да изображения в статьях. Но анонсы статей выводятся на главной, в рубриках и т.д. И чтобы они выводились везде одного размера, надо просто в CSS дописать стиль и все? Надо чтобы только первые изображения в статьях имели одинаковый размер, а не все — как быть? Спасибо.

    • За анонсы отвечает другая функция. Вам надо найти в файлах вашей темы упоминание функции the_post_thumbnail и уже в ней изменять размеры на нужные вам.

  • Добрый день, а как можно сделать чтобы все изображения на главной, в категориях и т.д были одинакового размера, независимо от реального размера? У меня на сайте все фотографии разного размера. Спасибо. Какой код куда вставить?

  • Все обрезают фотографии под нужный размер. Когда фотография меньше, а хочется, чтобы она заняла всю ширину? Ведь приходится увеличивать ее размер.

  • $(document).ready(function() {

    $(«img.ClassName»).each(function(index) { //перебираем все картинки с классом ClassName
    if($(this).width() > 700){ //измеряем ширину картинки и если она больше 700px применяем действие
    $(this).removeAttr(«height»).attr(‘width’, ‘100%’); //действие на картинку убирает атрибут высоты проч, и задает ширину 100% относительно нужного вам объекта
    }
    });
    });

    • Круто, конечно, но речь в заметке о том, чтобы не таскать лишние килобайты при загрузке картинок и отказаться от масштабирования средствами браузера :-)

      • Думаю, что большинство — кого это волнует, за ранее, до загрузки корректируют размеры своих фото для постов уменьшая их и облегчая сжатием при сохранении для web. А остальным это… Я о чем собственно, это как с профильной литературой когда хочешь найти то, чего еще не знаешь. Литературы так много, но среди нее так много «воды». Берешь книгу и в ней на 3 четверти «бодяги» и одна треть полезности. А бывают книги (ради гонораров наверное) в которых знающему человеку искать нечего, а незнающему тоже нечего искать, поскольку понять это без разъяснений ему, как несведущему, сложно… :)
        В настройке движка можно задавать размеры трем видам изображения: «миниатюра, средний и полный». Таким образом можно корректировать размер без редактора тоже. Хреново только то, что плодится количество дубликатов одного изображения разных размеров и самое поганое, что при удалении даже из библиотеки медиафайлов они не всегда удаляются с сервера, приходится чистить вручную. А тот кто незнает как это делать?! Как быстро загадится отведенное ему место на сервере?

        • На самом деле нет. Многие пользователи вообще не задумываются о необходимости подгонять размер изображения, и просто загружают то, что есть. Благо, если это JPEG/PNG, но бывают и те, кто сырые BMP загружают по 5 мегабайт размером.

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

          А дубликаты и неиспользуемые изображения можно удалять с помощью соответствующих плагинов, тоже будет неплохо рассмотреть его.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: