Last active
April 20, 2022 07:27
-
-
Save CharlieEtienne/c55fa9ada93cd33ef88d8641fc7fa98d to your computer and use it in GitHub Desktop.
Add custom links to each image in Elementor Carousel
This file contains 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 | |
add_filter( 'attachment_fields_to_edit', function( $form_fields, $post ) { | |
$form_fields[ 'elementor_carousel_custom_link' ] = array( | |
'label' => __( 'Custom link', 'elementor' ), | |
'input' => 'text', | |
'value' => get_post_meta( $post->ID, 'elementor_carousel_custom_link', true ), | |
'helps' => __( 'This will add a link to images in Elementor Carousel', 'elementor' ), | |
); | |
$target = (bool) get_post_meta( $post->ID, 'elementor_carousel_custom_link_target', true ); | |
$checked = ( $target ) ? 'checked' : ''; | |
$form_fields[ 'elementor_carousel_custom_link_target' ] = array( | |
'label' => __( 'Open in new tab ?', 'elementor' ), | |
'input' => 'html', | |
'html' => "<input type='checkbox' {$checked} name='attachments[{$post->ID}][elementor_carousel_custom_link_target]' id='attachments[{$post->ID}][elementor_carousel_custom_link_target]' />", | |
'value' => $target, | |
'helps' => __( 'Open custom link in Elementor Carousel in new tab ?', 'elementor' ), | |
); | |
return $form_fields; | |
}, 10, 2 ); | |
add_filter( 'attachment_fields_to_save', function( $post, $attachment ) { | |
if ( isset( $attachment[ 'elementor_carousel_custom_link' ] ) ) { | |
update_post_meta( | |
$post[ 'ID' ], | |
'elementor_carousel_custom_link', | |
$attachment[ 'elementor_carousel_custom_link' ] | |
); | |
} | |
if ( isset( $attachment[ 'elementor_carousel_custom_link_target' ] ) ) { | |
$target = ( $attachment[ 'elementor_carousel_custom_link_target' ] == 'on' ) ? '1' : '0'; | |
update_post_meta( $post[ 'ID' ], 'elementor_carousel_custom_link_target', $target ); | |
} | |
return $post; | |
}, 10, 2 ); | |
add_action( 'elementor/widget/render_content', function( $content, $widget ) { | |
if ( 'image-carousel' === $widget->get_name() ) { | |
// ob_start(); | |
$settings = $widget->get_settings_for_display(); | |
if ( empty( $settings[ 'carousel' ] ) ) { | |
return; | |
} | |
$slides = []; | |
foreach ( $settings[ 'carousel' ] as $index => $attachment ) { | |
$image_url = Elementor\Group_Control_Image_Size::get_attachment_image_src( $attachment[ 'id' ], 'thumbnail', $settings ); | |
if ( ! $image_url && isset( $attachment[ 'url' ] ) ) { | |
$image_url = $attachment[ 'url' ]; | |
} | |
$image_html = '<img class="swiper-slide-image" src="' . esc_attr( $image_url ) . '" alt="' . esc_attr( Elementor\Control_Media::get_image_alt( $attachment ) ) . '" />'; | |
$link_tag = ''; | |
$link = elementor_carousel_custom_link_get_link_url( $attachment, $settings ); | |
if ( $link ) { | |
$link_key = 'link_' . $index; | |
if ( get_elementor_carousel_custom_link( $attachment ) ) { | |
$link_tag = '<a data-elementor-open-lightbox="no" href="' . get_elementor_carousel_custom_link( $attachment ) . '" target="' . get_elementor_carousel_custom_link_target( $attachment ) . '">'; | |
} else { | |
$link_tag = '<a ' . $widget->get_render_attribute_string( $link_key ) . '>'; | |
} | |
} | |
$image_caption = elementor_carousel_custom_link_get_image_caption( $attachment, $widget ); | |
$slide_html = '<div class="swiper-slide">' . $link_tag . '<figure class="swiper-slide-inner">' . $image_html; | |
if ( ! empty( $image_caption ) ) { | |
$slide_html .= '<figcaption class="elementor-image-carousel-caption">' . wp_kses_post( $image_caption ) . '</figcaption>'; | |
} | |
$slide_html .= '</figure>'; | |
if ( $link ) { | |
$slide_html .= '</a>'; | |
} | |
$slide_html .= '</div>'; | |
$slides[] = $slide_html; | |
} | |
if ( empty( $slides ) ) { | |
return; | |
} | |
$show_dots = ( in_array( $settings[ 'navigation' ], [ 'dots', 'both' ] ) ); | |
$show_arrows = ( in_array( $settings[ 'navigation' ], [ 'arrows', 'both' ] ) ); | |
$slides_count = count( $settings[ 'carousel' ] ); | |
?> | |
<div <?php $widget->print_render_attribute_string( 'carousel-wrapper' ); ?>> | |
<div <?php $widget->print_render_attribute_string( 'carousel' ); ?>> | |
<?php // PHPCS - $slides contains the slides content, all the relevent content is escaped above. ?> | |
<?php echo implode( '', $slides ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> | |
</div> | |
<?php if ( 1 < $slides_count ) : ?> | |
<?php if ( $show_dots ) : ?> | |
<div class="swiper-pagination"></div> | |
<?php endif; ?> | |
<?php if ( $show_arrows ) : ?> | |
<div class="elementor-swiper-button elementor-swiper-button-prev"> | |
<i class="eicon-chevron-left" aria-hidden="true"></i> | |
<span class="elementor-screen-only"><?php echo esc_html__( 'Previous', 'elementor' ); ?></span> | |
</div> | |
<div class="elementor-swiper-button elementor-swiper-button-next"> | |
<i class="eicon-chevron-right" aria-hidden="true"></i> | |
<span class="elementor-screen-only"><?php echo esc_html__( 'Next', 'elementor' ); ?></span> | |
</div> | |
<?php endif; ?> | |
<?php endif; ?> | |
</div> | |
<?php | |
} else { | |
return $content; | |
} | |
}, 10, 2 ); | |
function get_elementor_carousel_custom_link( $attachment ) { | |
$custom_link = get_post_meta( $attachment[ 'id' ], 'elementor_carousel_custom_link' ); | |
if ( isset( $custom_link ) && is_array( $custom_link ) && ! empty( $custom_link[ 0 ] ) ) { | |
return $custom_link[ 0 ]; | |
} | |
return false; | |
} | |
function get_elementor_carousel_custom_link_target( $attachment ) { | |
$target = get_post_meta( $attachment[ 'id' ], 'elementor_carousel_custom_link_target' ); | |
if ( isset( $target ) && is_array( $target ) && ! empty( $target[ 0 ] ) ) { | |
if ( $target[ 0 ] === '1' ) { | |
return "_blank"; | |
} | |
return ""; | |
} | |
return ""; | |
} | |
function elementor_carousel_custom_link_get_link_url( $attachment, $instance ) { | |
if ( 'none' === $instance[ 'link_to' ] ) { | |
return false; | |
} | |
if ( 'custom' === $instance[ 'link_to' ] ) { | |
if ( empty( $instance[ 'link' ][ 'url' ] ) ) { | |
return false; | |
} | |
return $instance[ 'link' ]; | |
} | |
return [ | |
'url' => wp_get_attachment_url( $attachment[ 'id' ] ), | |
]; | |
} | |
function elementor_carousel_custom_link_get_image_caption( $attachment, $widget ) { | |
$caption_type = $widget->get_settings_for_display( 'caption_type' ); | |
if ( empty( $caption_type ) ) { | |
return ''; | |
} | |
$attachment_post = get_post( $attachment[ 'id' ] ); | |
if ( 'caption' === $caption_type ) { | |
return $attachment_post->post_excerpt; | |
} | |
if ( 'title' === $caption_type ) { | |
return $attachment_post->post_title; | |
} | |
return $attachment_post->post_content; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Copy this code and paste it in
functions.php
of your theme