Как изменить размер изображения на лету

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

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

  • Скачайте тот скрипт

↓ Как всегда, он доступен для моих подписчиков

Уже скачали 277 раз(а)
Открыть ↓
Для разблокировки содержимого, введите код из последнего, присланного вам письма.
  • В папке вашей темы создайте новую папку с именем scripts.
    Загрузите туда файл timthumb.php
  • В файлах single.php, index.php, archive.php и search.php вашей темы перед тегами
    <?php the_content(); ?> или <?php the_excerpt() ?>

    вставьте следующий код:

    <img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/images/1.jpg&amp;h=100&amp;w=200&amp;zc=1;q=100;" alt="Превью" />

    Или так (если хотите, чтобы добавленная в пост картинка являлась ссылкой на пост):

     <a href="<?php the_permalink() ?>" rel="bookmark" >
        <img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/images/1.jpg&amp;h=100&amp;w=200&amp;zc=1;q=100;" alt="Превью" />
     </a>

    Здесь мы вызываем скрипт timthumb.php и передаем ему изображение c параметрами:
    h=100 - высота;
    w=200 - ширина;
    q=100 - качество изображения;
    Скрипт timthumb.php использует GD библиотеку, которая позволяет динамически с помощью PHP производить операции с изображениями. Библиотека GD установлена по умолчанию на всех серверах с PHP5. Если на вашем сервере нет PHP5, узнайте у своего хостера, установлена ли GD библиотека.
    Скрипт получает параметры, которые вы ему передали (URL-адрес, ширину, высоту, качество изображения) и использует их для создания нового изображения с вашими размерами.
    Если в вашей теме изображения выводятся через произвольные поля, воспользуйтесь следующим кодом:

    <?php $image = get_post_meta($post->ID, 'thumbnail', $single = true);
         if($image !== '') { ?>
            <a href="<?php the_permalink() ?>" rel="bookmark" >
                <img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=<?php echo get_option('home'); ?>/<?php $values =  get_post_custom_values("thumbnail"); echo $values[0]; ?>&amp;w=170&amp;h=124&amp;zc=1&amp;q=100;" alt="<?php the_title(); ?>" />
                </a>
    <?php } ?>

А еще этот замечательный скрипт может кэшировать изображения, используемые в статьях.
Чтобы эта функция работала, создайте в папке scripts папку cache и установите на нее права 777, разрешающие запись.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1

(1 голос, в среднем: 5 из 5)

