radio button version of image check (#1298)

src/pages/_docs/form-image-check.md

@@ -10,6 +10,11 @@ Add an image check to your form and give users visually attractive options to ch
 {% endcapture %}
 {% include example.html code=code max-width="25rem" %}
 
+{% capture code %}
+{% include parts/form/input-image-radio.html offset=10 %}
+{% endcapture %}
+{% include example.html code=code max-width="25rem" %}
+
 
 {% capture code %}
 {% include parts/form/input-image-people.html %}

src/pages/_includes/forms/form-elements-3.html

 {% include parts/form/input-image.html %}
+{% include parts/form/input-image-radio.html offset=10 %}
 {% include parts/form/input-color.html %}
 {% include parts/form/input-color.html name="color-rounded" rounded=true %}
 {% include parts/form/input-colorpicker.html %}

src/pages/_includes/parts/form/input-image-radio.html

+{% assign limit = include.limit | default: 6 %}
+{% assign offset = include.offset | default: 0 %}
+<div class="mb-3">
+	<label class="form-label">Image Check Radio</label>
+	<div class="row g-2">
+		{% assign photos = site.data.photos | where: 'horizontal', true %}
+
+		{% for photo in photos limit: limit offset: offset %}
+		<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
+			<label class="form-imagecheck mb-2">
+				<input name="form-imagecheck-radio" type="radio" value="{{ forloop.index }}" class="form-imagecheck-input" {% if forloop.index == 2 or forloop.index == 4  or forloop.index == 7 %} checked{% endif %}/>
+				<span class="form-imagecheck-figure">
+					<img src="{{ site.base }}/static/photos/{{ photo.file }}" alt="{{ photo.title }}" class="form-imagecheck-image">
+				</span>
+			</label>
+		</div>
+		{% endfor %}
+	</div>
+</div>

src/pages/_includes/parts/form/input-image.html

-{% assign limit = include.limit | default: 9 %}
+{% assign limit = include.limit | default: 6 %}
+{% assign offset = include.offset | default: 0 %}
 <div class="mb-3">
 	<label class="form-label">Image Check</label>
 	<div class="row g-2">
 		{% assign photos = site.data.photos | where: 'horizontal', true %}
 
-		{% for photo in photos limit: limit %}
+		{% for photo in photos limit: limit offset: offset %}
 		<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
 			<label class="form-imagecheck mb-2">
 				<input name="form-imagecheck" type="checkbox" value="{{ forloop.index }}" class="form-imagecheck-input" {% if forloop.index == 2 or forloop.index == 4  or forloop.index == 7 %} checked{% endif %}/>

src/scss/ui/forms/_form-imagecheck.scss

@@ -44,7 +44,7 @@ Image check
     user-select: none;
     background: $form-check-input-bg;
     border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
-    border-radius: 3px;
+    border-radius: $form-check-input-border-radius;
     @include transition(opacity $transition-time);
 
     .form-imagecheck-input:checked ~ & {
@@ -55,6 +55,11 @@ Image check
       background-size: $form-check-input-checked-bg-size;
       border-color: $form-check-input-checked-border-color;
     }
+
+    .form-imagecheck-input[type="radio"] ~ & {
+      border-radius: $form-check-radio-border-radius;
+      background-image: escape-svg($form-check-radio-checked-bg-image);
+    }
   }
 }