Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Automatically adding link for an image as a custom field WordPress

  • SOLVED

Hello,

I am attempting to take custom field from recipe post and automatically insert the permalink into the image of the post.

As an example:

Recipe can be found here:

http://cblivedev4.com/articles/chef-erik%E2%80%99s-lamb-veggie-kabobs-with-mint-pesto


The page that uses custom fields is here

http://cblivedev4.com/recipe-test/recipe-test-g


The image of the first recipe clicks to the actual recipe. It seems to only be activated if you have

portfolio_item_link activated, but then you must add the link, which is cumbersome.

Is there an easier way?

<?php
/**
* @package WordPress
* @subpackage U-Design
*/
/**
* Template Name: Portfolio page 4 Columns
*/

get_header();

global $post;
// get the page id outside the loop (check if WPML plugin is installed and use the WPML way of getting the page ID in the current language)
$page_id = ( function_exists('icl_object_id') && function_exists('icl_get_default_language') ) ? icl_object_id($post->ID, 'page', true, icl_get_default_language()) : $post->ID;
$portfolio_cat_ID = $udesign_options['portfolio_cat_for_page_'.$page_id]; // Get the portfolio category specified by the user in the 'U-Design Options' page
$current_categoryID = $_GET['cat'];
$categories = get_categories( 'child_of='.$portfolio_cat_ID );
$query_string_prefix = ( get_option('permalink_structure') != '' ) ? '?' : '&amp;';
if ( preg_match( '/\?/', get_permalink() ) ) $query_string_prefix = '&amp;';
$portfolio_items_per_page = $udesign_options['portfolio_items_per_page_for_page_'.$page_id];
$portfolio_do_not_link_adjacent_items = $udesign_options['portfolio_do_not_link_adjacent_items_'.$page_id];
$portfolio_title_posistion = $udesign_options['portfolio_title_posistion'];

?>

<div id="content-container" class="container_24">
<div id="main-content" class="grid_24">
<div class="main-content-padding">

<?php // BEGIN the actual page content here...
if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post portfolio-page" id="post-<?php the_ID(); ?>">
<?php if ( get_the_content() ) : ?>
<div class="entry">
<?php the_content(__('<p class="serif">Read the rest of this page &raquo;</p>', 'udesign'));
wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
<?php endif; ?>
</div>
<?php endwhile; endif; ?>


<?php
// Check if a category has been assigned as Portfolio section
if( $portfolio_cat_ID ) :
if ( $categories ) : ?>
<div id="category-links" class="grid_22">
<ul>
<li><?php esc_html_e('Categories', 'udesign'); ?>: &nbsp;&nbsp;&nbsp;</li>
<?php // Generate the link to "All" categories:
if ( $current_categoryID ) : ?>
<li><a href="<?php echo the_permalink(); ?>"><?php esc_html_e('All', 'udesign'); ?></a></li>
<?php else : ?>
<li><a href="<?php echo the_permalink(); ?>" class="current"><?php esc_html_e('All', 'udesign'); ?></a></li>
<?php endif;
// Generate the link to the rest of categories:
foreach( $categories as $category ) :
if ( $current_categoryID == $category->cat_ID ) : ?>
<li><a href="<?php echo the_permalink().$query_string_prefix.'cat='.$category->cat_ID; ?>" class="current"><?php echo $category->cat_name; ?></a></li>
<?php else : ?>
<li><a href="<?php echo the_permalink().$query_string_prefix.'cat='.$category->cat_ID; ?>"><?php echo $category->cat_name; ?></a></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</div><!-- end category-links -->
<?php endif;

if ( !$current_categoryID )
$current_categoryID = $portfolio_cat_ID;

//adhere to paging rules//adhere to paging rules
if ( get_query_var('paged') ) {
$paged = get_query_var('paged');
} elseif ( get_query_var('page') ) { // applies when this page template is used as a static homepage in WP3+
$paged = get_query_var('page');
} else {
$paged = 1;
}
// Switch the focus to the chosen portfolio category and its subcategories
query_posts( array(
'cat' => $current_categoryID,
'posts_per_page' => $portfolio_items_per_page,
'paged' => $paged
)
);

