Created
December 13, 2019 10:13
-
-
Save daviedR/bbde49c0e1a32f4866d2479c2b2e5d2d to your computer and use it in GitHub Desktop.
Make Elementor's Image Box widget's link applied on whole element instead of just image and title.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Modify frontend render function of Elementor's Image Box. | |
* Apply link to whole element instead of just title and image. | |
* | |
* @param string $output The original HTML markup. | |
* @param \Elementor\Widget_Image_Box $widget Elementor's Image Box widget object. | |
* @return string | |
*/ | |
function sukiwp_modify_image_box_render( $output, $widget ) { | |
// Make sure that it's an Image Box widget. | |
if ( 'image-box' !== $widget->get_name() ) { | |
return $output; | |
} | |
// Get the widget settings. | |
$settings = $widget->get_settings_for_display(); | |
// If link is enabled, use our custom markup. | |
if ( ! empty( $settings['link']['url'] ) ) { | |
// Remove link on the image & title. | |
$output = preg_replace( '/<a [^>]*>(.*?)<\/a>/', '$1', $output ); | |
// Add link to the "elementor-image-box-wrapper" tag. | |
$output = preg_replace( '/^<div class="elementor-image-box-wrapper">(.*)<\/div>$/', '<a ' . $widget->get_render_attribute_string( 'link' ) . ' class="elementor-image-box-wrapper">$1</a>', $output ); | |
} | |
// Return the HTML markup. | |
return $output; | |
} | |
add_action( 'elementor/widget/render_content', 'sukiwp_modify_image_box_render', 10, 2 ); | |
/** | |
* Modify JS template of Elementor's Image Box. | |
* Apply link to whole element instead of just title and image. | |
* | |
* @param string $output The original HTML markup. | |
* @param \Elementor\Widget_Image_Box $widget Elementor's Image Box widget object. | |
* @return string | |
*/ | |
function sukiwp_modify_image_box_content_template( $output, $widget ) { | |
// Make sure that it's an Image Box widget. | |
if ( 'image-box' !== $widget->get_name() ) { | |
return $output; | |
} | |
// Re-create the template. | |
ob_start(); | |
?> | |
<# | |
var html = ''; | |
if ( settings.link.url ) { | |
html += '<a href="' + settings.link.url + '" class="elementor-image-box-wrapper">'; | |
} else { | |
html += '<div class="elementor-image-box-wrapper">'; | |
} | |
if ( settings.image.url ) { | |
var image = { | |
id: settings.image.id, | |
url: settings.image.url, | |
size: settings.thumbnail_size, | |
dimension: settings.thumbnail_custom_dimension, | |
model: view.getEditModel() | |
}; | |
var image_url = elementor.imagesManager.getImageUrl( image ); | |
var imageHtml = '<img src="' + image_url + '" class="elementor-animation-' + settings.hover_animation + '" />'; | |
html += '<figure class="elementor-image-box-img">' + imageHtml + '</figure>'; | |
} | |
var hasContent = !! ( settings.title_text || settings.description_text ); | |
if ( hasContent ) { | |
html += '<div class="elementor-image-box-content">'; | |
if ( settings.title_text ) { | |
var title_html = settings.title_text; | |
view.addRenderAttribute( 'title_text', 'class', 'elementor-image-box-title' ); | |
view.addInlineEditingAttributes( 'title_text', 'none' ); | |
html += '<' + settings.title_size + ' ' + view.getRenderAttributeString( 'title_text' ) + '>' + title_html + '</' + settings.title_size + '>'; | |
} | |
if ( settings.description_text ) { | |
view.addRenderAttribute( 'description_text', 'class', 'elementor-image-box-description' ); | |
view.addInlineEditingAttributes( 'description_text' ); | |
html += '<p ' + view.getRenderAttributeString( 'description_text' ) + '>' + settings.description_text + '</p>'; | |
} | |
html += '</div>'; | |
} | |
if ( settings.link.url ) { | |
html += '</a>'; | |
} else { | |
html += '</div>'; | |
} | |
print( html ); | |
#> | |
<?php | |
$output = ob_get_clean(); | |
// Return the new JS template. | |
return $output; | |
} | |
add_filter( 'elementor/widget/print_template', 'sukiwp_modify_image_box_content_template', 10, 2); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment