Current theme is set up to generate a thumbnail based on user input (variable height). I would like to have this thumbnail link to a full size featured image via prettyphoto. Current code calling generated thumb:
<?php
//if our user has a post thumbnail
//out featured image URL
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
?>
<?php if($src[0] != '') : //if user has featured image ?>
<img src="<?php echo ddTimthumb($src[0], $contentW, get_post_meta($post->ID, 'postThumbHeight', true)); ?>" alt="<?php the_title(); ?>" />
You can use this just modify the classes and other attributes according to your need.
<?php
if ( has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
echo '<a rel="prettyPhoto" href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
the_post_thumbnail();
echo '</a>';
}
?>
I am actually using this same thing in one of my project see the code link and see if that can help you :) and once again don't expect it to work by copy pasting this is just to give you an idea modify it to your needs :)
Link to pastebin for code sample (or see below)
<div class="row" id="gallery-main">
<?php $args = array(
'post_type' => 'portfolio',
'orderby' => 'menu_order',
'order' => 'ASC',
'posts_per_page' => -1,
);
query_posts($args); if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="span4 portfolio-item">
<?php
if ( has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
echo '<a class="image-link pi-img" rel="prettyPhoto" href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
the_post_thumbnail('portfolio-listing');
echo '<div class="hover-style"></div></a>';
}
?>
</div>
<?php endwhile;endif; ?>
<?php wp_reset_query(); ?>
</div>
Related
I am trying to get the image from a category but I cannot retrieve the image.
Today I already learned that I had to use
get_field('product', $term->taxonomy . '_' . $term->term_id);
to fetch content.
But when I use this same method to fetch an image URL from an ACF Field linked to my custom post type category, I do not recieve any values.
This is my code (the var_dump is included):
<?php
$args = array(
'post_type' => 'segments-overview',
'orderby' => 'date', // we will sort posts by date
);
$query = new WP_Query( $args );
$all_terms = [];
if( $query->have_posts() ) :
while( $query->have_posts() ): $query->the_post();
$terms = get_the_terms(get_the_ID(), 'category-segments-overview');
foreach($terms as $term) $all_terms[$term->term_id] = $term;
endwhile;
foreach($terms as $term):
?>
<div class="segments-card">
<div class="img">
<?php
$image = get_field('image', $term->taxonomy . '_' . $term->term_id);
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="content">
<div class="title"><?php echo $term->name; ?></div>
<!-- <?php print_r($term); ?> -->
<a class="button transparent" href="/segments/<?php echo $term->slug; ?>">
<?php echo __('View All','axia'); ?>
</a>
</div>
</div>
</div>
<?php endforeach;
wp_reset_postdata();
else :
?>
<div class="no-posts-found">
<h2>There were no items found</h2>
<h3>Please try a different search</h3>
</div>
<?php
endif;
?>
I use this var_dump to see if everything is fetched:
$image = get_field('image', $term->taxonomy . '_' . $term->term_id);
echo '<pre>';
echo "Image field value:";
var_dump($image);
echo "Category field value:";
var_dump($term);
echo '</pre>';
The only thing is that I do not get the value from my image in my category that is made in ACF.
You can simply get value by passing term object as second parameters.
$image = get_field('image', $term);
Check the docs here: https://www.advancedcustomfields.com/resources/adding-fields-taxonomy-term/
<?php $args = array(
'posts_per_page' => '12',
'product_cat' => 'summer',
'post_type' => 'product',
'orderby' => 'title',
);
echo '<div class="col-xs-12 col-sm-4 col-md-4">';
$query = new WP_Query( $args );
if( $query->have_posts()) : while( $query->have_posts() ) : $query->the_post();
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' );
echo '<div class="wrap valshow" style="background: url(.echo $src[0];. ) !important;" role="banner">';
echo '<figcaption><h3><a rel="' .get_permalink(). '" href="' .get_permalink(). ' ">';
the_title();
echo '</a></h3></figcaption>';
echo '</div>';
echo '</div>';
endwhile;
endif;
wp_reset_postdata();
?>
I am trying to assemble a query for woocommerce which shows the title which this does. I need to add a button which will also link to the product.
The issue I am trying to figure out is how to get the products feature image set as a background where I have it in the code above. I found some code which works in a normal loop. I have tried to use
the_post_thumbnail('full');
where i have echo $src[0]; but all I get is an image above the div and not as a background. I feel like I'm close... Any help would be great, Thanks.
you are using echo under echo
use this :
echo '<div class="wrap valshow" style="background: url(' . $src[0]; . ') !important;" role="banner">';
Also, if you are using the_post_thumbnail('full'); , it outputs the whole image tag.
I've created a custom theme and I'm using a template for a blog page. In my template I have a code that calls specific posts according to category. So far so good, problem is when post contains "read more". Link is active but when I click on it I only get an empty page instead of an whole article.
This is my code:
<?php
$args = array(
'category_name' => 'blog',
'post_type' => 'post',
'posts_per_page' => 10,
);
query_posts($args);
while (have_posts()) : the_post();?>
<?php global $more; $more = 0; ?>
<?php echo '<p class="date"><i class="fa fa-calendar"></i> ';
echo get_the_date();
echo '</p>';
echo '<h2>';
echo '<a class="permaLink" href="';
echo the_permalink();
echo'" title="';
echo the_title_attribute();
echo'">';
echo the_title();
echo '</a>';
echo '</h2>';
echo '<p class="posts">';
echo get_the_content('<br/><br/>Read more...');
echo '</p>';
echo '<hr/>'; ?>
<?php endwhile; ?>
Any help would be appreciated. Thanks
I recently tried the previous post and the next post button link. I do that with image in the left and right side of the site.Its working perfect.But i didn't know how to do this
For Example:
<div class="alignleftfp">
<?php next_post('%', '<img class="imgalign" src="' . WP_CONTENT_URL . '/uploads/1.png" alt="Next" /> ', 'no');
?>
</div>
<div class="alignrightfp">
<?php previous_post('%', '<img class="imgalign" src="' . WP_CONTENT_URL . '/uploads/1.png" alt="Next" /> ', 'no');
?>
</div>
Is it Possible to Show the Previous Post and Next Post Link with Under Title in every Bottom of the Post. Here is the Screenshot.
<nav id="nav-single">
<?php
$prev_post = get_previous_post();
$id = $prev_post->ID ;
$permalink = get_permalink( $id );
?>
<?php
$next_post = get_next_post();
$nid = $next_post->ID ;
$permalink = get_permalink($nid);
?>
<span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">←</span> Previous', 'twentyeleven' ) ); ?>
<h2><?php echo $prev_post->post_title; ?></h2>
</span>
<span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?>
<h2><?php echo $next_post->post_title; ?></h2>
</span>
</nav>
I hope you are using this code in single.php from where the whole of the post is displayed. For displaying the links (Next/Prev), you need to check the function.
get_template_part()
in the same file (Single.php of your theme). In my case function in single.php has been passes parameters like
<?php get_template_part( 'content-single', get_post_format() ); ?>
So, you will open the "content-single.php" according to the parameters specified in the function and paste the same code
<div class="alignleftfp">
<?php next_post('%', '<img class="imgalign" src="' . get_bloginfo('template_directory') . '/images/1.png" alt="Next" /> ', 'no');
?>
</div>
<?php previous_post('%', '<img class="imgalign" src="' . get_bloginfo('template_directory') . '/images/2.png" alt="Next" /> ', 'no');
?>
</div>
below <h1 class="entry-title"><?php the_title(); ?></h1>
I hope this will solve your problem.
I have a bit of a strange problem with my WP-query. I have a custom post type (portfolio), with a custom taxonomy called year. I have categories for each year, so what I want to do is display all posts for each year. The problem is, only 2012 works. Doesn't matter if I order the categories ASC/DESC - only 2012 works.
<section id="content">
<?php
$categories = get_categories('taxonomy=year&order=DESC');
foreach($categories as $category) : ?>
<article class="year">
<h2><?php echo $category->name ?></h2>
<div class="items">
<?php
$posts = get_posts('taxonomy=year&post_type=portfolio&year=' . $category->slug);
foreach($posts as $post) : ?>
<div class="item">
<?php
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" rel="lightbox[' . $category->slug . ']" >';
the_post_thumbnail('thumbnail');
echo '</a>';
?>
</div>
<?php endforeach; ?>
</div>
</article>
<?php
endforeach;
wp_reset_query();
?>
</section>
What am I doing wrong? To me, it seems right.. I've tried a bunch of different takes on this, everything from real querys to ridiculous sortings but I just can't get it right..
Thank you in advance!
I've solved it myself now, still not getting it 100% but it works at least.. There has got to be some smarter way of doing this, since im now looping trough all images for every term. Well, here's the code (get posts grouped by term from custom taxonomy).
<section id="content">
<?php
$categories = get_categories('taxonomy=year&order=DESC');
foreach($categories as $category) { ?>
<article class="year">
<h2><?php echo $category->name ?></h2>
<div class="items">
<?php
$args = array(
'post_type' => 'portfolio'
);
query_posts($args);
$count = 0;
while(have_posts()) : the_post();
$terms = get_the_terms( $post->ID, 'year' );
foreach ( $terms as $term ) {
$imgslug = $term->name;
}
if($imgslug == $category->name) {
if($count == 6) {
echo '<div class="expanded-items">';
}
?>
<div class="item">
<?php
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" rel="lightbox[' . $category->slug . ']" >';
the_post_thumbnail('thumbnail');
echo '</a>';
?>
</div>
<?php
}
$count++;
endwhile;
if($count >= 6) {
echo '</div>';
}
?>
</div>
<div class="expand">Visa fler</div>
</article>
<?php } ?>
</section>
That is with an expandable list, so it shows 6 from the start and then expands to show the rest of the items (jQuery).