// start Portfolio items' loop ?>
<div class="clear"></div>
<div class="portfolio-items-wrapper">
<?php $counter = 0;
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<div class="one_fourth<?php echo ( ++$counter == 4 )?' last_column':''; ?>">
<?php if( $portfolio_title_posistion == 'above' ): ?>
<h2><?php the_title(); ?></h2>
<?php endif; ?>
<div class="thumb-holder-4-col pngfix">
<div class="portfolio-img-thumb-4-col">
<span class="portfolio-zoom-image-4-col pngfix"></span>
<a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>" </a>
<?php // Get Portfolio Item Thumbnail
get_portfolio_item_thumbnail( '4', '176', '116', $portfolio_do_not_link_adjacent_items, true ); ?>

</div><!-- end portfolio-img-thumb-4-col -->
</div><!-- end thumb-holder-4-col -->

<?php $portfolio_item_description = get_post_meta($post->ID, 'portfolio_item_description', true);
if ( $portfolio_item_description ) :
if( $portfolio_title_posistion == 'below' ): ?>
<h2><?php the_title(); ?></h2>
<?php endif; ?>
<div class="clear"></div>
<?php echo do_shortcode( __($portfolio_item_description) ); ?>
<a class="pngfix small-dark-button align-btn-right" href="<?php the_permalink(); ?>" title="Cool Button"><span class="pngfix">Read More...</span></a>
<?php endif; ?>

</div><!-- end one_fourth -->
<?php if ( $counter == 4 ) : ?>
<div class='clear'> </div>
<?php $counter = 0;
endif;

endwhile; ?>

<div id="paginationPortfolio" class="grid_23">
<?php // Pagination
if(function_exists('wp_pagenavi')) :
wp_pagenavi();
else : ?>
<div class="navigation">
<div class="alignleft"><?php previous_posts_link() ?></div>
<div class="alignright"><?php next_posts_link() ?></div>
</div>
<?php endif; ?>
</div>
<?php endif;
//Reset Query
wp_reset_query();
// end Portfolio items' loop ?>
</div><!-- end portfolio-items-wrapper -->
<?php
else : ?>
<div class="grid_22 prefix_1 suffix_1">
<h2><?php esc_html_e('Portfolio section for this page has not been found!', 'udesign'); ?></h2>
<p><?php _e("<strong>Reason:</strong> No category has been assigned as Portfolio section for this page yet. In order to fix this, go to the theme's options page and assign a category for this page.", 'udesign'); ?></p>
</div>
<?php
endif; ?>

<div class="clear"></div>
<?php edit_post_link(esc_html__('Edit this entry.', 'udesign'), '<p class="editLink">', '</p>'); ?>

</div><!-- end main-content-padding -->
</div><!-- end main-content -->
</div><!-- end content-container -->

<div class="clear"></div>

<?php

get_footer();

2011-11-17 by Greg Ellett

Answers (2)

2011-11-17

John Cotton answers:

So you want all the images to link through to the post (like the first one does) <em>not</em> pop up a box with other thumbnails - is that correct?

It's not possible to see precisely how it's done from the code you've posted, but my guess is that there is some javascript that matches the 'rel="wp-prettyPhoto[portfolio]"' attribute on the image and then intercepts the default click-through behaviour to pop up the box.

So you could change that by:

a) Editing the get_portfolio_item_thumbnail function in your theme to just remove the rel attribute altogether;
b) Filtering the return value of get_portfolio_item_thumbnail to remove the rel attribute;
c) Disabling the javascript from running (just remove the script).

I would suggest (a) since that will give you more control (though it has the drawback that if the theme is updated, your new code will get overwritten).

Can you post the contents of that function and I will tell you what to change?

JC

Greg Ellett comments:

I believe this is the function

// Determine whether WP-prettyPhoto plugin is acivated and assign the result to a constant
defined('WP_PRETTY_PHOTO_PLUGIN_ACTIVE')
|| define('WP_PRETTY_PHOTO_PLUGIN_ACTIVE', class_exists( 'WP_prettyPhoto' ) );


