← All changes | includes/Frontend/Form/View/Theme/Fields/ImageField.php +99 -20 2.10.0 → V3.3.2 View file →

		@@ -8,29 +8,108 @@
8	8	{
9	9	public static function init($field, $rowID, $field_name, $form_atomic_Cls_map, $formID, $error = null, $value = null)
10	10	{
11	11	$fieldHelpers = new ClassicFieldHelpers($field, $rowID, $form_atomic_Cls_map);
12		- $imgHeight = intval(Helpers::property_exists_nested($field, 'height', '', 1) ? $field->height : 100);
13		- $imgWidth = intval(Helpers::property_exists_nested($field, 'width', '', 1) ? $field->width : 40);
	12	+ // an empty (or legacy 0) size means "auto", so the attribute is left out
	13	+ $imgWidth = self::getSize($field, 'width');
	14	+ $imgHeight = self::getSize($field, 'height');
14	15
15		- $imgSrc = Helpers::property_exists_nested($field, 'bg_img', '', 1) ? $field->bg_img : "https://via.placeholder.com/{$imgWidth}x{$imgHeight}";
	16	+ $imgSrc = Helpers::property_exists_nested($field, 'bg_img', '', 1) ? $field->bg_img : '';
16	17	$alt = Helpers::property_exists_nested($field, 'alt', '', 1) ? $field->alt : '';
17		- $img = <<<IMG
18		- <img
19		- {$fieldHelpers->getCustomAttributes('img')}
20		- class="{$fieldHelpers->getAtomicCls('img')} {$fieldHelpers->getCustomClasses('img')}"
21		- src="{$fieldHelpers->esc_url($imgSrc)}"
22		- alt="{$fieldHelpers->esc_attr($alt)}"
23		- width="{$fieldHelpers->esc_attr($imgWidth)}"
24		- height="{$fieldHelpers->esc_attr($imgHeight)}"
25		- />
26		-IMG;
27		- return <<<IMAGEFIELD
28		- <div
29		- {$fieldHelpers->getCustomAttributes('fld-wrp')}
30		- class="{$fieldHelpers->getAtomicCls('fld-wrp')} {$fieldHelpers->getCustomClasses('fld-wrp')}"
	18	+
	19	+ $sizeAttrs = '';
	20	+ if ($imgWidth) {
	21	+ $sizeAttrs .= ' width="' . $fieldHelpers->esc_attr($imgWidth) . '"';
	22	+ }
	23	+ if ($imgHeight) {
	24	+ $sizeAttrs .= ' height="' . $fieldHelpers->esc_attr($imgHeight) . '"';
	25	+ }
	26	+
	27	+ $img = sprintf(
	28	+ '<img
	29	+ %1$s
	30	+ class="%2$s %3$s"
	31	+ src="%4$s"
	32	+ alt="%5$s"
	33	+ %6$s
	34	+ style="%7$s"
	35	+ />',
	36	+ $fieldHelpers->getCustomAttributes('img'),
	37	+ $fieldHelpers->getAtomicCls('img'),
	38	+ $fieldHelpers->getCustomClasses('img'),
	39	+ $fieldHelpers->esc_url($imgSrc),
	40	+ $fieldHelpers->esc_attr($alt),
	41	+ $sizeAttrs,
	42	+ self::getImgInlineStyle($imgWidth, $imgHeight)
	43	+ );
	44	+
	45	+ return sprintf(
	46	+ '<div
	47	+ %1$s
	48	+ class="%2$s %3$s"
	49	+ style="%4$s"
31	50	>
32		- {$img}
33		- </div>
34		-IMAGEFIELD;
	51	+ %5$s
	52	+ </div>',
	53	+ $fieldHelpers->getCustomAttributes('fld-wrp'),
	54	+ $fieldHelpers->getAtomicCls('fld-wrp'),
	55	+ $fieldHelpers->getCustomClasses('fld-wrp'),
	56	+ self::getWrapperInlineStyle($imgWidth, $imgHeight),
	57	+ $img
	58	+ );
	59	+ }
	60	+
	61	+ /**
	62	+ * @param object $field
	63	+ * @param string $prop width|height
	64	+ * @return int 0 when the size is empty/auto
	65	+ */
	66	+ private static function getSize($field, $prop)
	67	+ {
	68	+ if (!Helpers::property_exists_nested($field, $prop) || !is_numeric($field->{$prop})) {
	69	+ return 0;
	70	+ }
	71	+ return max(0, intval($field->{$prop}));
	72	+ }
	73	+
	74	+ /**
	75	+ * Saved builder CSS pins the wrapper to the configured px size and stretches the img to
	76	+ * 100%/100% !important, so a wide image overflows (or squashes) narrow forms. Width becomes
	77	+ * a maximum and height follows the aspect ratio; on wide forms it still renders at its size.
	78	+ * vertical-align drops the inline descender gap now that the wrapper height is auto.
	79	+ *
	80	+ * @param int $imgWidth
	81	+ * @param int $imgHeight
	82	+ * @return string
	83	+ */
	84	+ private static function getImgInlineStyle($imgWidth, $imgHeight)
	85	+ {
	86	+ $style = 'max-width:100%;vertical-align:top;';
	87	+ if ($imgWidth) {
	88	+ return $style . 'width:' . $imgWidth . 'px;height:auto !important;';
	89	+ }
	90	+ if ($imgHeight) {
	91	+ // height-only: the attribute alone loses to the saved CSS, and contain keeps the
	92	+ // aspect ratio if max-width has to narrow it
	93	+ return $style . 'width:auto;height:' . $imgHeight . 'px !important;object-fit:contain;';
	94	+ }
	95	+ return $style . 'width:auto;height:auto !important;';
	96	+ }
	97	+
	98	+ /**
	99	+ * @param int $imgWidth
	100	+ * @param int $imgHeight
	101	+ * @return string
	102	+ */
	103	+ private static function getWrapperInlineStyle($imgWidth, $imgHeight)
	104	+ {
	105	+ $style = 'max-width:100%;height:auto;';
	106	+ // older saves wrote 0px for an emptied size, which collapsed the wrapper
	107	+ if (!$imgWidth) {
	108	+ $style .= 'width:auto;';
	109	+ }
	110	+ if (!$imgHeight) {
	111	+ $style .= 'max-height:none;';
	112	+ }
	113	+ return $style;
35	114	}
36	115	}