Viewing 4 replies - 1 through 4 (of 4 total)
  • Hi koc1000,

    You can use the plugin’s templating system to override the HTML markup for the image and link the image. You’ll want to add to your theme your own copy of the /content/image.php template. Currently that template looks like this:

    <img class="fdm-item-image" src="<?php echo esc_attr( $this->image ); ?>" title="<?php echo esc_attr( $this->title ); ?>" alt="<?php echo esc_attr( $this->title ); ?>">

    You can access the ID directly to get the thumbnail and full-size image and link it up like the Codex recommends:

    if ( has_post_thumbnail() ) {
    	$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $this->ID ), 'large' );
    	echo '<a href="' . $large_image_url[0] . '">';
    	echo get_the_post_thumbnail( $this->ID, 'thumbnail' );
    	echo '</a>';
    }

    I think this will make the image compatible with several lightbox plugins like Simple Lightbox. Alternatively, you can link to the image template file like this:

    echo '<a href="' . get_post_thumbnail_id( $this->ID ); . '">';
    echo get_the_post_thumbnail( $this->ID, 'thumbnail' );
    echo '</a>';

    I haven’t tested this code but it should work.

    Thread Starter koc1000

    (@koc1000)

    Thank you for your answer, but I’ll try your solution another time.

    Now I found a simpler solution using prettyPhoto plugin (https://www.ads-software.com/plugins/prettyphoto/).

    After installing the plugin modified the image.php file:

    now looks like this:

    <a href="<?php echo-esc_attr( $this> image);?> "rel =" prettyPhoto ">
    
    <img class = "fdm-item-image" src = "<? php echo esc_attr ($ this-> image);?>" title = "<? php echo esc_attr ($ this-> title);?>" alt = "<? php echo esc_attr ($ this-> title);?>">
    
    </a>

    For me, this works fine.

    Thread Starter koc1000

    (@koc1000)

    I do not know why but gave up some space in the code, during an copying.

    This is correct:

    <a href="<?php echo esc_attr( $this->image ); ?>" rel="prettyPhoto">
    
    <img class="fdm-item-image" src="<?php echo esc_attr( $this->image ); ?>" title="<?php echo esc_attr( $this->title ); ?>" alt="<?php echo esc_attr( $this->title ); ?>">
    
    </a>

    Great! Glad you were able to find a solution with prettyPhoto.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Menu item image preview (enlarge or view in lightbox)’ is closed to new replies.