// if the WP-prettyPhoto plugin is not active handle rel="wp-prettyPhoto" in links for the prettyPhoto integrated script (if enabled)
if ( !WP_PRETTY_PHOTO_PLUGIN_ACTIVE && ( $udesign_options['enable_prettyPhoto_script'] == 'yes' ) ) {
/**
* Insert rel="wp-prettyPhoto" to all links for images, movie, YouTube and iFrame.
* This function will ignore links where you have manually entered your own rel reference.
* @param string $content Post/page contents
* @return string Prettified post/page contents
* @link http://0xtc.com/2008/05/27/auto-lightbox-function.xhtml
* @access public
*/
function autoinsert_rel_prettyPhoto ($content) {
global $post;
$rel = 'wp-prettyPhoto';
$image_match = '\.bmp|\.gif|\.jpg|\.jpeg|\.png';
$movie_match = '\.mov.*?';
$swf_match = '\.swf.*?';
$youtube_match = 'http:\/\/www\.youtube\.com\/watch\?v=[A-Za-z0-9]*';
$iframe_match = '.*iframe=true.*';
$pattern[0] = "/<a(.*?)href=('|\")([A-Za-z0-9\/_\.\~\:-]*?)(".$image_match."|".$movie_match."|".$swf_match."|".$youtube_match."|".$iframe_match.")('|\")([^\>]*?)>/i";
$pattern[1] = "/<a(.*?)href=('|\")([A-Za-z0-9\/_\.\~\:-]*?)(".$image_match."|".$movie_match."|".$swf_match."|".$youtube_match."|".$iframe_match.")('|\")(.*?)(rel=('|\")".$rel."(.*?)('|\"))([ \t\r\n\v\f]*?)((rel=('|\")".$rel."(.*?)('|\"))?)([ \t\r\n\v\f]?)([^\>]*?)>/i";
$replacement[0] = '<a$1href=$2$3$4$5$6 rel="'.$rel.'['.$post->ID.']">';
$replacement[1] = '<a$1href=$2$3$4$5$6$7>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'autoinsert_rel_prettyPhoto');
add_filter('the_excerpt', 'autoinsert_rel_prettyPhoto');


// Add the 'wp-prettyPhoto' rel attribute to the default WP gallery links
function gallery_prettyPhoto ($content) {
// add checks if you want to add prettyPhoto on certain places (archives etc).
return str_replace("<a", "<a rel='wp-prettyPhoto[gallery]'", $content);
}
add_filter( 'wp_get_attachment_link', 'gallery_prettyPhoto');
}

John Cotton comments:

For now, comment out the last line, i.e.

// add_filter( 'wp_get_attachment_link', 'gallery_prettyPhoto');

Does that have the desired effect?

Greg Ellett comments:

no, but.

according the doc for the theme. portfolio_item_link must be in the custom field. If I blank our the literal reference, then it needs a value.

If I delete it, then it is resolving like it is now.

John Cotton comments:

OK, ignore my last answer - it's late and I'm tired.

But you're wanting the photo to link to the recipe page, right?

Try replacing this code:


<a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>" </a>

<?php // Get Portfolio Item Thumbnail
get_portfolio_item_thumbnail( '4', '176', '116', $portfolio_do_not_link_adjacent_items, true ); ?>



with this: (by the way, that first line above has an error in it - the </a> closes an open tag! - but I'm not sure what it's meant to be...)


<a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( array(176,116), array( 'class' => 'link_photo' ) ); ?>
</a>


You might need to do some css styling to make it match what you've got, but you can use that link_photo class (or replace with an existing one that will do the job).





Greg Ellett comments:

Thanks, works like a charm!

2011-11-17

Luis Abarca answers:

i dont understand, you need a link in the image in this page ?

http://cblivedev4.com/articles/chef-erik%E2%80%99s-lamb-veggie-kabobs-with-mint-pesto

Greg Ellett comments:

That is correct