Simple Lightbox Integration

  • Resolved socialpays

    (@socialpays)


    4 years, 1 month ago

    Hi,

    I hope someone can help. I am trying to integrate the Simple Lightbox into my posts page so that the thumbnails open up in the lightbox but have no clue where to input the relevant code.

    I did find this code to use which I added to the page and even though it did work it created double images on my page:

    // Link post thumbnail to full-size image.
    if ( has_post_thumbnail() ) {
    $thumbnail = [
    // URI of full-size post thumbnail image.
    ‘uri’ => get_the_post_thumbnail_url( null, ‘full’ ),
    // HTML to display post thumbnail.
    ‘img’ => get_the_post_thumbnail(),
    ];
    // Build thumbnail link.
    $thumbnail[‘link’] = sprintf( ‘%s‘, esc_attr( $thumbnail[‘uri’] ), $thumbnail[‘img’] );

    // Display full-size image in lightbox when clicked.
    if ( function_exists( ‘slb_activate’ ) ) {
    $thumbnail[‘link’] = slb_activate( $thumbnail[‘link’] );
    }

    // Display post thumbnail.
    echo $thumbnail[‘link’];
    }

    This is the code from my posts page. Does anyone know how I can implement this code above into my code below?

    ——————————————————————————-
    <div class=”featured-thumb-video”></div>
    <?php } ?>

    <?php
    $is_gallery = count($images) > 1;
    $imgsrc = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), ‘large’);

    if ($imgsrc[0] == ”) {
    $imgsrc[0] = get_template_directory_uri() . ‘/img/blank.gif’;
    $imgsrc[1] = get_option(‘medium_size_w’);
    $imgsrc[2] = get_option(‘medium_size_w’);
    } else if ($imgsrc[1] <= 1 && $imgsrc[2] <= 1){
    $thumbid = get_post_thumbnail_id($post->ID);
    $size = getimagesize($imgsrc[0]);
    $imgsrc[1] = $size[0];
    $imgsrc[2] = $size[1];
    }

    //if is animated gif
    $animated_gif = false;
    if (substr($imgsrc[0], -4) == ‘.gif’ && get_post_meta(get_post_thumbnail_id($post->ID), ‘a_gif’, true) == ‘yes’) {
    $animated_gif = true;
    $animated_gif_imgsrc_full = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), ‘full’);
    echo ‘<div class=”featured-thumb-gif”></div>’;

    }

    //if need resize
    if ($post_video && strpos($post_video, ‘data-resize’) !== false) {
    $imgsrc[1] = get_option(‘medium_size_w’);
    $imgsrc[2] = round(get_option(‘medium_size_w’)/1.77);
    }
    ?>
    <?php if ($is_gallery): ?>
    <span class=”gallery-indicator”></span>
    <?php endif;?>
    ” src=”<?php echo $imgsrc[0]; ?>” alt=”<?php echo mb_strimwidth(the_title_attribute(‘echo=0’), 0, 100, ‘ …’); ?>” style=”width:<?php echo $imgsrc[1]; ?>px;height:<?php echo $imgsrc[2]; ?>px” />

    ————————————————————–

    Thank you very much for your time.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Archetyped

    (@archetyped)

    Hi, the code you provided appears to be incomplete. Please post your template code as per the support forum’s FAQ on posting code examples to ensure it can be fully evaluated.

    Thanks.

    Thread Starter socialpays

    (@socialpays)

    Hi,

    Thanks for your reply. Sorry. I am a newbie. I just need to know how to incorporate SLB into my website. Here is the code for the relevant page:

    <?php global $wp_taxonomies; ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('thumb'); ?>>
	<div class="thumb-holder">

		<a class="featured-thumb-link" href="<?php the_permalink(); ?>" <?php $bgcolor = get_post_meta($post->ID, '_Bg Color', true); if ($bgcolor) echo 'style="background-color: rgba(' . $bgcolor . ',0.5)"'; ?>>
			<?php if (of_get_option('price_currency') != '' && pinc_get_post_price() != '') { ?>
				<div class="pricewrapper"><div class="pricewrapper-inner"><span><?php echo pinc_get_post_price(); ?></span></div></div>
			<?php }	?>

			<?php
			//if is video
			$photo_source = get_post_meta($post->ID, "_Photo Source", true);
			$post_video = pinc_get_post_video($photo_source);
			
			if (!isset($pin_id)) {
				$pin_id = $post->ID;
			}
			$images = get_attached_media('image', $pin_id);
			$videos = get_attached_media('video', $pin_id);
			
			if ($post_video || !empty($videos)) {
			?>

			<div class="featured-thumb-video"></div>
			<?php } ?>

			<?php

			$is_gallery = count($images) > 1;
			

				$imgsrc = wp_get_attachment_image_src(get_post_thumbnail_id ($post->ID), 'large');
				
				
			
			if ($imgsrc[0] == '') {
				$imgsrc[0] = get_template_directory_uri() . '/img/blank.gif';
				$imgsrc[1] = get_option('medium_size_w');
				$imgsrc[2] = get_option('medium_size_w');
			} else if ($imgsrc[1] <= 1 && $imgsrc[2] <= 1){
				$thumbid = get_post_thumbnail_id($post->ID);
				$size = getimagesize($imgsrc[0]);
				$imgsrc[1] = $size[0];
				$imgsrc[2] = $size[1];
			}

			//if is animated gif
			$animated_gif = false;
			if (substr($imgsrc[0], -4) == '.gif' && get_post_meta(get_post_thumbnail_id($post->ID), 'a_gif', true) == 'yes') {
					$animated_gif = true;
					$animated_gif_imgsrc_full = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
					echo '<div class="featured-thumb-gif"></div>';

			}

			//if need resize
			if ($post_video && strpos($post_video, 'data-resize') !== false) {
				$imgsrc[1] = get_option('medium_size_w');
				$imgsrc[2] = round(get_option('medium_size_w')/1.77);
			}
			?>
			<?php if ($is_gallery): ?>
				<span class="gallery-indicator"></span>
			<?php endif;?>
			<img class="featured-thumb<?php if ($animated_gif) echo ' featured-thumb-gif-class" data-animated-gif-src-medium="' . $imgsrc[0] . '" data-animated-gif-src-full="' . $animated_gif_imgsrc_full[0]; ?>" src="<?php echo $imgsrc[0]; ?>" alt="<?php echo mb_strimwidth(the_title_attribute('echo=0'), 0, 100, ' ...'); ?>" style="width:<?php echo $imgsrc[1]; ?>px;height:<?php echo $imgsrc[2]; ?>px" />
		</a>

		<?php if ($post->post_status != 'pending') { ?>
			<div class="masonry-actionbar">
				<?php if (current_user_can('administrator') || current_user_can('editor') || current_user_can('author') || !is_user_logged_in()) { ?>
					<button id="pinc-repin-<?php echo $post->ID; ?>" class="pinc-repin btn btn-default btn-sm" data-post_id="<?php echo $post->ID ?>" type="button"><i class="fa fa-retweet fa-lg"></i></button>
				<?php } ?>

				<?php if ($post->post_author != $user_ID) { ?>
					<span class="undisable_buttons">
						<button id="pinc-like-<?php echo $post->ID; ?>" class="pinc-like btn btn-default btn-sm<?php if(pinc_liked($post->ID)) { echo ' disabled'; } ?>" data-post_id="<?php echo $post->ID ?>" data-post_author="<?php echo $post->post_author; ?>" type="button"><i class="fa fa-heart fa-lg"></i></button>
					</span>
				<?php } else { ?>
					<a id="pinc-edit-<?php echo $post->ID; ?>" class="pinc-edit-actionbar btn btn-default btn-sm" href="<?php echo home_url('/itm-settings/'); ?>?i=<?php the_ID(); ?>"><i class="fa fa-pencil fa-lg"></i></a>
				<?php } ?>

				<span class="undisable_buttons">
					<button id="pinc-comment-<?php echo $post->ID; ?>" class="pinc-comment btn btn-default btn-sm" data-post_id="<?php echo $post->ID ?>" type="button"><i class="fa fa-comment fa-lg"></i></button>
				</span>
			</div>
		<?php } ?>

		<?php
		$tags = '';
		if (of_get_option('posttags') == 'enable') {
			$the_tags = get_the_tags();
			if ($the_tags) {
				foreach($the_tags as $the_tag) {
					$tags .= $the_tag->name . ', ';
				}
				$tags = substr($tags, 0, -2);
			}
		}
		?>
		
		
		
		<center><div class="post-actionbar">
										<?php if ($post->post_status == 'publish' && (current_user_can('administrator') || current_user_can('editor') || current_user_can('author') || !is_user_logged_in())) { ?>
						

										<span class="post-action-button">
											<a class="pinc-repin btn btn-success" data-post_id="<?php echo $post->ID ?>" rel="tooltip" title="<?php _e('Repin', 'pinc'); ?>" data-placement="bottom"><i class="fa fa-retweet fa-fw"></i><span id="button-repins-count"><?php if ($post_repins_count > 0) echo '&nbsp; ' . $post_repins_count; ?></span></a>
										</span>
										
										<?php } ?>

										
										<?php if (!$post_video) { ?>

											<a class="btn btn-default"><?php echo do_shortcode('[epvc_views]') ?></a>
										</span>
										<?php } ?>

										<?php if ($photo_source != '') { ?>
											<a class="btn btn-default" href="<?php echo $photo_source; ?>" target="_blank" rel="nofollow"><img src="https://www.google.com/s2/favicons?domain=<?php echo $photo_source; ?>" alt="" /> <?php echo $photo_source_domain; ?></a>
										</span>
										<?php } ?>
										
										<div class="clearfix"></div>
										
									</div>
		
				<div class="post-title" data-title="<?php echo esc_attr($post->post_title); ?>" data-tags="<?php echo esc_attr($tags); ?>" data-price="<?php echo esc_attr(pinc_get_post_price(false)); ?>" data-content="<?php echo esc_attr($post->post_content); ?>">
			<?php
			if ($post->post_status == 'pending') {
				echo '<p><span class="label label-warning">' . __('Pending Review', 'pinc') . '</span></p>';
			}

			echo mb_strimwidth(the_title_attribute('echo=0'), 0, 51, ' ...');
			

			
			if ($the_tags) {
				echo '<div class="thetags">';

				foreach($the_tags as $the_tag) {
					echo '<a href="' . get_tag_link($the_tag->term_id). '">' . $the_tag->name . '</a> ';
				}

				echo '</div>';
			}
		
			?>
		</div>
	</div>
	<a class="featured-thumb-link" href="<?php the_permalink(); ?>" <?php $bgcolor = get_post_meta($post->ID, '_Bg Color', true); if ($bgcolor) echo 'style="background-color: rgba(' . $bgcolor . ',0.5)"'; ?>><div class="readmore"><svg class="readmore" height="12" width="12" viewBox="0 0 24 24" aria-hidden="true" aria-label="" role="img"><path d="M12 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3M3 9c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm18 0c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"></path></svg></div></a>

	<?php
	$likes_number = get_post_meta($post->ID, '_Likes Count', true);
	$repins_number = get_post_meta($post->ID, '_Repin Count', true);
	$comments_number = get_comments_number();
	?>
	<div class="masonry-meta masonry-meta-comment-likes">
	<?php
		if ($repins_number == '' || $repins_number == '0') {
			echo '<span id="repins-count-' . $post->ID . '" class="repins-count hide"></span>';'</span>';
		} else {
			echo '<span id="repins-count-' . $post->ID . '" class="repins-count"><i class="fa fa-retweet"></i> ' . $repins_number . '</span>';
		}

		if ($likes_number == '' || $likes_number == '0') {
			echo '<span id="likes-count-' . $post->ID . '" class="likes-count hide"></span>';
		} else {
			echo '<span id="likes-count-' . $post->ID . '" class="likes-count"><i class="fa fa-heart"></i> ' . $likes_number . '</span>';
		}

		if ($comments_number == '0') {
			echo '<span id="comments-count-' . $post->ID . '" class="comments-count hide"></span>';
		} else {
			echo '<span id="comments-count-' . $post->ID . '" class="comments-count"><i class="fa fa-comment"></i> ' . $comments_number . '</span>';
		}
	?>
	</div>

	<div class="masonry-meta">
		<div class="masonry-meta-avatar"><a href="<?php echo home_url('/' . $wp_rewrite->author_base . '/') . get_the_author_meta('user_nicename'); ?>/"><?php echo get_avatar(get_the_author_meta('ID') , '30'); ?></a></div>
		<div class="masonry-meta-comment">
			<div class="masonry-meta-author"><a href="<?php echo home_url('/' . $wp_rewrite->author_base . '/') . get_the_author_meta('user_nicename'); ?>/"><?php echo get_the_author_meta('display_name'); ?></a></div>
			<?php if (pinc_get_post_board()) { ?>
				<div class="masonry-meta-content"><a href="<?php echo home_url('/' . $wp_taxonomies["board"]->rewrite['slug'] . '/' . sanitize_title(pinc_get_post_board()->name, '_') . '/' . pinc_get_post_board()->term_id . '/'); ?>"><?php echo pinc_get_post_board()->name; ?></a></div>
			<?php }	?>
		</div>
	</div>

	<?php
	if ('0' != $frontpage_comments_number = of_get_option('frontpage_comments_number')) {
	?>
	<div id="masonry-meta-comment-wrapper-<?php echo $post->ID; ?>" class="masonry-post-comments">
	<?php
		if ($comments_number >  $frontpage_comments_number) {
			$offset = $comments_number - $frontpage_comments_number;
		} else {
			$offset = 0;
		}

		$args = array(
			'number' => $frontpage_comments_number,
			'post_id' => $post->ID,
			'order' => 'asc',
			'offset' => $offset,
			'status' => 'approve'
		);
		$comments = get_comments($args);
		foreach($comments as $comment) {
		?>
		<div class="masonry-meta">
			<?php $comment_author = get_user_by('id', $comment->user_id); ?>
			<div class="masonry-meta-avatar">
				<?php if ($comment_author) { ?>
					<a href="<?php echo home_url('/' . $wp_rewrite->author_base . '/') . $comment_author->user_nicename; ?>/">
				<?php } ?>

				<?php echo get_avatar($comment->user_id, '30'); ?>

				<?php if ($comment_author) { ?>
					</a>
				<?php } ?>
			</div>
			<div class="masonry-meta-comment" id="masonry-comment-<?php echo $comment->comment_ID;?>">
				<?php if ($comment->user_id == get_current_user_id()) :?>
				<div class="pull-right">
					<a href="" class="comment-edit-link" comment-id="<?php echo $comment->comment_ID;?>"><?php echo __( 'Edit' );?></a>
				</div>
				<?php endif;?>
				<span class="masonry-meta-author">
					<?php if ($comment_author) { ?>
						<a href="<?php echo home_url('/' . $wp_rewrite->author_base . '/') . $comment_author->user_nicename; ?>/">
					<?php } ?>

					<?php echo $comment->comment_author; ?>

					<?php if ($comment_author) { ?>
						</a>
					<?php } ?>
				</span>
				<span class="masonry-meta-comment-content"><?php echo mb_strimwidth(strip_tags($comment->comment_content), 0, 95, '...'); ?></span>
			</div>
		</div>
		<?php
		}
		?>
		</div>
	<?php
	}

	if (is_user_logged_in()) {
	?>
	<div id="masonry-meta-commentform-<?php echo $post->ID ?>" class="masonry-meta hide">
		<div class="masonry-meta-avatar"><?php echo get_avatar($user_ID, '30'); ?></div>
		<div class="masonry-meta-comment">
		<?php
		$id_form = 'commentform-' . $post->ID;
		$id_submit = 'submit-' . $post->ID;

		comment_form(array(
			'id_form' => $id_form,
			'id_submit' => $id_submit,
			'title_reply' => '',
			'cancel_reply_link' => __('X Cancel reply', 'pinc'),
			'comment_notes_before' => '',
			'comment_notes_after' => '',
			'logged_in_as' => '',
			'label_submit' => __('Post Comment', 'pinc'),
			'comment_field' => '<textarea class="form-control" placeholder="' . __('Add a comment...', 'pinc') . '" name="comment" aria-required="true"></textarea>'
		));
		?>
		</div>
	</div>
	<?php } ?>
</div>
    Plugin Author Archetyped

    (@archetyped)

    Hi, it looks like replacing the existing thumbnail link in your template (the link starting with <a class="featured-thumb-link"… in the <div class="thumb-holder"> element) with the Post thumbnail example from SLB’s documentation will do what you want.

    Note that you may need to add in CSS classes/ids from the template code that you are replacing to match the existing styles, though its difficult to say for sure without seeing the full theme itself.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Simple Lightbox Integration’ is closed to new replies.