For your information, here is the code for the content fetching :

function fetch_oeuvre_content() {
    // Check nonce for security
    check_ajax_referer('ajax_nonce', 'nonce');

    $oeuvreId = sanitize_text_field($_POST['oeuvre']);
    $previousoeuvreId = sanitize_text_field($_POST['poeuvre']);
    $nextoeuvreId = sanitize_text_field($_POST['noeuvre']);
    $masonryId = sanitize_text_field($_POST['masonry']);

    $post = get_post($oeuvreId);
    if (!empty($post)) {
        $post_id = $post->ID;

        $content = do_shortcode("[jmpeynetoeuvre pid='".$post_id."' previous_id='".$previousoeuvreId."' next_id='".$nextoeuvreId."' masonry_id='".$masonryId."']"); // Get the content and apply content filters
		
        // Prepare and send JSON response
        wp_send_json(array(
            'content' => $content
        ));
    } else {
        echo 'Definition not found.';
    }
    wp_die(); // This is required to terminate immediately and return a proper response
}
add_action('wp_ajax_fetch_oeuvre_content', 'fetch_oeuvre_content');
add_action('wp_ajax_nopriv_fetch_oeuvre_content', 'fetch_oeuvre_content');

And the shortcode that is used :

function shortcode_jmpeynetoeuvre( $atts ){
global $post; 
$post_id = $post->ID;
$atts = shortcode_atts( [
        'pid' => $post_id,
		'previous_id' => '',
		'next_id' => '',
		'masonry_id' => '',
	], $atts );
$pid = $atts['pid'];
$previousid = $atts['previous_id'];
$nextid = $atts['next_id'];
$masonryid = $atts['masonry_id'];
	
$classpopup = '';
$classpopupbonus = '';	
	
$oeuvretitle = get_the_title($pid);
if (get_the_post_thumbnail_url($pid, "full")) {$oeuvreimagethumb = get_the_post_thumbnail_url($pid, "full");$oeuvreimagethumbid = attachment_url_to_postid($oeuvreimagethumb);} else {$oeuvreimagethumb = '';$oeuvreimagethumbid = '';}
if (get_field("oeuvre_annee", $pid)) {$oeuvredate = esc_html(get_field( "oeuvre_annee", $pid ));} else {$oeuvredate = '';}
if (get_field("oeuvre_technique", $pid)) {$oeuvretechnique = esc_html(get_field( "oeuvre_technique", $pid ));} else {$oeuvretechnique = '';}
if (get_field("oeuvre_legende", $pid)) {$oeuvrelegende = get_field( "oeuvre_legende", $pid );} else {$oeuvrelegende = '';}

$oeuvreportaitpaysage = get_field("oeuvre_portait_paysage", $pid);
if (get_field("oeuvre_image", $pid)) {$oeuvreimage = get_field( "oeuvre_image", $pid );$oeuvreimageurl = wp_get_attachment_url( $oeuvreimage );$classpopup = 'oeuvre-image '.$oeuvreportaitpaysage;} else {$oeuvreimage = '';}
if (get_field("oeuvre_flipbook_v2", $pid)) {$oeuvreflipbook = get_field( "oeuvre_flipbook_v2", $pid );$classpopup = 'oeuvre-flipbook';} else {$oeuvreflipbook = '';}
if (get_field("oeuvre_son", $pid)) {$oeuvreson = get_field( "oeuvre_son", $pid );$classpopup = 'oeuvre-son';} else {$oeuvreson = '';}
if (get_field("oeuvre_video", $pid)) {$oeuvrevideo = get_field( "oeuvre_video", $pid );$classpopup = 'oeuvre-video';} else {$oeuvrevideo = '';}
if (get_field("oeuvre_citation", $pid) == 'oui') {$oeuvrecitation = get_field( "oeuvre_citation", $pid );$classpopup = 'oeuvre-citation';} else {$oeuvrecitation = '';}

$oeuvrelien = get_post_permalink($pid);
$oeuvreslug = get_post_field( 'post_name', $pid );
$lienetoilee = __( 'Cliquez ici pour un supplément d’âme', 'peynet');

$output = '';

$output .= '<div id="'.$oeuvreslug.'" class="popup-oeuvre-principale '.$classpopup.' ">';
$output .= '<div class="avia-section main_color avia-section-default avia-no-border-styling  el_after_av_one_full  el_before_av_section  avia-bg-style-scroll av-minimum-height av-minimum-height-100 av-height-100 container_wrap fullsize"><div class="container av-section-cont-open"><div class="template-page content  av-content-full alpha units"><div class="post-entry post-entry-type-page "><div class="entry-content-wrapper clearfix jmcustompopupcontainer">';
	
	
// Bloc titre, date, technique	
$output .= '<div class="titredatetechniquecontainer">';
$output .= '<div class="titredatetechnique">';
$output .= '<p class="oeuvre-titre">'.$oeuvretitle.'</p>';
if (get_field("oeuvre_annee", $pid)) {$output .= '<p class="oeuvre-annee">'.$oeuvredate.'</p>';}
if (get_field("oeuvre_technique", $pid)) {$output .= '<p class="oeuvre-technique">'.$oeuvretechnique.'</p>';}
if (get_field("oeuvre_legende", $pid)) {$output .= '<p class="oeuvre-legende">'.$oeuvrelegende.'</p>';}
$output .= '</div></div>';	
	
//	Bloc contenu principal
$output .= '<div class="contenuprincipaloeuvrecontainer">';
$output .= '<div class="contenuprincipaloeuvre">';
if (get_field("oeuvre_image", $pid)) {
				$output .= '<div class="contenuprincipaloeuvreimage">';
				$output.= do_shortcode ("[av_image src='".$oeuvreimageurl."' attachment='".$oeuvreimage."' attachment_size='full' src_dynamic='' copyright='' caption='' image_size='' styling='' box_shadow='none' box_shadow_width='10' box_shadow_color='' align='center' font_size='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' link='' link_dynamic='' target='' animation='no-animation' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' parallax_parallax='' parallax_parallax_speed='' av-desktop-parallax_parallax='' av-desktop-parallax_parallax_speed='' av-medium-parallax_parallax='' av-medium-parallax_parallax_speed='' av-small-parallax_parallax='' av-small-parallax_parallax_speed='' av-mini-parallax_parallax='' av-mini-parallax_parallax_speed='' hover='' blur_image='' grayscale_image='' fade_image='' appearance='' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' transform_perspective='' transform_rotation=',,,' transform_scale=',,' transform_skew=',' transform_translate=',,' av-desktop-transform_perspective='' av-desktop-transform_rotation=',,,' av-desktop-transform_scale=',,' av-desktop-transform_skew=',' av-desktop-transform_translate=',,' av-medium-transform_perspective='' av-medium-transform_rotation=',,,' av-medium-transform_scale=',,' av-medium-transform_skew=',' av-medium-transform_translate=',,' av-small-transform_perspective='' av-small-transform_rotation=',,,' av-small-transform_scale=',,' av-small-transform_skew=',' av-small-transform_translate=',,' av-mini-transform_perspective='' av-mini-transform_rotation=',,,' av-mini-transform_scale=',,' av-mini-transform_skew=',' av-mini-transform_translate=',,' mask_overlay='' mask_overlay_shape='blob' mask_overlay_size='contain' mask_overlay_scale='100%' mask_overlay_position='center center' mask_overlay_repeat='no-repeat' mask_overlay_rotate='' mask_overlay_rad_shape='circle' mask_overlay_rad_position='center center' mask_overlay_opacity1='0' mask_overlay_opacity2='1' mask_overlay_opacity3='' title_attr='' alt_attr='' img_scrset='' lazy_loading='disabled' id='' custom_class='' template_class='' av_element_hidden_in_editor='0' sc_version='1.0' admin_preview_bg=''][/av_image]
");
				$output .= '</div>';}
if (get_field("oeuvre_flipbook", $pid)) {
				$output .= '<div class="contenuprincipaloeuvreflipbook">';
//				$output .= do_shortcode ("[real3dflipbook pdf='".$oeuvreflipbook."']");
				$output .= do_shortcode (' [dflip id="'.$oeuvreflipbook.'"][/dflip]');
				$output .= '</div>';}
if (get_field("oeuvre_son", $pid)) {
				$output .= '<div class="contenuprincipaloeuvreson">';
				$output .= do_shortcode ("[sc_embed_player fileurl='".$oeuvreson."']");
				$output .= '</div>';}
if (get_field("oeuvre_video", $pid)) {
				$output .= '<div class="contenuprincipaloeuvrevideo">';
				$output .= do_shortcode ("[av_video src='".$oeuvrevideo."']");
				$output .= '</div>';}
if (get_field("sliderimages", $pid)) {	
				$output .= '<div class="contenuprincipaloeuvreslider">';
				$output.= do_shortcode ("[jmpeynetslider bonus='non' pid='".$pid."']");
				$output .= '</div>';}
$output .= '</div></div>';	
	
//	Bloc lien vers bonus
$output .= '<div class="bonuslinkcontainer">';
if (get_field("oeuvre_bonus", $pid) == 'oui') {
$output .= '<div class="bonuslink open-popup-bonus-link" datalink="#bonus-'.$oeuvreslug.'">';
	$output .= $lienetoilee;

$output .= '</div>';
}
$output .= '</div>';
	
// Closing the main container

	
$output .= '</div></div>';

	$output .= '<div class="peynetmasonry-navigation-container">';
if($previousid)	{$output .= '<a href="#" class="type-oeuvre navigation-link" data-av-masonry-item="'.$previousid.'" data-linkcurrentmasonryid="'.$masonryid.'"> < </a>';}
	$output .= '<div style="width:5px;"></div>';
if($nextid)	{$output .= '<a  href="#" class="type-oeuvre navigation-link" data-av-masonry-item="'.$nextid.'" data-linkcurrentmasonryid="'.$masonryid.'"> < </a>';}
	$output .= '</div>';
	
$output .= '<button title="Close (Esc)" type="button" class="mfp-close">×</button>';

$output .= '</div></div></div>';	
	
$output .= '</div>';
				
return $output; 
}
add_shortcode('jmpeynetoeuvre', 'shortcode_jmpeynetoeuvre');

I know it’s a lot, but I wanted to give you all the necessary elements. The ‘jmpeynetslider’ shortcode creates a content slider from an ACF WYSIWYG field filled with multiple pictures.

Best

Many thanks Guinne007 that works great.
I will add a fallback image but I would like it to work on mobile too. It looks great in the browser set to mobile size.

Yes I would like it on small screens – how do I use relative width / height combinations?
This is what I changed css to to get it looking right:

#top .avia-fullwidth-slider::after {
  position: absolute;
  display: block;
  content: "";
  width: 300px;
  height: 255px;
  top: 50px;
  left: 60px;
  background-image: url(/wp-content/uploads/2025/03/Gathering-Barn-Banner-Logo-.png);
  background-repeat: no-repeat;
  background-size: 300px;
  background-position:center center;
  background-color: rgba(0,0,0,0);
  border-radius:20px;
}

