← All changes | includes/Frontend/Form/View/Theme/Fields/ImageField.php +73 -7 3.2.1 → V3.3.2 View file →

		@@ -8,14 +8,23 @@
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	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	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	+
18	27	$img = sprintf(
19	28	'<img
20	29	%1$s
21	30	class="%2$s %3$s"
		@@ -20,10 +29,10 @@
20	29	%1$s
21	30	class="%2$s %3$s"
22	31	src="%4$s"
23	32	alt="%5$s"
24		- width="%6$s"
25		- height="%7$s"
	33	+ %6$s
	34	+ style="%7$s"
26	35	/>',
27	36	$fieldHelpers->getCustomAttributes('img'),
28	37	$fieldHelpers->getAtomicCls('img'),
29	38	$fieldHelpers->getCustomClasses('img'),
		@@ -28,10 +37,10 @@
28	37	$fieldHelpers->getAtomicCls('img'),
29	38	$fieldHelpers->getCustomClasses('img'),
30	39	$fieldHelpers->esc_url($imgSrc),
31	40	$fieldHelpers->esc_attr($alt),
32		- $fieldHelpers->esc_attr($imgWidth),
33		- $fieldHelpers->esc_attr($imgHeight)
	41	+ $sizeAttrs,
	42	+ self::getImgInlineStyle($imgWidth, $imgHeight)
34	43	);
35	44
36	45	return sprintf(
37	46	'<div
		@@ -36,14 +45,71 @@
36	45	return sprintf(
37	46	'<div
38	47	%1$s
39	48	class="%2$s %3$s"
	49	+ style="%4$s"
40	50	>
41		- %4$s
	51	+ %5$s
42	52	</div>',
43	53	$fieldHelpers->getCustomAttributes('fld-wrp'),
44	54	$fieldHelpers->getAtomicCls('fld-wrp'),
45	55	$fieldHelpers->getCustomClasses('fld-wrp'),
	56	+ self::getWrapperInlineStyle($imgWidth, $imgHeight),
46	57	$img
47	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;
48	114	}
49	115	}