← All changes | includes/blocks/featured-image/block.php +234 -0 2.7.7 → 2.13.0 View file →

		@@ -1,0 +1,234 @@
	1	+<?php
	2	+namespace ABlocks\Blocks\FeaturedImage;
	3	+
	4	+if ( ! defined( 'ABSPATH' ) ) {
	5	+ exit;
	6	+}
	7	+
	8	+use ABlocks\Classes\BlockBaseAbstract;
	9	+use ABlocks\Classes\CssGeneratorV2;
	10	+use ABlocks\Helper;
	11	+use ABlocks\Controls\Alignment;
	12	+use ABlocks\Controls\Border;
	13	+use ABlocks\Controls\Dimensions;
	14	+use ABlocks\Controls\Typography;
	15	+use ABlocks\Controls\CssFilter;
	16	+use ABlocks\Controls\BoxShadow;
	17	+use ABlocks\Controls\Range;
	18	+use ABlocks\Controls\Color;
	19	+
	20	+class Block extends BlockBaseAbstract {
	21	+ protected $block_name = 'featured-image';
	22	+
	23	+ public function build_css( $attributes ) {
	24	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
	25	+ // Image Wrapper CSS
	26	+ $css_generator->add_class_styles(
	27	+ '{{WRAPPER}}',
	28	+ $this->get_wrapper_css( $attributes ),
	29	+ $this->get_wrapper_css( $attributes, 'Tablet' ),
	30	+ $this->get_wrapper_css( $attributes, 'Mobile' ),
	31	+ );
	32	+
	33	+ // Image container css
	34	+ $css_generator->add_class_styles(
	35	+ '{{WRAPPER}}',
	36	+ $this->get_image_container_css( $attributes ),
	37	+ $this->get_image_container_css( $attributes, 'Tablet' ),
	38	+ $this->get_image_container_css( $attributes, 'Mobile' ),
	39	+ );
	40	+ // Image css
	41	+ $css_generator->add_class_styles(
	42	+ '{{WRAPPER}}.ablocks-block--featured-image img',
	43	+ $this->get_image_css( $attributes ),
	44	+ $this->get_image_css( $attributes, 'Tablet' ),
	45	+ $this->get_image_css( $attributes, 'Mobile' ),
	46	+ );
	47	+
	48	+ // Image hover css
	49	+ $css_generator->add_class_styles(
	50	+ '{{WRAPPER}}.ablocks-block--featured-image img:hover',
	51	+ $this->get_image_hover_css( $attributes ),
	52	+ $this->get_image_hover_css( $attributes, 'Tablet' ),
	53	+ $this->get_image_hover_css( $attributes, 'Mobile' ),
	54	+ );
	55	+
	56	+ return $css_generator->generate_css();
	57	+ }
	58	+
	59	+ public function get_wrapper_css( $attributes, $device = '' ) {
	60	+ return array_merge(
	61	+ isset( $attributes['padding'] ) ? Dimensions::get_css( $attributes['padding'], 'padding', $device ) : [],
	62	+ );
	63	+ }
	64	+
	65	+ public function get_image_css( $attributes, $device = '' ) {
	66	+ $css = [];
	67	+
	68	+ if ( isset( $attributes['widthHeightWidget'][ 'width' . $device ] ) ) {
	69	+ $css['width'] = $attributes['widthHeightWidget'][ 'width' . $device ] . 'px';
	70	+ } elseif ( isset( $attributes['widthHeightWidget']['imgNaturalWidth'] ) ) {
	71	+ $css['width'] = $attributes['widthHeightWidget']['imgNaturalWidth'] . 'px';
	72	+ }
	73	+
	74	+ $aspectRatioValue = empty( $attributes['aspectRatio'][ 'value' . $device ] ) ? false : $attributes['aspectRatio'][ 'value' . $device ];
	75	+ $widthValue = empty( $attributes['widthHeightWidget'][ 'width' . $device ] ) ? false : $attributes['widthHeightWidget'][ 'width' . $device ];
	76	+ $heightValue = empty( $attributes['widthHeightWidget'][ 'height' . $device ] ) ? false : $attributes['widthHeightWidget'][ 'height' . $device ];
	77	+ $showHeight = ! empty( $attributes['widthHeightWidget'][ 'showHeight' . $device ] );
	78	+
	79	+ if ( $widthValue ) {
	80	+ $css['width'] = $widthValue . 'px';
	81	+ }
	82	+ if ( $heightValue ) {
	83	+ $css['height'] = $heightValue . 'px';
	84	+ } else {
	85	+ $css['height'] = 'auto';
	86	+ }
	87	+
	88	+ if ( isset( $attributes['objectFit'][ 'value' . $device ] ) && '' !== $attributes['objectFit'][ 'value' . $device ] && 'default' !== $attributes['objectFit'][ 'value' . $device ] ) {
	89	+ $css['object-fit'] = $attributes['objectFit'][ 'value' . $device ];
	90	+ }
	91	+
	92	+ if ( $aspectRatioValue && $aspectRatioValue !== 'original' ) {
	93	+ $css['aspect-ratio'] = $aspectRatioValue;
	94	+ }
	95	+ if ( isset( $attributes['onHoverImg'] ) && 'slide' === $attributes['onHoverImg'] ) {
	96	+ $css['transform'] = 'translate3d(-40px, 0, 0)';
	97	+ $css['transition'] = 'transform 0.3s';
	98	+ }
	99	+
	100	+ return array_merge(
	101	+ $css,
	102	+ Range::get_css([
	103	+ 'attributeValue' => $attributes['opacity'],
	104	+ 'defaultValue' => 1,
	105	+ 'unitDefaultValue' => '',
	106	+ 'property' => 'opacity',
	107	+ 'device' => $device,
	108	+ ]),
	109	+ isset( $attributes['border'] ) ? Border::get_css( $attributes['border'], '', $device ) : [],
	110	+ isset( $attributes['cssFilter'] ) ? CssFilter::get_css( $attributes['cssFilter'], '', $device ) : [],
	111	+ isset( $attributes['boxShadow'] ) ? BoxShadow::get_css( $attributes['boxShadow'], $device ) : []
	112	+ );
	113	+ }
	114	+
	115	+ public function get_image_hover_css( $attributes, $device = '' ) {
	116	+ $css = [];
	117	+ $range_css = Range::get_css([
	118	+ 'attributeValue' => $attributes['opacityH'],
	119	+ 'defaultValue' => 1,
	120	+ 'unitDefaultValue' => '',
	121	+ 'property' => 'opacity',
	122	+ 'device' => $device,
	123	+ ]);
	124	+ $transitionDurationRange = Range::get_css([
	125	+ 'attributeValue' => $attributes['transitionDuration'],
	126	+ 'defaultValue' => 0.5,
	127	+ 'unitDefaultValue' => '',
	128	+ 'property' => 'transition',
	129	+ 'device' => $device,
	130	+ ]);
	131	+ $filterTransitionDurationRange = Range::get_css([
	132	+ 'attributeValue' => $attributes['filterTransitionDuration'],
	133	+ 'defaultValue' => 0.5,
	134	+ 'unitDefaultValue' => '',
	135	+ 'property' => 'filter',
	136	+ 'device' => $device,
	137	+ ]);
	138	+
	139	+ if ( isset( $attributes['onHoverImg'] ) ) {
	140	+ $on_Hover_Img = $attributes['onHoverImg'];
	141	+ if ( 'zoomin' === $on_Hover_Img ) {
	142	+ $css['transform'] = 'scale(1.1)';
	143	+ $css['transition'] = 'transform 0.3s';
	144	+ } elseif ( 'grayscale' === $on_Hover_Img ) {
	145	+ $css['filter'] = 'grayscale(100%)';
	146	+ $css['transition'] = 'transform 0.3s';
	147	+ } elseif ( 'blur' === $on_Hover_Img ) {
	148	+ $css['filter'] = 'blur(3px)';
	149	+ $css['transition'] = 'transform 0.3s';
	150	+ } elseif ( 'slide' === $on_Hover_Img ) {
	151	+ $css['transform'] = 'translate3d(0, 0, 0)';
	152	+ $css['transition'] = 'transform 0.3s';
	153	+ }
	154	+ }
	155	+ if (
	156	+ isset( $attributes['border']['transitionDuration'] ) ||
	157	+ isset( $attributes['boxShadow']['transitionDuration'] ) ||
	158	+ isset( $filterTransitionDurationRange['filter'] ) ||
	159	+ isset( $transitionDurationRange['transition'] )
	160	+ ) {
	161	+ $css['transition'] = sprintf(
	162	+ 'border %ss, box-shadow %ss, opacity %ss, filter %ss, transform 0.3s',
	163	+ ! empty( $attributes['border']['transitionDuration'] ) ? $attributes['border']['transitionDuration'] : $transitionDurationRange['transition'],
	164	+ isset( $attributes['boxShadow']['transitionDuration'] ) ? $attributes['boxShadow']['transitionDuration'] : $transitionDurationRange['transition'],
	165	+ $filterTransitionDurationRange['filter'],
	166	+ $filterTransitionDurationRange['filter']
	167	+ );
	168	+ }
	169	+
	170	+ $border_hover_css = Border::get_hover_css( isset( $attributes['border'] ) ? $attributes['border'] : null, $device );
	171	+
	172	+ return array_merge(
	173	+ $css,
	174	+ $range_css,
	175	+ $border_hover_css,
	176	+ ( isset( $attributes['boxShadow'] ) ) ? BoxShadow::get_hover_css( $attributes['boxShadow'], $device ) : [],
	177	+ ( isset( $attributes['cssHoverFilter'] ) ) ? CssFilter::get_css( $attributes['cssHoverFilter'], '', $device ) : [],
	178	+ );
	179	+ }
	180	+
	181	+ public function get_image_container_css( $attributes, $device = '' ) {
	182	+ $alignment_value = $attributes['alignment'][ 'value' . $device ] ?? '';
	183	+
	184	+ $css = [];
	185	+ if ( ! empty( $alignment_value ) ) {
	186	+ $css['display'] = 'flex';
	187	+ $css['justify-content'] = $alignment_value;
	188	+ }
	189	+ return $css;
	190	+ }
	191	+
	192	+ public function render_block_content( $attributes, $content, $block_instance ) {
	193	+ $post_id = get_the_ID();
	194	+
	195	+ if ( isset( $block_instance->context['postId'] ) && ! empty( $block_instance->context['postId'] ) ) {
	196	+ $post_id = $block_instance->context['postId'];
	197	+ }
	198	+
	199	+ $featured_img_url = get_the_post_thumbnail_url( $post_id, 'full' );
	200	+ if ( empty( $featured_img_url ) ) {
	201	+ $featured_img_url = ABLOCKS_ASSETS_URL . 'images/placeholder-thumbnail.svg';
	202	+ }
	203	+
	204	+ $featured_img_title = isset( $attributes['imgTitle'] ) ? (string) $attributes['imgTitle'] : '';
	205	+ $featured_img_alt = isset( $attributes['imgAltText'] ) ? (string) $attributes['imgAltText'] : '';
	206	+ $featured_img_link = isset( $attributes['imgLink']['linkDestination'] ) ? (string) $attributes['imgLink']['linkDestination'] : '';
	207	+ $featured_img_link_href = isset( $attributes['imgLink']['href'] ) ? (string) $attributes['imgLink']['href'] : '';
	208	+ $featured_img_link_target = ! empty( $featured_img_link_href ) ? '_blank' : '_self'; // ← semicolon added
	209	+
	210	+ // Linked image (custom URL)
	211	+ if ( 'custom' === $featured_img_link && ! empty( $featured_img_link_href ) ) {
	212	+ $rel = ( '_blank' === $featured_img_link_target ) ? ' rel="noopener noreferrer"' : '';
	213	+ return sprintf(
	214	+ '<a href="%s" target="%s"%s><img class="ablocks-featured-image" src="%s" alt="%s" title="%s" loading="lazy" decoding="async" /></a>',
	215	+ esc_url( $featured_img_link_href ),
	216	+ esc_attr( $featured_img_link_target ),
	217	+ $rel,
	218	+ esc_url( $featured_img_url ),
	219	+ esc_attr( $featured_img_alt ),
	220	+ esc_attr( $featured_img_title )
	221	+ );
	222	+ }
	223	+
	224	+ // Plain image
	225	+ return sprintf(
	226	+ '<img class="ablocks-featured-image" src="%s" alt="%s" title="%s" loading="lazy" decoding="async" />',
	227	+ esc_url( $featured_img_url ),
	228	+ esc_attr( $featured_img_alt ),
	229	+ esc_attr( $featured_img_title )
	230	+ );
	231	+ }
	232	+
	233	+
	234	+}