diff --git a/README.md b/README.md
index e84024a..4ec0dac 100644
--- a/README.md
+++ b/README.md
@@ -95,7 +95,7 @@ Let's say you have defined the transformation described above. To get your
image processed, it needs to have the right CSS class:
```html
-
+
```
This can be produced in Markdown with:
@@ -123,7 +123,6 @@ the `figure` directive:
> dashes (`-`) in class names. To make sure everything runs
> smoothly, do not use underscores in your transformation names.
-
#### Responsive Images
You can use *Image Process* to automatically generate a set of
@@ -180,7 +179,7 @@ image from the original image (the original image is the value of the
`src` attribute of the `
`). Image descriptions are hints
about the resolution of the associated image and must have the suffix
`x`. The `default` setting specifies the image to use to replace the `src`
-attribute of the image. This is the image that will be displayed by
+attribute of the image. This is the image that will be displayed by
browsers that do not support the `srcset` syntax.
The `large-photo` transformation is an example of a transformation
@@ -194,7 +193,7 @@ the original image (the original image is the value of the `src`
attribute of the `
`). Image descriptions are hints about the
width in pixels of the associated image and must have the suffix
`w`. The `default` setting specifies the image to use to replace the `src`
-attribute of the image. This is the image that will be displayed by
+attribute of the image. This is the image that will be displayed by
browsers that do not support the `srcset` syntax.
In the two examples above, the `default` setting is a string referring to
@@ -210,7 +209,7 @@ image replacement case, described above.
So, in HTML it should look like this:
```html
-
+
```
Which can be produced in Markdown with:
@@ -278,7 +277,7 @@ will be used to find the URL of the original image for this source in
your article. The source may also have a `media`, which contains a
rule used by the browser to select the active source. The `default`
setting specifies the image to use to replace the `src` attribute of
-the `
` inside the ``. This is the image that will be
+the `
` inside the ``. This is the image that will be
displayed by browsers that do not support the `` syntax. In
this example, it will use the image `640w` from the source `default`.
A list of operations could have been specified instead of `640w`.
@@ -481,7 +480,7 @@ IMAGE_PROCESS_ENCODING = "utf-8"
#### Copying EXIF Tags
-You may ask _Image Process_ to copy the EXIF tags from your original image to
+You may ask *Image Process* to copy the EXIF tags from your original image to
the transformed images. You must have [exiftool](https://exiftool.org/) installed.
```python
@@ -491,6 +490,30 @@ IMAGE_PROCESS_COPY_EXIF_TAGS = True
Note that `exiftool` prior to version 12.46 cannot write WebP images, so if you work
with WebP images, you should use version 12.46 or later.
+#### Modifying the `class` Attribute of Processed Images
+
+By default, *Image Process* adds the `image-process-`
+CSS class to transformed images. This behavior is controlled by the
+`IMAGE_PROCESS_ADD_CLASS` setting (default: `True`) and the
+`IMAGE_PROCESS_CLASS_PREFIX` setting (default: `"image-process-"`).
+
+* If `IMAGE_PROCESS_ADD_CLASS` is `True`, the `` name is added
+ to the `class` attribute of the image.
+ You can customize the class prefix using `IMAGE_PROCESS_CLASS_PREFIX`.
+
+* If `IMAGE_PROCESS_ADD_CLASS` is `False`, no class attribute will be added.
+
+This setting allows you to control whether transformation details appear
+in the HTML output or to avoid conflicts with custom styles.
+
+```python
+# Use a custom class prefix instead of "image-process-"
+IMAGE_PROCESS_CLASS_PREFIX = "custom-prefix-"
+
+# Disable adding transformation class attributes
+IMAGE_PROCESS_ADD_CLASS = False
+```
+
## Known Issues
* Pillow, when resizing animated GIF files, [does not return an animated file](https://github.com/pelican-plugins/image-process/issues/11).
@@ -521,6 +544,5 @@ This project is licensed under the [AGPL-3.0 license](http://www.gnu.org/license
[Pelican image](https://web.archive.org/web/20090505115626/http://www.pdphoto.org/PictureDetail.php?mat=&pg=5726) in test data by Jon Sullivan. Published under a [Creative Commons Public Domain license](https://creativecommons.org/licenses/publicdomain/).
-
[HTML5 responsive images]: https://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/
[BeautifulSoup documentation on parsers]: https://www.crummy.com/software/BeautifulSoup/bs4/doc/#installing-a-parser
diff --git a/pelican/plugins/image_process/image_process.py b/pelican/plugins/image_process/image_process.py
index 6d58a41..58b8fa3 100644
--- a/pelican/plugins/image_process/image_process.py
+++ b/pelican/plugins/image_process/image_process.py
@@ -313,6 +313,21 @@ def harvest_images_in_fragment(fragment, settings):
for c in img["class"]:
if c.startswith("image-process-"):
derivative = c[14:]
+
+ # Determine whether to modify the class attribute.
+ add_class = settings.get("IMAGE_PROCESS_ADD_CLASS", True)
+ if not add_class:
+ # Remove class if it's the only one, otherwise remove specific entry
+ img["class"].remove(c)
+ if len(img["class"]) == 0:
+ del img["class"]
+ else:
+ class_prefix = settings.get(
+ "IMAGE_PROCESS_CLASS_PREFIX", "image-process-"
+ )
+ if class_prefix != "image-process-":
+ img["class"].remove(c)
+ img["class"].append(f"{class_prefix}{derivative}")
break
else:
continue
diff --git a/pelican/plugins/image_process/test_image_process.py b/pelican/plugins/image_process/test_image_process.py
index c59aae5..4a5b108 100644
--- a/pelican/plugins/image_process/test_image_process.py
+++ b/pelican/plugins/image_process/test_image_process.py
@@ -634,6 +634,60 @@ def test_try_open_image():
assert not try_open_image(path.source)
+@pytest.mark.parametrize(
+ "orig_tag, new_tag, setting_overrides",
+ [
+ (
+ '
',
+ '
',
+ [ # Default settings.
+ {},
+ {"IMAGE_PROCESS_ADD_CLASS": True},
+ {"IMAGE_PROCESS_CLASS_PREFIX": "image-process-"},
+ {
+ "IMAGE_PROCESS_ADD_CLASS": True,
+ "IMAGE_PROCESS_CLASS_PREFIX": "image-process-",
+ },
+ ],
+ ),
+ (
+ '
',
+ '
',
+ [ # Custom class prefix.
+ {"IMAGE_PROCESS_CLASS_PREFIX": "custom-prefix-"},
+ {
+ "IMAGE_PROCESS_ADD_CLASS": True,
+ "IMAGE_PROCESS_CLASS_PREFIX": "custom-prefix-",
+ },
+ ],
+ ),
+ (
+ '
',
+ '
',
+ [ # Special case: empty string as class prefix.
+ {"IMAGE_PROCESS_CLASS_PREFIX": ""},
+ ],
+ ),
+ (
+ '
',
+ '
',
+ [ # No class added.
+ {"IMAGE_PROCESS_ADD_CLASS": False},
+ {"IMAGE_PROCESS_ADD_CLASS": False, "IMAGE_PROCESS_CLASS_PREFIX": ""},
+ ],
+ ),
+ ],
+)
+def test_class_settings(mocker, orig_tag, new_tag, setting_overrides):
+ """Test the IMAGE_PROCESS_ADD_CLASS and IMAGE_PROCESS_CLASS_PREFIX settings."""
+ # Silence image transforms.
+ mocker.patch("pelican.plugins.image_process.image_process.process_image")
+
+ for override in setting_overrides:
+ settings = get_settings(**override)
+ assert harvest_images_in_fragment(orig_tag, settings) == new_tag
+
+
def generate_test_images():
settings = get_settings()
image_count = 0