Как изменить размер изображений из-за контейнерной ширины автоматически сторона сервера / без CSS

Делает любой знает, как изменить размер врученных изображений, таким образом, изображение имеет ширину из-за ширины контейнеров содержания. Я не означаю изменять размер изображения с помощью CSS 100% шириной, но вместо этого изменять размер фактических размеров и размера если само изображение.

Для, например: изображение в статье, которая имеет размеры 400px × 300px. Но в обзоре мне только нужно 200px × 150px. Но я не хочу редактировать каждую часть своей темы, чтобы сделать так, потому что существует много различных размеров. Есть ли возможность, что это работает автоматически?

1
02.11.2013, 13:59
3 ответа

Поскольку вещи как это часто требуют, я записал, что плагин, названный "Динамическое изображение, Изменяет размер". Это - в основном плагин, но, из-за, он - подход с одним файлом, это может использоваться в качестве mu-плагина, или тема включают без проблемы. Это - основная цель, должен изменить размер единственных изображений по требованию к данной высоте/ширине.

Это аргументы, которые берет "Тег шаблона" / функция и shortcode:

src      // ID or path
height   // New/resized height
width    // The resized width
classes  // custom classes for CSS targeting 
hwmarkup // Do you want the height="ABpx" width="ABpx" on the image tag?

Теперь Вы могли просто установить hwmarkup кому: true/yes/1/on и это избавляется от img- HTML-тэг width/height- атрибуты, таким образом, браузер изменит размер его к контейнерной ширине автоматически. Вы могли также пойти далее и просто расширить класс:

<?php
defined( 'ABSPATH' ) OR exit;
/**
 * Plugin Name: (#120987) Resize Image to Container Width
 * Author:      Franz Josef Kaiser
 * Author URI:  http://unserkaiser.com
 * Needs @link https://github.com/franz-josef-kaiser/Dynamic-Image-Resize
 */

class wpse120987ResizeImgToContainerWidth extends oxoDynamicImageResize
{
    /**
     * Set the Attributes
     * @param $atts
     */
    public function setAttributes( $atts )
    {
        $this->atts = wp_parse_args( $atts, array(
            'width' => $GLOBALS['content_width']
        ) );
    }
}

function dynamic_image_resize_extd( $atts )
{
    return new wpse120987ResizeImgToContainerWidth( $atts );
}

add_shortcode( 'dynamic_image', 'dynamic_image_resize_extd' );

Обратите внимание на то, что это не тестируется, но просто быстрый проект.

1
19.02.2020, 23:03
  • 1
    спасибо. испытает его. поскольку это не могло бы быть точно, что я ищу, но позволяю, дают ему попытку. Работы :) –  Max 04.11.2013, 10:45
  • 2
    @max Другой связанный ответ мог бы помочь Вам также. –  kaiser 04.11.2013, 12:16

Я думаю, что Вы просто хотите add_image_size () и the_post_thumbnail (), например,

add_image_size('article',  400, 300, /*crop=*/ true);
add_image_size('overview', 200, 150, /*crop=*/ true);

the_post_thumbnail('article');
0
19.02.2020, 23:03

В целом не код PHP не имеет никакого способа знать, какие размеры изображения Вы используете в CSS, поскольку PHP выполняется сначала на сервере, и только после этого CSS выполняется в браузере.

Только путь, который мог бы работать, состоит в том, если Вы указываете все размеры изображения в CSS, но не вручаете никакие изображения и только ссылку на их src через атрибут данных-xxxxxx. После загрузки страницы Вы выполняете некоторый JS, который для каждого изображения проверяет, что его CSS определил высоту и ширину и установил src img к URL, который динамично генерирует изображение в необходимых размерах.

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

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

0
19.02.2020, 23:03

Теги

Похожие вопросы