Fix Panel alignment and add README.md

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright © 2024 Brandsistency
+Copyright © 2025 Brandsistency
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -0,0 +1,78 @@
+# Kirby custom image block
+
+This plugin provides additional attributes to the standard Kirby image block, including alignment, dimensions, margins, etc.
+
+## Installation
+
+Download, extract and copy this repository to `/site/plugins/custom-image-block`.
+
+## Usage
+
+Once you've installed the plugin, simply add `- customimage` to your `fieldsets` option in the relevant blueprints in place of the stadnard image block. For example...
+
+```
+  fieldname:
+    type: blocks
+    fieldsets:
+      - text
+      - customimage
+      - gallery
+      - markdown
+```
+
+You can also make the custom image block universally available by adding it to a default list of blocks via your `/site/config/config.php` file...
+
+```
+  <?php
+
+  return [
+    'blocks' => [
+      'fieldsets' => [
+        'text',
+        'customimage',
+        'gallery',
+        'markdown',
+      ]
+    ]
+  ];
+```
+
+When you add a button block in the Panel, the fields for completion will be displayed on the right-hand side of the screen...
+
+* **Location and image:** as standard, a choice between a Kirby file or web URL.
+* **Alternative text:** alt text for the image.
+* **Use as title:** a toggle allowing you to use the alt text as a title attribute as well.
+* **Caption:** Image caption text to appear immediately below the image.
+* **Link:** using the default Kirby link field, specify a target location &ndash; an external URL, an internal page, etc.
+* **Open in new window:** add a `target="_blank"` attribute.
+* **Alignment:** choose to centre or right-align your button.
+* **Ratio and Crop:** standard Kirby image block tools.
+* **Lazy loading:** add a `loading="lazy"` attribute for images below the 'fold'.
+* **Width, Height, Max-width and Max-height:** set specific image dimensions, if required.
+* **Top, Bottom, Left and Right margin:** set specific margin spacing, if required.
+
+In the Panel preview, the alignment marks add `img-c` (centre) or `img-r` (right) classes to the `img` element. These classes are already included in the plugin's CSS file at `/site/plugins/custom-image-block/index.css`. The marks act as toggles, so clicking again will remove the class. If you want to change the names of the custom classes, edit the stylesheet, as above, and the relevant code in `index.js`.
+
+For the front-end, the custom snippet (`/site/plugins/custom-image-block/snippets/blocks/customimage.php`) the Tailwind classes `text-center` or `text-right` are added to the `figure` parent. To style the classes in the front-end, simply ensure that `text-center` or `text-right` are included in your main CSS file...
+
+```
+    .text-center { text-align: center; }
+    .text-right { text-align: right; }
+
+```
+
+**Note:** the plugin only includes options to centre and right-align images because in LTR languages content defaults to left-aligned. To add a left-align option...
+
+* Add `value === 'left' ? 'img-l'` to the `className` section in `index.js`.
+* Add a `- left` option to the `button.yml` custom block blueprint.
+* Add `img-l` (or similar) styles to the `index.css` file.
+* Add a `<?php elseif ($alignment() == 'left'): ?>class="text-left"` statement into the `<figure>` parent element in the `customimage.php` custom block snippet.
+* Add `text-left` (or similar) styles to your main CSS file.
+
+## Disclaimer
+
+This plugin is provided "as is" and with no guarantee. You use it at your own risk. Always test it before using it in a production environment. If you find any issues, please [create a new issue](https://github.com/brandsis/custom-image-block/issues/new).
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)

blueprints/blocks/myimage.yml → blueprints/blocks/customimage.yml

@@ -1,6 +1,6 @@
-name: Image (new)
+name: Image
 icon: image
-preview: image
+preview: customimage
 fields:
 	location:
 		label: field.blocks.image.location

index.css

@@ -1,40 +1,47 @@
-.k-block-container.k-block-container-type-myimage {
+.k-block-container.k-block-container-type-customimage {
 	padding: 0;
 }
-.k-block-type-myimage .k-block-figure {
+.k-block-type-customimage .k-block-figure {
 	padding: var(--spacing-3);
 	border-radius: var(--rounded);
 }
-.k-block-type-myimage .k-block-figure-container {
-	text-align: center;
+.k-block-type-customimage .k-block-figure-container {
 	line-height: 0;
 }
-.k-block-type-myimage .k-block-figure[data-empty="true"] {
+.k-block-type-customimage .k-block-figure[data-empty="true"] {
 	padding: var(--spacing-3);
 }
-.k-block-type-myimage-auto {
+.k-block-type-customimage-auto {
 	max-width: 100%;
 	max-height: 30rem;
-	margin-inline: auto;
 }
-.k-block-type-myimage .k-background-dropdown {
+.k-block-type-customimage .k-background-dropdown {
 	position: absolute;
 	inset-inline-end: var(--spacing-3);
 	bottom: var(--spacing-3);
 	opacity: 0;
 	transition: opacity 0.2s ease-in-out;
 }
-.k-block-type-myimage:hover .k-background-dropdown {
+.k-block-type-customimage:hover .k-background-dropdown {
 	opacity: 1;
 }
 .k-block .k-block-background-dropdown {
 	display: none;
 }
-.k-block-figure-container img[class*="txt-c"] {
+.k-block-figure-caption {
+	justify-content: start;
+}
+.k-block-figure-container img[class*="img-c"] {
 	margin-left: auto;
 	margin-right: auto;
 }
-.k-block-figure-container img[class*="txt-r"] {
+.k-block-figure:has(img[class*="img-c"]) .k-block-figure-caption {
+	justify-content: center;
+}
+.k-block-figure-container img[class*="img-r"] {
 	margin-left: auto;
 	margin-right: 0;	
+}
+.k-block-figure:has(img[class*="img-r"]) .k-block-figure-caption {
+	justify-content: end;
 }

index.js

@@ -1,6 +1,6 @@
-panel.plugin("brandsistency/image-block", {
+panel.plugin("brandsistency/custom-image-block", {
 	blocks: {
-		myimage: {
+		customimage: {
 			data() {
 				return {
 					back: this.onBack() ?? "white"
@@ -27,8 +27,7 @@ panel.plugin("brandsistency/image-block", {
 				},
 				className() {
 					let value = this.content.alignment;
-					/*let className = value === 'center' ? 'txt-c' : value === 'right' ? 'txt-r' : ''; return className;*/
-					let className = value === 'center' ? 'k-block-type-myimage-auto txt-c' : value === 'right' ? 'k-block-type-myimage-auto txt-r' : 'k-block-type-myimage-auto'; return className;
+					let className = value === 'center' ? 'k-block-type-customimage-auto img-c' : value === 'right' ? 'k-block-type-customimage-auto img-r' : 'k-block-type-customimage-auto'; return className;
 				},		
 			},
 			methods: {

index.php

@@ -1,10 +1,10 @@
 <?php
 
-Kirby::plugin('brandsistency/image-block', [
+Kirby::plugin('brandsistency/custom-image-block', [
 	'blueprints' => [
-		'blocks/myimage' => __DIR__ . '/blueprints/blocks/myimage.yml'
+		'blocks/customimage' => __DIR__ . '/blueprints/blocks/customimage.yml'
 	],
 	'snippets' => [
-		'blocks/myimage' => __DIR__ . '/snippets/blocks/myimage.php'
+		'blocks/customimage' => __DIR__ . '/snippets/blocks/customimage.php'
 	]
 ]);