Merge pull request #566 from vojtechkral/imgproc
Implement suggestions in #546
|
@ -15,6 +15,7 @@ use std::hash::{Hash, Hasher};
|
||||||
use std::path::{Path, PathBuf};
|
use std::path::{Path, PathBuf};
|
||||||
|
|
||||||
use image::jpeg::JPEGEncoder;
|
use image::jpeg::JPEGEncoder;
|
||||||
|
use image::png::PNGEncoder;
|
||||||
use image::{FilterType, GenericImageView};
|
use image::{FilterType, GenericImageView};
|
||||||
use rayon::prelude::*;
|
use rayon::prelude::*;
|
||||||
use regex::Regex;
|
use regex::Regex;
|
||||||
|
@ -26,7 +27,7 @@ static RESIZED_SUBDIR: &'static str = "processed_images";
|
||||||
|
|
||||||
lazy_static! {
|
lazy_static! {
|
||||||
pub static ref RESIZED_FILENAME: Regex =
|
pub static ref RESIZED_FILENAME: Regex =
|
||||||
Regex::new(r#"([0-9a-f]{16})([0-9a-f]{2})[.]jpg"#).unwrap();
|
Regex::new(r#"([0-9a-f]{16})([0-9a-f]{2})[.](jpg|png)"#).unwrap();
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Describes the precise kind of a resize operation
|
/// Describes the precise kind of a resize operation
|
||||||
|
@ -136,12 +137,78 @@ impl Hash for ResizeOp {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Thumbnail image format
|
||||||
|
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
|
||||||
|
pub enum Format {
|
||||||
|
/// JPEG, The `u8` argument is JPEG quality (in percent).
|
||||||
|
Jpeg(u8),
|
||||||
|
/// PNG
|
||||||
|
Png,
|
||||||
|
}
|
||||||
|
|
||||||
|
impl Format {
|
||||||
|
pub fn from_args(source: &str, format: &str, quality: u8) -> Result<Format> {
|
||||||
|
use Format::*;
|
||||||
|
|
||||||
|
assert!(quality > 0 && quality <= 100, "Jpeg quality must be within the range [1; 100]");
|
||||||
|
|
||||||
|
match format {
|
||||||
|
"auto" => match Self::is_lossy(source) {
|
||||||
|
Some(true) => Ok(Jpeg(quality)),
|
||||||
|
Some(false) => Ok(Png),
|
||||||
|
None => Err(format!("Unsupported image file: {}", source).into()),
|
||||||
|
},
|
||||||
|
"jpeg" | "jpg" => Ok(Jpeg(quality)),
|
||||||
|
"png" => Ok(Png),
|
||||||
|
_ => Err(format!("Invalid image format: {}", format).into()),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Looks at file's extension and, if it's a supported image format, returns whether the format is lossless
|
||||||
|
pub fn is_lossy<P: AsRef<Path>>(p: P) -> Option<bool> {
|
||||||
|
p.as_ref()
|
||||||
|
.extension()
|
||||||
|
.and_then(|s| s.to_str())
|
||||||
|
.map(|ext| match ext.to_lowercase().as_str() {
|
||||||
|
"jpg" | "jpeg" => Some(true),
|
||||||
|
"png" => Some(false),
|
||||||
|
"gif" => Some(false),
|
||||||
|
"bmp" => Some(false),
|
||||||
|
_ => None,
|
||||||
|
})
|
||||||
|
.unwrap_or(None)
|
||||||
|
}
|
||||||
|
|
||||||
|
fn extension(&self) -> &str {
|
||||||
|
// Kept in sync with RESIZED_FILENAME and op_filename
|
||||||
|
use Format::*;
|
||||||
|
|
||||||
|
match *self {
|
||||||
|
Png => "png",
|
||||||
|
Jpeg(_) => "jpg",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
impl Hash for Format {
|
||||||
|
fn hash<H: Hasher>(&self, hasher: &mut H) {
|
||||||
|
use Format::*;
|
||||||
|
|
||||||
|
let q = match *self {
|
||||||
|
Png => 0,
|
||||||
|
Jpeg(q) => q,
|
||||||
|
};
|
||||||
|
|
||||||
|
hasher.write_u8(q);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/// Holds all data needed to perform a resize operation
|
/// Holds all data needed to perform a resize operation
|
||||||
#[derive(Debug, PartialEq, Eq)]
|
#[derive(Debug, PartialEq, Eq)]
|
||||||
pub struct ImageOp {
|
pub struct ImageOp {
|
||||||
source: String,
|
source: String,
|
||||||
op: ResizeOp,
|
op: ResizeOp,
|
||||||
quality: u8,
|
format: Format,
|
||||||
/// Hash of the above parameters
|
/// Hash of the above parameters
|
||||||
hash: u64,
|
hash: u64,
|
||||||
/// If there is a hash collision with another ImageOp, this contains a sequential ID > 1
|
/// If there is a hash collision with another ImageOp, this contains a sequential ID > 1
|
||||||
|
@ -152,14 +219,14 @@ pub struct ImageOp {
|
||||||
}
|
}
|
||||||
|
|
||||||
impl ImageOp {
|
impl ImageOp {
|
||||||
pub fn new(source: String, op: ResizeOp, quality: u8) -> ImageOp {
|
pub fn new(source: String, op: ResizeOp, format: Format) -> ImageOp {
|
||||||
let mut hasher = DefaultHasher::new();
|
let mut hasher = DefaultHasher::new();
|
||||||
hasher.write(source.as_ref());
|
hasher.write(source.as_ref());
|
||||||
op.hash(&mut hasher);
|
op.hash(&mut hasher);
|
||||||
hasher.write_u8(quality);
|
format.hash(&mut hasher);
|
||||||
let hash = hasher.finish();
|
let hash = hasher.finish();
|
||||||
|
|
||||||
ImageOp { source, op, quality, hash, collision_id: 0 }
|
ImageOp { source, op, format, hash, collision_id: 0 }
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn from_args(
|
pub fn from_args(
|
||||||
|
@ -167,10 +234,12 @@ impl ImageOp {
|
||||||
op: &str,
|
op: &str,
|
||||||
width: Option<u32>,
|
width: Option<u32>,
|
||||||
height: Option<u32>,
|
height: Option<u32>,
|
||||||
|
format: &str,
|
||||||
quality: u8,
|
quality: u8,
|
||||||
) -> Result<ImageOp> {
|
) -> Result<ImageOp> {
|
||||||
let op = ResizeOp::from_args(op, width, height)?;
|
let op = ResizeOp::from_args(op, width, height)?;
|
||||||
Ok(Self::new(source, op, quality))
|
let format = Format::from_args(&source, format, quality)?;
|
||||||
|
Ok(Self::new(source, op, format))
|
||||||
}
|
}
|
||||||
|
|
||||||
fn perform(&self, content_path: &Path, target_path: &Path) -> Result<()> {
|
fn perform(&self, content_path: &Path, target_path: &Path) -> Result<()> {
|
||||||
|
@ -184,7 +253,7 @@ impl ImageOp {
|
||||||
let mut img = image::open(&src_path)?;
|
let mut img = image::open(&src_path)?;
|
||||||
let (img_w, img_h) = img.dimensions();
|
let (img_w, img_h) = img.dimensions();
|
||||||
|
|
||||||
const RESIZE_FILTER: FilterType = FilterType::Gaussian;
|
const RESIZE_FILTER: FilterType = FilterType::Lanczos3;
|
||||||
const RATIO_EPSILLION: f32 = 0.1;
|
const RATIO_EPSILLION: f32 = 0.1;
|
||||||
|
|
||||||
let img = match self.op {
|
let img = match self.op {
|
||||||
|
@ -223,9 +292,19 @@ impl ImageOp {
|
||||||
};
|
};
|
||||||
|
|
||||||
let mut f = File::create(target_path)?;
|
let mut f = File::create(target_path)?;
|
||||||
let mut enc = JPEGEncoder::new_with_quality(&mut f, self.quality);
|
|
||||||
let (img_w, img_h) = img.dimensions();
|
let (img_w, img_h) = img.dimensions();
|
||||||
|
|
||||||
|
match self.format {
|
||||||
|
Format::Png => {
|
||||||
|
let mut enc = PNGEncoder::new(&mut f);
|
||||||
enc.encode(&img.raw_pixels(), img_w, img_h, img.color())?;
|
enc.encode(&img.raw_pixels(), img_w, img_h, img.color())?;
|
||||||
|
},
|
||||||
|
Format::Jpeg(q) => {
|
||||||
|
let mut enc = JPEGEncoder::new_with_quality(&mut f, q);
|
||||||
|
enc.encode(&img.raw_pixels(), img_w, img_h, img.color())?;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
Ok(())
|
Ok(())
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -323,20 +402,21 @@ impl Processor {
|
||||||
collision_id
|
collision_id
|
||||||
}
|
}
|
||||||
|
|
||||||
fn op_filename(hash: u64, collision_id: u32) -> String {
|
fn op_filename(hash: u64, collision_id: u32, format: Format) -> String {
|
||||||
// Please keep this in sync with RESIZED_FILENAME
|
// Please keep this in sync with RESIZED_FILENAME
|
||||||
assert!(collision_id < 256, "Unexpectedly large number of collisions: {}", collision_id);
|
assert!(collision_id < 256, "Unexpectedly large number of collisions: {}", collision_id);
|
||||||
format!("{:016x}{:02x}.jpg", hash, collision_id)
|
format!("{:016x}{:02x}.{}", hash, collision_id, format.extension())
|
||||||
}
|
}
|
||||||
|
|
||||||
fn op_url(&self, hash: u64, collision_id: u32) -> String {
|
fn op_url(&self, hash: u64, collision_id: u32, format: Format) -> String {
|
||||||
format!("{}/{}", &self.resized_url, Self::op_filename(hash, collision_id))
|
format!("{}/{}", &self.resized_url, Self::op_filename(hash, collision_id, format))
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn insert(&mut self, img_op: ImageOp) -> String {
|
pub fn insert(&mut self, img_op: ImageOp) -> String {
|
||||||
let hash = img_op.hash;
|
let hash = img_op.hash;
|
||||||
|
let format = img_op.format;
|
||||||
let collision_id = self.insert_with_collisions(img_op);
|
let collision_id = self.insert_with_collisions(img_op);
|
||||||
self.op_url(hash, collision_id)
|
self.op_url(hash, collision_id, format)
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn prune(&self) -> Result<()> {
|
pub fn prune(&self) -> Result<()> {
|
||||||
|
@ -373,25 +453,10 @@ impl Processor {
|
||||||
self.img_ops
|
self.img_ops
|
||||||
.par_iter()
|
.par_iter()
|
||||||
.map(|(hash, op)| {
|
.map(|(hash, op)| {
|
||||||
let target = self.resized_path.join(Self::op_filename(*hash, op.collision_id));
|
let target = self.resized_path.join(Self::op_filename(*hash, op.collision_id, op.format));
|
||||||
op.perform(&self.content_path, &target)
|
op.perform(&self.content_path, &target)
|
||||||
.chain_err(|| format!("Failed to process image: {}", op.source))
|
.chain_err(|| format!("Failed to process image: {}", op.source))
|
||||||
})
|
})
|
||||||
.collect::<Result<()>>()
|
.collect::<Result<()>>()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Looks at file's extension and returns whether it's a supported image format
|
|
||||||
pub fn file_is_img<P: AsRef<Path>>(p: P) -> bool {
|
|
||||||
p.as_ref()
|
|
||||||
.extension()
|
|
||||||
.and_then(|s| s.to_str())
|
|
||||||
.map(|ext| match ext.to_lowercase().as_str() {
|
|
||||||
"jpg" | "jpeg" => true,
|
|
||||||
"png" => true,
|
|
||||||
"gif" => true,
|
|
||||||
"bmp" => true,
|
|
||||||
_ => false,
|
|
||||||
})
|
|
||||||
.unwrap_or(false)
|
|
||||||
}
|
|
||||||
|
|
|
@ -196,6 +196,7 @@ pub fn make_get_taxonomy_url(all_taxonomies: &[Taxonomy]) -> GlobalFn {
|
||||||
|
|
||||||
pub fn make_resize_image(imageproc: Arc<Mutex<imageproc::Processor>>) -> GlobalFn {
|
pub fn make_resize_image(imageproc: Arc<Mutex<imageproc::Processor>>) -> GlobalFn {
|
||||||
static DEFAULT_OP: &'static str = "fill";
|
static DEFAULT_OP: &'static str = "fill";
|
||||||
|
static DEFAULT_FMT: &'static str = "auto";
|
||||||
const DEFAULT_Q: u8 = 75;
|
const DEFAULT_Q: u8 = 75;
|
||||||
|
|
||||||
Box::new(move |args| -> Result<Value> {
|
Box::new(move |args| -> Result<Value> {
|
||||||
|
@ -216,6 +217,10 @@ pub fn make_resize_image(imageproc: Arc<Mutex<imageproc::Processor>>) -> GlobalF
|
||||||
);
|
);
|
||||||
let op = optional_arg!(String, args.get("op"), "`resize_image`: `op` must be a string")
|
let op = optional_arg!(String, args.get("op"), "`resize_image`: `op` must be a string")
|
||||||
.unwrap_or_else(|| DEFAULT_OP.to_string());
|
.unwrap_or_else(|| DEFAULT_OP.to_string());
|
||||||
|
|
||||||
|
let format = optional_arg!(String, args.get("format"), "`resize_image`: `format` must be a string")
|
||||||
|
.unwrap_or_else(|| DEFAULT_FMT.to_string());
|
||||||
|
|
||||||
let quality =
|
let quality =
|
||||||
optional_arg!(u8, args.get("quality"), "`resize_image`: `quality` must be a number")
|
optional_arg!(u8, args.get("quality"), "`resize_image`: `quality` must be a number")
|
||||||
.unwrap_or(DEFAULT_Q);
|
.unwrap_or(DEFAULT_Q);
|
||||||
|
@ -228,7 +233,7 @@ pub fn make_resize_image(imageproc: Arc<Mutex<imageproc::Processor>>) -> GlobalF
|
||||||
return Err(format!("`resize_image`: Cannot find path: {}", path).into());
|
return Err(format!("`resize_image`: Cannot find path: {}", path).into());
|
||||||
}
|
}
|
||||||
|
|
||||||
let imageop = imageproc::ImageOp::from_args(path, &op, width, height, quality)
|
let imageop = imageproc::ImageOp::from_args(path, &op, width, height, &format, quality)
|
||||||
.map_err(|e| format!("`resize_image`: {}", e))?;
|
.map_err(|e| format!("`resize_image`: {}", e))?;
|
||||||
let url = imageproc.insert(imageop);
|
let url = imageproc.insert(imageop);
|
||||||
|
|
||||||
|
|
After Width: | Height: | Size: 120 KiB |
After Width: | Height: | Size: 324 KiB |
After Width: | Height: | Size: 357 KiB |
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
Before Width: | Height: | Size: 192 KiB After Width: | Height: | Size: 192 KiB |
Before Width: | Height: | Size: 204 KiB After Width: | Height: | Size: 204 KiB |
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
Before Width: | Height: | Size: 250 KiB After Width: | Height: | Size: 250 KiB |
|
@ -16,10 +16,22 @@ resize_image(path, width, height, op, quality)
|
||||||
|
|
||||||
- `path`: The path to the source image relative to the `content` directory in the [directory structure](./documentation/getting-started/directory-structure.md).
|
- `path`: The path to the source image relative to the `content` directory in the [directory structure](./documentation/getting-started/directory-structure.md).
|
||||||
- `width` and `height`: The dimensions in pixels of the resized image. Usage depends on the `op` argument.
|
- `width` and `height`: The dimensions in pixels of the resized image. Usage depends on the `op` argument.
|
||||||
- `op`: Resize operation. This can be one of five choices: `"scale"`, `"fit_width"`, `"fit_height"`, `"fit"`, or `"fill"`.
|
- `op` (_optional_): Resize operation. This can be one of:
|
||||||
What each of these does is explained below.
|
- `"scale"`
|
||||||
This argument is optional, default value is `"fill"`.
|
- `"fit_width"`
|
||||||
- `quality`: JPEG quality of the resized image, in percents. Optional argument, default value is `75`.
|
- `"fit_height"`
|
||||||
|
- `"fit"`
|
||||||
|
- `"fill"`
|
||||||
|
|
||||||
|
What each of these does is explained below. The default is `"fill"`.
|
||||||
|
- `format` (_optional_): Encoding format of the resized image. May be one of:
|
||||||
|
- `"auto"`
|
||||||
|
- `"jpg"`
|
||||||
|
- `"png"`
|
||||||
|
|
||||||
|
The default is `"auto"`, this means the format is chosen based on input image format.
|
||||||
|
JPEG is chosen for JPEGs and other lossy formats, while PNG is chosen for PNGs and other lossless formats.
|
||||||
|
- `quality` (_optional_): JPEG quality of the resized image, in percents. Only used when encoding JPEGs, default value is `75`.
|
||||||
|
|
||||||
### Image processing and return value
|
### Image processing and return value
|
||||||
|
|
||||||
|
@ -29,7 +41,7 @@ Zola performs image processing during the build process and places the resized i
|
||||||
static/processed_images/
|
static/processed_images/
|
||||||
```
|
```
|
||||||
|
|
||||||
Resized images are JPEGs. Filename of each resized image is a hash of the function arguments,
|
Filename of each resized image is a hash of the function arguments,
|
||||||
which means that once an image is resized in a certain way, it will be stored in the above directory and will not
|
which means that once an image is resized in a certain way, it will be stored in the above directory and will not
|
||||||
need to be resized again during subsequent builds (unless the image itself, the dimensions, or other arguments are changed).
|
need to be resized again during subsequent builds (unless the image itself, the dimensions, or other arguments are changed).
|
||||||
Therefore, if you have a large number of images, they will only need to be resized once.
|
Therefore, if you have a large number of images, they will only need to be resized once.
|
||||||
|
@ -40,14 +52,14 @@ The function returns a full URL to the resized image.
|
||||||
|
|
||||||
The source for all examples is this 300 × 380 pixels image:
|
The source for all examples is this 300 × 380 pixels image:
|
||||||
|
|
||||||
![gutenberg](gutenberg.jpg)
|
![zola](01-zola.png)
|
||||||
|
|
||||||
### **`"scale"`**
|
### **`"scale"`**
|
||||||
Simply scales the image to the specified dimensions (`width` & `height`) irrespective of the aspect ratio.
|
Simply scales the image to the specified dimensions (`width` & `height`) irrespective of the aspect ratio.
|
||||||
|
|
||||||
`resize_image(..., width=150, height=150, op="scale")`
|
`resize_image(..., width=150, height=150, op="scale")`
|
||||||
|
|
||||||
{{ resize_image(path="documentation/content/image-processing/gutenberg.jpg", width=150, height=150, op="scale") }}
|
{{ resize_image(path="documentation/content/image-processing/01-zola.png", width=150, height=150, op="scale") }}
|
||||||
|
|
||||||
### **`"fit_width"`**
|
### **`"fit_width"`**
|
||||||
Resizes the image such that the resulting width is `width` and height is whatever will preserve the aspect ratio.
|
Resizes the image such that the resulting width is `width` and height is whatever will preserve the aspect ratio.
|
||||||
|
@ -55,7 +67,7 @@ The source for all examples is this 300 × 380 pixels image:
|
||||||
|
|
||||||
`resize_image(..., width=100, op="fit_width")`
|
`resize_image(..., width=100, op="fit_width")`
|
||||||
|
|
||||||
{{ resize_image(path="documentation/content/image-processing/gutenberg.jpg", width=100, height=0, op="fit_width") }}
|
{{ resize_image(path="documentation/content/image-processing/01-zola.png", width=100, height=0, op="fit_width") }}
|
||||||
|
|
||||||
### **`"fit_height"`**
|
### **`"fit_height"`**
|
||||||
Resizes the image such that the resulting height is `height` and width is whatever will preserve the aspect ratio.
|
Resizes the image such that the resulting height is `height` and width is whatever will preserve the aspect ratio.
|
||||||
|
@ -63,7 +75,7 @@ The source for all examples is this 300 × 380 pixels image:
|
||||||
|
|
||||||
`resize_image(..., height=150, op="fit_height")`
|
`resize_image(..., height=150, op="fit_height")`
|
||||||
|
|
||||||
{{ resize_image(path="documentation/content/image-processing/gutenberg.jpg", width=0, height=150, op="fit_height") }}
|
{{ resize_image(path="documentation/content/image-processing/01-zola.png", width=0, height=150, op="fit_height") }}
|
||||||
|
|
||||||
### **`"fit"`**
|
### **`"fit"`**
|
||||||
Like `"fit_width"` and `"fit_height"` combined.
|
Like `"fit_width"` and `"fit_height"` combined.
|
||||||
|
@ -72,7 +84,7 @@ The source for all examples is this 300 × 380 pixels image:
|
||||||
|
|
||||||
`resize_image(..., width=150, height=150, op="fit")`
|
`resize_image(..., width=150, height=150, op="fit")`
|
||||||
|
|
||||||
{{ resize_image(path="documentation/content/image-processing/gutenberg.jpg", width=150, height=150, op="fit") }}
|
{{ resize_image(path="documentation/content/image-processing/01-zola.png", width=150, height=150, op="fit") }}
|
||||||
|
|
||||||
### **`"fill"`**
|
### **`"fill"`**
|
||||||
This is the default operation. It takes the image's center part with the same aspect ratio as the `width` & `height` given and resizes that
|
This is the default operation. It takes the image's center part with the same aspect ratio as the `width` & `height` given and resizes that
|
||||||
|
@ -80,7 +92,7 @@ The source for all examples is this 300 × 380 pixels image:
|
||||||
|
|
||||||
`resize_image(..., width=150, height=150, op="fill")`
|
`resize_image(..., width=150, height=150, op="fill")`
|
||||||
|
|
||||||
{{ resize_image(path="documentation/content/image-processing/gutenberg.jpg", width=150, height=150, op="fill") }}
|
{{ resize_image(path="documentation/content/image-processing/01-zola.png", width=150, height=150, op="fill") }}
|
||||||
|
|
||||||
|
|
||||||
## Using `resize_image` in markdown via shortcodes
|
## Using `resize_image` in markdown via shortcodes
|
||||||
|
@ -96,11 +108,11 @@ The examples above were generated using a shortcode file named `resize_image.htm
|
||||||
|
|
||||||
## Creating picture galleries
|
## Creating picture galleries
|
||||||
|
|
||||||
The `resize_image()` can be used multiple times and/or in loops as it is designed to handle this efficiently.
|
The `resize_image()` can be used multiple times and/or in loops. It is designed to handle this efficiently.
|
||||||
|
|
||||||
This can be used along with `assets` [page metadata](./documentation/templates/pages-sections.md) to create picture galleries.
|
This can be used along with `assets` [page metadata](./documentation/templates/pages-sections.md) to create picture galleries.
|
||||||
The `assets` variable holds paths to all assets in the directory of a page with resources
|
The `assets` variable holds paths to all assets in the directory of a page with resources
|
||||||
(see [Assets colocation](./documentation/content/overview.md#assets-colocation)): if you have files other than images you
|
(see [assets colocation](./documentation/content/overview.md#assets-colocation)): if you have files other than images you
|
||||||
will need to filter them out in the loop first like in the example below.
|
will need to filter them out in the loop first like in the example below.
|
||||||
|
|
||||||
This can be used in shortcodes. For example, we can create a very simple html-only clickable
|
This can be used in shortcodes. For example, we can create a very simple html-only clickable
|
||||||
|
@ -108,7 +120,7 @@ picture gallery with the following shortcode named `gallery.html`:
|
||||||
|
|
||||||
```jinja2
|
```jinja2
|
||||||
{% for asset in page.assets %}
|
{% for asset in page.assets %}
|
||||||
{% if asset is ending_with(".jpg") %}
|
{% if asset is matching("[.](jpg|png)$") %}
|
||||||
<a href="{{ get_url(path=asset) }}">
|
<a href="{{ get_url(path=asset) }}">
|
||||||
<img src="{{ resize_image(path=asset, width=240, height=180, op="fill") }}" />
|
<img src="{{ resize_image(path=asset, width=240, height=180, op="fill") }}" />
|
||||||
</a>
|
</a>
|
||||||
|
@ -117,7 +129,8 @@ picture gallery with the following shortcode named `gallery.html`:
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
```
|
```
|
||||||
|
|
||||||
As you can notice, we didn't specify an `op` argument, which means it'll default to `"fill"`. Similarly, the JPEG quality will default to `75`.
|
As you can notice, we didn't specify an `op` argument, which means it'll default to `"fill"`. Similarly, the format will default to
|
||||||
|
`"auto"` (choosing PNG or JPEG as appropriate) and the JPEG quality will default to `75`.
|
||||||
|
|
||||||
To call it from a markdown file, simply do:
|
To call it from a markdown file, simply do:
|
||||||
|
|
||||||
|
@ -130,5 +143,5 @@ Here is the result:
|
||||||
{{ gallery() }}
|
{{ gallery() }}
|
||||||
|
|
||||||
<small>
|
<small>
|
||||||
Image attribution: example-01: Willi Heidelbach, example-02: Daniel Ullrich, others: public domain.
|
Image attribution: Public domain, except: _06-example.jpg_: Willi Heidelbach, _07-example.jpg_: Daniel Ullrich.
|
||||||
</small>
|
</small>
|
||||||
|
|
Before Width: | Height: | Size: 4.5 KiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 55 KiB |
Before Width: | Height: | Size: 5.4 KiB |
Before Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 29 KiB |
Before Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 95 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 5.1 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 30 KiB |
Before Width: | Height: | Size: 4.4 KiB |
After Width: | Height: | Size: 29 KiB |
Before Width: | Height: | Size: 9.6 KiB |
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 29 KiB |
After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 5.5 KiB |
After Width: | Height: | Size: 106 KiB |
Before Width: | Height: | Size: 15 KiB |
|
@ -1,7 +1,7 @@
|
||||||
{% for asset in page.assets -%}
|
{% for asset in page.assets -%}
|
||||||
{%- if asset is ending_with(".jpg") -%}
|
{%- if asset is matching("[.](jpg|png)$") -%}
|
||||||
<a href="{{ get_url(path=asset) | safe }}">
|
<a href="{{ get_url(path=asset) | safe }}" target="_blank">
|
||||||
<img src="{{ resize_image(path=asset, width=240, height=180, op="fill") | safe }}" />
|
<img src="{{ resize_image(path=asset, width=240, height=180, op="fill", format="auto") | safe }}" />
|
||||||
</a>
|
</a>
|
||||||
 
|
 
|
||||||
{%- endif %}
|
{%- endif %}
|
||||||
|
|