Skip to content

Instantly share code, notes, and snippets.

@CharlieEtienne
Last active April 20, 2022 07:27
Show Gist options
  • Save CharlieEtienne/c55fa9ada93cd33ef88d8641fc7fa98d to your computer and use it in GitHub Desktop.
Save CharlieEtienne/c55fa9ada93cd33ef88d8641fc7fa98d to your computer and use it in GitHub Desktop.
Add custom links to each image in Elementor Carousel
<?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;
}
@CharlieEtienne
Copy link
Author

Copy this code and paste it in functions.php of your theme

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment