Add ability to style images via the URL (fix #22)

content/demo/index.md

@@ -170,13 +170,21 @@ Variables should be comma-separated and be inside the brackets.
 ```
 
 {{ image(url="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg", alt="Portal Gun blueprint", no_hover=true) }}
-
 <figcaption>Image with an alt text and without zoom on hover</figcaption>
 
 {{ image(url="https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg", url_min="https://upload.wikimedia.org/wikipedia/commons/3/38/JPEG_example_JPG_RIP_010.jpg", alt="The gravestone of J.P.G.", no_hover=true) }}
-
 <figcaption>Image with compressed version, an alt text, and without zoom on hover</figcaption>
 
+Alternatively, you can append the following url anchors. It can be more handy in some cases, e.g such images will render normally in any Markdown editor, opposed to the Zola shortcodes.
+
+- `#full`: Forces image/video to be full-width.
+- `#pixels`: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
+- `#transparent`: Removes rounded corners and shadow, useful for transparent images.
+- `#no-hover`: Removes zoom on hover.
+
+![Toolbx header image](https://containertoolbx.org/assets/toolbx.gif#full#pixels#transparent#no-hover)
+<figcaption>Full-width image with an alt text, pixel-art rendering, no shadow and rounded corners, and no zoom on hover</figcaption>
+
 #### Video
 
 Same as images, but with a few differences: `no_hover` and `url_min` are not available.
@@ -186,7 +194,6 @@ Same as images, but with a few differences: `no_hover` and `url_min` are not ava
 ```
 
 {{ video(url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", alt="Red flower wakes up") }}
-
 <figcaption>WebM video example from MDN</figcaption>
 
 #### CRT
@@ -228,16 +235,14 @@ Alright, this one doesn't simplify anything, it just adds a CRT-like effect arou
 
 ## Captions
 
-Media can have additional text description using the `<figcaption>` HTML tag.
+Media can have additional text description using the `<figcaption>` HTML tag directly under it.
 
 ```markdown
-![Image](image.pmg)
-
+![The Office](https://i.ibb.co/MPDJRsT/ImMAXM3.png)
 <figcaption>The image caption</figcaption>
 ```
 
 ![The Office](https://i.ibb.co/MPDJRsT/ImMAXM3.png)
-
 <figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption>
 
 ## Accordion

sass/_main.scss

@@ -254,7 +254,6 @@ mark {
 }
 
 figcaption {
-	display: block;
 	color: var(--fg-muted-4);
 	font-size: 0.8rem;
 	text-align: center;

sass/_media.scss

@@ -2,11 +2,11 @@ img {
 	transition-duration: var(--transition-longer);
 	transition-property: transform, box-shadow, border-radius;
 
-	&:not(.no-hover) {
+	&:not(.no-hover, &[src*="#no-hover"]) {
 		cursor: zoom-in;
 	}
 
-	&:not(.no-hover):hover {
+	&:not(.no-hover, &[src*="#no-hover"]):hover {
 		transform: scale(1.1);
 		box-shadow: var(--shadow-raised);
 		border-radius: 0;
@@ -21,15 +21,18 @@ video {
 	border-radius: var(--rounded-corner);
 	max-width: 100%;
 
-	&.full {
+	&.full,
+	&[src*="#full"] {
 		width: 100%;
 	}
 
-	&.pixels {
+	&.pixels,
+	&[src*="#pixels"] {
 		image-rendering: pixelated;
 	}
 
-	&.transparent {
+	&.transparent,
+	&[src*="#transparent"] {
 		box-shadow: none;
 		border-radius: 0;