WordPress.org

Ready to get started?Download WordPress

Forums

How to make featured images clickable? (5 posts)

  1. fuserka
    Member
    Posted 2 years ago #

    I would like to make the featured images clickable like the title and the 'Continue Reading' button. How can I do that.
    I am using the wp-clear 3 theme. Thanks!

    <li id="feature-post-<?php echo $count; ?>"<?php if ( has_tag('full-image') ) { ?> class="full-width"<?php }?>>
    
    					<?php if ( get_post_meta( $post->ID, 'video_embed', true ) ) { ?>
    					<div class="feature-video">
    						<div class="video"><?php echo get_post_meta( $post->ID, 'video_embed', true ); ?></div>
    					</div>
    					<?php } else { ?>
    
    					<?php if ( function_exists('get_the_image')) {
    						if (get_option('solostream_default_thumbs') == 'yes') { $defthumb = get_bloginfo('stylesheet_directory') . '/images/def-thumb.jpg'; } else { $defthumb == 'false'; }
    						$solostream_img = get_the_image(array(
    							'meta_key' => 'home_feature',
    							'size' => 'full',
    							'image_class' => 'home_feature',
    							'default_image' => $defthumb,
    							'format' => 'array',
    							'image_scan' => true,
    							'link_to_post' => false, ));
    						if ( $solostream_img['url'] && get_post_meta( $post->ID, 'remove_thumb', true ) != 'Yes' ) { ?>
    							<div class="feature-image">
    								<?php
    									$the_img_url = $solostream_img[url];
    									if(!empty($the_img_url)) { $the_img_url = get_network_image_path($the_img_url); }
    									if ( has_tag('full-image') ) { $width =  "630"; } else { $width =  "400"; }
    									if ( has_tag('full-image') ) { $height = "290"; } else { $height = "300"; }
    								?>
    								<img class="<?php echo $solostream_img['class']; ?>" src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $the_img_url; ?>&w=<?php echo $width; ?>&h=<?php echo $height; ?>&zc=1" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />
    							</div>
    					<?php } } } ?>
    
    	    				<div class="flex-caption">
    						<h2 class="post-title"><a href="<?php the_permalink() ?>" rel="<?php _e("bookmark", "solostream"); ?>" title="<?php _e("Permanent Link to", "solostream"); ?> <?php the_title(); ?>"><?php the_title(); ?></a></h2>
    						<?php the_excerpt(); ?>
    						<p class="readmore"><a class="more-link" href="<?php the_permalink() ?>" rel="nofollow" title="<?php _e("Permanent Link to", "solostream"); ?> <?php the_title(); ?>"><?php _e("Continue Reading", "solostream"); ?></a></p>
    					</div>
  2. wpismypuppet
    Member
    Posted 2 years ago #

    Wrap the <img> tag in the anchor tag as the title, or the 'Continue Reading':

    <a href="<?php the_permalink() ?>" rel="<?php _e("bookmark", "solostream"); ?>" title="<?php _e("Permanent Link to", "solostream"); ?><img class="<?php echo $solostream_img['class']; ?>" src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $the_img_url; ?>&w=<?php echo $width; ?>&h=<?php echo $height; ?>&zc=1" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /></a>

  3. fuserka
    Member
    Posted 2 years ago #

    Thanks wpismypuppet! I am a really beginner in coding, could you please be more interpreter where to paste this code?

  4. wpismypuppet
    Member
    Posted 2 years ago #

    Hmmm... the code you posted above... look for the line that reads:

    <img class="<?php echo $solostream_img['class']; ?>" src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $the_img_url; ?>&w=<?php echo $width; ?>&h=<?php echo $height; ?>&zc=1" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />

    and replace it with the code I wrote above.

  5. fuserka
    Member
    Posted 2 years ago #

    I've replaced the code, but unfortunately the pictures are disappeared. Any other solution? Thanks in advance

Topic Closed

This topic has been closed to new replies.

About this Topic