Комментарии

  1. Как всегда, полезный и интересный пост!
    Единственный блог где я подписался на RSS ленту и не жалею об этом.
    Пример работы timthumb.php уже удачно тестировал в Вашей теме News Blog

  2. У меня вопрос по теме.
    Можно ли использовать этот скрипт для кэширования скриншотов Websnapr
    Нужно для этого проекта _http://info-runet.ru/, думаю, вы понимаете, зачем.
    Кстати, добавьте туда свой сайт, так как он действительно один из лучших по своей тематике.

    • Юрий, этот скрипт кэширует изображения, используемые в статьях вашего
      сайта. Возможно, он сможет кэшировать и сторонние изображения, я не
      пробовала.
      Заменитев этом коде < img src="/scripts/timthumb.php?src=/images/1.jpg&h=100&w=200&zc=1;q=100;" alt="Превью" />
      адрес картинки адресом вашего скриншота на стороннем сайте и попробуйте - будет работать или нет.

  3. Вот смотрите вывожу так:
    src="http://info-runet.ru/wp-content/themes/katalog/scripts/timthumb.php?src=http://images.websnapr.com/?size=S&key=kwM6lazi1ASP&url=http://kismedia.ru&w=202&h=152&zc=1&q=100;"

  4. Ксана, не могу достучаться до вас через емайл. В теме News Blog, счастливым обладателем которой я недавно стал, все изображения в постах и на страницах выводятся под этот скрипт, даже иконки форума приняли размеры по этому скрипту. Иногда нужно вставить изображения другого размера но не получается. Подскажите, как отключить этот скрипт или сделать как-то еще, чтобы можно было картинки подгонять по своему. Заранее спасибо

    • Сергей, скрипт обрабатывает только те изображения, которые добавлены через блок "Изображения" расположенный на странице добавления записи или через Произвольные поля с ключом "thumbnail".
      Скрипт не обрабатывает изображения, добавленные в пост медиа-загрузчиком (т.е. стандартным для WordPress способом) или прямой ссылкой в тексте поста (т.е. тегом img).
      Поэтому, если вы хотите добавлять в посты изображения другого размера, добавляйте их тегом img.
      Например, 1е изображение в статье добавляйте через скрипт, а все следующие тегом img, вставленным в текст статьи.
      Об изображениях форума:
      Если в файлах вашего форума нет кода для вывода изображений через этот скрипт, то сам скрипт никак не может влиять на картинки на форуме.
      Возможно ваш форум подгружает стили из CSS-файлов темы - но это маловероятно.

      • Здравствуйте, Ксана. Вот на этой странице _http://belternet.ru/informacia/o-gorode-i-raione.html внизу, я вставил изображения обычным способом, одно 300*212 второе 237*300, эти картинки приняли размер, как и первое изображение в записи, которое обрабатывается скриптом

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

          <img class="foto" src="адрес картинки />

          img .foto {
          width: 300px;
          height: 212px;
          }

          • Пробовал и так... картинки как вкопанные - ставятся под один размер, с форумом вообще беда, что только не перепробовал.
            Кстати, тестировал тему с таким же скриптом, в ней первая картинка ставится по размерам скрипта, а следующие уже по заданным размерам, картинки ставятся обычным способом, ничего прописывать не нужно

          • Сергей, откройте файл maincolumn.css ( он находится в папке CSS ).
            Найдите там класс .text img ( строка 123 ).
            Поменяйте в нем размеры изображений.

            Вместо:

            width: 220px;
            height: 160px;

            Поставьте:

            width: auto;
            height: auto;

            Вот так:

            .text img {
            width: auto;
            height: auto;
            padding: 0;
            margin: 5px 15px 5px 0;
            border: 1px solid #ddd;
            }

          • Спасибо, Ксана, помогло.

  5. Ксана, спасибо за пост, но у меня большая проблема с обработкой фотографий этим скриптом 🙁
    Дело в том, что каждая фотография по 2-4 сек обрабатывается, очень долго, пользователю с задержкой отдается. Нельзя ли как-то сократить время ожидания и ускорить процесс? Использовал уже 3 разных хостинга (думал, дело в оперативной памяти для пхп или скорости процессора), сейчас использую хостинг 120р в месяц, но все равно очень медленно работает. Сайт в приписке, может быть есть какое-нибудь решение? Искал в гугле - не нашел ничего на тему медленной работы скрипта.

    • Посмотрела - действительно, есть небольшая задержка.
      Но, вы уверены, что причина в этом скрипте?
      Я бы проверила файл error_log на вашем сервере.
      Мне кажется, причина в другом, по крайней мере, я никогда не сталкивалась с тем, что это скрипт работает с задержкой.
      Но, если будете совершенно уверены, что причина именно в нем, поставьте другой, аналогичный. Например, скрипт Тимура Камаева, он работате быстрее.

  6. Здравствуйте, скажите пожалуйста, как сменить размер головного изображения?

  7. пробовал на денвеле, не работает, проверил библиотеку gd 2.0 есть. в чем может быть проблема?

  8. Добрый день!
    На своем сайте я пользуюсь резиновой темой, и поэтому у меня остро встал вопрос о автоматически изменяющихся изображениях. Я считаю лучшим выходом - вручную указывать размеры изображения в процентах. Например установить ширину изображения в 50% а высоту - автоматическую. Тогда в одну строку влезет 2 картинки. Если указать ширину 33% а высоту - автоматически, то в строку влезет 3 картинки. И т.д. Это много удобнее и красивее выглядит.
    Кроме того, на странице я размещаю уменьшенные копии изображений, которые пользователь может рассмотреть, открыв галерею с изображениями статьи прямо в посте. Это сильно уменьшает время загрузки страницы. В целом мой сайт оптимизирован для мобильных устройств и компьютеров.
    Поэтому я считаю ваш скрипт не нужным, потому что без знаний html в блогосфере не обойтись, иначе вы застрянете в прошлом веке.
    Технологии идут вперед, надо успевать за ними.
    Ставьте себе резиновые темы на сайт, которые адаптируются под любое разрешение экрана.
    При этом вам придется освоить азы html, но без этого извините, никуда.
    Если вы плюнете и скажете - нету времени, то оставайтесь в прошлом веке.
    Вас обгонят молодые и прогрессивные сайты.
    А оптимизация под мобильные устройства, поверьте сиииильно продвигает сайт потому что людям удобно читать ваш сайт где угодно на чем угодно и с любого устройства.

Ответ на комментарий

Войти, чтобы написать отзыв.

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

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

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 204
Отзывов 5459