Thanks

What is unclear about this?
“how to make a single image full width?”

marcus

Tried this from your link but not showing:
#top .avia-fullwidth-slider.logo-over-video::after {
position: absolute;
display: block;
content: “”;
width: 280px;
height: 120px;
top: 150px;
left: 100px;
background-image: url(https://www.thegatheringbarn.co.uk/wp-content/uploads/2025/03/Gathering-Barn-Banner-Logo-.png);
background-repeat: no-repeat;
background-size: 240px;
background-position:center center;
background-color: rgba(255,255,255,0.3);
backdrop-filter: blur(4px);
border-radius:20px;
}

Hello,

Thank you, yes it is still not working on front end after cache purge, tried different browsers, and I also tried it in incognito.

Specifically, if you check the homepage

The special headings are janky (moving roughly, happens on other pages too)

The animated number section doesnt work as intended anymore

The animations for the images are no longer working.

Hi Ismael

Yeah that’s what I thought but we were clearly getting issues with this approach and the buttons were showing over text. The only think that seemed to work was the spacer image forcing the button to move down.

It did not matter how large I made the padding or margins etc it did not fix the issue so that’s why I resorted to the spacer.

Due to time constraints I will leave the spacer image but revisit it to see if I can figure out what is going on.

Thanks for your help. When I revisit it I may need further assistance.

Lee

Hello

Sorry, the problem has gotten worse, the subject of the photo was even lower…
I have changed my picture for trying to have what I Want, but it’s not good
I don’t understand why the size of the model image (enfold gym) is 1500 x 720 and the actual height of the page banner is 420…
Could you tell me what size banner and settings I should make to have a nice banner? It’ll be easier :-).
I have another question you haven’t answered: the image is degraded, too much compression, how and where can I change this setting?

Thank you for your help.