Backbone Featured Image URL

Hi!

If you are using Backbone theme, within this theme you can find a lot of page templates you can use. One of them that is very interesting is magazine page template.

If at my previous post i’ve told you how to fix the missing post URL at the magazine slider, this time i’ll tell you how to fix the thumbnail post URL at the featured section.

Untitled

If you click on the images above, you are not redirected into the single post but into the full size of the image. To fix this problem you have to modify 2 files and also using 1 plugin to complete this task.

Step #1

At this first step you have to modify a file named functions.php. At this step you have to tell WordPress if you want to use a specific image size. Since the Backbone itself have an option to set a custom image size on the theme option, then we also have to put that variable into this new code.

Open the file and put this code before you saw this code: ?>

$width_featured = get_option( "colabs_magazine_f_w" ); 
$height_featured = get_option( "colabs_magazine_f_h" ); 

if ($width_featured == '') {
	$width_featured = 128;
}

if ($height_featured == '') {
	$height_featured = 128;
}

add_image_size( 'featured', $width_featured, $height_featured, true ); 
the_post_thumbnail('featured');

The variable $width_featured and $height_featured will be used to pull the height and width value you put at the theme dashboard (magazine settings).

The conditional code below is prepared in case you forget to put a value inside the option. The default value i put on this conditional code is 128 (which means 128 px).

And at least i’m using add_image_size with filter name filter.

Step #2

At this second step we will modify a file named loop-magazine.php. Open the file and find out this code:

echo ' » ';
colabs_image('width='.$colabs_options['colabs_magazine_f_w'].'&height='.$colabs_options['colabs_magazine_f_h'].'&class=thumbnail&play=true');

Edit the code become:

echo ' » ';
echo '<a href=" '. get_permalink( get_the_ID() ) .' ">' . get_the_post_thumbnail( $post_id, 'featured' ) . '</a>' ;

At the code above, i’m calling the filter featured and also adding the URL to the single post.

Once you done with those steps, you have to install a plugin named regenerate thumbnail. For each time you change the image size and also at the first time once you add this code, you have to regenerate the thumbnail.

You can access the plugin option at: WordPress dashboard > Tools > Regen. Thumbnail.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s