README

安装

将需求添加到 composer.json

    "require": {
		"tomkirsch/bootstrap":"^3"
	}

更新您的项目：composer install --no-dev --optimize-autoloader

创建配置文件 Config\Bootstrap.php 并设置您的偏好。您必须扩展 Tomkirsch/Bootstrap/BootstrapConfig

<?php namespace Config;

use Tomkirsch\Bootstrap\BootstrapConfig;

class Bootstrap extends BootstrapConfig{
	/**
	 * Bootstrap version. used to get the correct container/breakpoint
	 */
	public string $bsVersion = '5';

	/**
	 * Use newlines in HTML output
	 */
	public bool $prettyPrint = FALSE;

	/**
	 * DynamicImage - You can use a custom function to generate the public-facing dynamic image filename.
	 */
	public function dynamicImageFileName(string $src, string $ext, int $width): ?string
	{
		$file = $src . '.' . $ext;
		$params = ['f' => $file, 'w' => $width];
		return base_url('resize?' . http_build_query($params));
	}

	/**
	 * DynamicImage - Col gutter width in pixels
	 */
	public int $defaultGutterWidth = 12;

	/**
	 * DynamicImage - number of columns in the grid
	 */
	public int $gridCols = 12;

	/**
	 * DynamicImage - Default element to use, 'img' or 'picture'
	 */
	public string $defaultElement = 'picture';

	/**
	 * DynamicImage - Default use data-src and data-srcset instead of src and srcset
	 */
	public bool $defaultIsLazy = FALSE;

	/**
	 * DynamicImage - Default size for hires. Use "source" for the source image's width, or a pixel value to restrict viewing
	 * @var string|int
	 */
	public $defaultHiresWidth = 'source';

	/**
	 * DynamicImage - Use a pixel value to restrict image height
	 * @var string|int
	 */
	public $defaultHiresHeight = 'source';

	/**
	 * DynamicImage - default LQIP (low quality image placeholder)
	 */
	public string $defaultLqip = 'xs';

	/**
	 * DynamicImage - use padding hack by default
	 */
	public bool $defaultUseRatio = FALSE;

	/**
	 * DynamicImage - maximum supported resolution factor (2x, 3x, etc)
	 */
	public float $defaultMaxResolution = 2;

	/**
	 * DynamicImage - default resolution step to get from 1 to $maxResolutionFactor.
	 * A lower number will create more sources
	 */
	public float $defaultResolutionStep = 0.5;
}

dynamicImageFileName() 函数应该生成一个指向提供动态图片的控制器URL/路径。

要在较新版本的bootstrap中使用容器，只需将它们添加到 containers 和 breakpoints 数组中，然后设置 $bsVersion 为数组键。有关更多信息，请参阅 Tomkirsch\Bootstrap\BootstrapConfig。

在 Config\Services.php 中创建服务

use Tomkirsch\Bootstrap\Bootstrap;
class Services extends BaseService
{
	public static function bootstrap($config = null, bool $getShared = TRUE): Bootstrap
    {
        $config = $config ?? new Config\Bootstrap();
        return $getShared ? static::getSharedInstance('bootstrap', $config) : new Bootstrap($config);
    }
}

创建您的图像缩放控制器。这里的指令必须与配置类中 dynamicImageFileName() 输出的相匹配。以下是一个快速示例

class Resize extends BaseController{
	public function index(){
		$file = $this->request->getGet('f');
		$width = $this->request->getGet('w');
		$resource = service('image')
			->withFile($file)
			->resize($width, $width, TRUE, 'width')
			->getResource()
		;
		ob_end_flush();
		header('Content-Type: image/jpeg');
		imagejpeg($resource, NULL, 75);
		imagedestroy($resource);
		exit;
	}
}

如果您想使用填充比例元素或懒加载过渡，请在您的CSS中定义它们。确保相对路径能带您到根文件夹。

@import "../vendor/tomkirsch/bootstrap/src/styles";

包含 lazysizes JS <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js" crossorigin="anonymous"></script>

用法

静态图像（无bootstrap列）

<?= \Config\Services::bootstrap()->staticImage()->renderSources([
	"prettyPrint" => TRUE,
	"imgAttr" => ["class" => "img-fluid"], // optional - creates the <img>
	"widths" => [2080, 1040, 520, 260],
	"file" => function ($width, $resolution) {
		return "kitten-$width.jpg";
	},
]) ?>

完整示例（更多信息请参阅 tests/views/welcome_message.php）

<?= \Config\Services::bootstrap()->dynamicImage([
	"file" => "foo.jpg", // source image. will be rewritten as foo-xxx.jpg, based on your config
	"size" => [2000, 1333], // always enter your src image size to prevent getimagesize() lag
	"query" => ["q" => rand()], // prevent caching
	"colClasses" => "col-md-4 py-2 dyn_fadebox", // use fadebox class
	"colWrapper" => TRUE, // create the wrapper div above
	"ratio"	=> 16/9, // container will be a 16:9 rectangle. use TRUE for the original image ratio, or 1 for a square
	"ratioCrop" => TRUE,  // crop & center the pic
	"lazy" => TRUE, // lazyload
	"lqipSeparate" => TRUE, // use a separate image for low quality placeholder
	"lqip" => "xs", // use the image at the xs container width
	"loop"=>TRUE, // set this when looping to optimize col calculations
]) ?>