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

None of the thumbnail sizes are working. I’ve tried all of them including square which is smaller than the ones you mentioned and none of them have any effect. I’ve cleared cache each time. User details in private content if you need to check.

Hello,

I have been troubleshooting the issue with images not displaying on the Work page of the Dark Enfold Theme. Here are the steps I’ve taken so far:

1. Checked the Enfold Theme Options under Performance and ensured that JS & CSS file merging and compression were disabled.
2. Verified that jQuery Migrate was not disabled.
3. Temporarily disabled plugins to test for conflicts.
4. Checked the browser console for JS errors.
5. Verified image paths, permissions, and gallery shortcode structure.
6. Disabled lazy load/compression from caching plugins.
7. Regenerated thumbnails using the Regenerate Thumbnails plugin.

Despite these efforts, the issue persists. Could you please provide further assistance or guidance on how to resolve this?

Thank you.

Hello Mike, Site isn’t live as it is in a staging environment. I use the Enfold DJ Demo as a foundation and the normal masonry gallery without any CSS tweaks. Excerpt text of masonry gallery is always inside the thumbnail, I’m just searching for a global Enfold-Solution to put it below the thumbnail.

• This reply was modified 1 week, 4 days ago by tribaleye13.

Thanks Mike, but to clarify, I can set my own conditions – as mentioned I’d like to HOOK into the logic and filter for when there’s only 1 image in the gallery.

Question: Is there an action hook or filter in the thumbnail area of the Portfolio code that I can tap into?

Hi I’ve added the code, regenerated thumbnails and cleared cache but it has had no effect.

I applied your CSS in the Enfold general styling quick CSS box and it worked nicely. Is there a way to apply this selectively when using this on a gallery? There may be times when I do want the thumbnails to appear under vs to the left.

If I go to a 1/1 page format then I would have to put the title on top of the photos instead of beside the gallery of images… Unless I use the Ajax feature which seems to allow for text content to appear to the left of the gallery. I’m not familiar with this option plus generally don’t like the formatting limitations and quirkyness within this text field area.

If I use your previously supplied CSS coding can I control the number of thumbnail columns with the gallery styling tools?

This page layout is a 1/3 left hand column for art title, specification and eventual description and 2/3 right hand column for gallery photos. Are you referring to the left column as a default sidebar? When creating the portfolio entry I did turn off the default sidebar there.

The question still stands “If I use a different percentage say 25% (for the large image) will the thumbnails stack (to the left) on top of one another, creating perhaps 2 columns wide over 5 rows tall?”

This solution makes the large image too small (non-impactful) for impressive portfolio use. If I use a different percentage say 25% will the thumbnails stack on top of one another, creating perhaps 2 columns wide over 5 rows tall?

Hey Mike

I appologize. I did not mean flip. I meant to change the single product main image for the first gallery image on hover.

So for the single product image. On hover change the main product image for the first gallery image.
+ To do so also for the thumbnails on the Shop and Archive pages.

Thanks.