I want to add thumbnails in the post in front page. But don't know how to do it. My theme do not support custom_field. one of the category's code is I pasted here.......
<div class="featured">
<h2>HEADLINES</h2>
<!--This is where the thumbnails are found for the homepage bottom section - note the custom field name for this image is "thumbnail". Recommended image size is 70x70, as the stylesheet is written for this size.-->
<?php $recent = new WP_Query("cat=3&showposts=3");
while($recent->have_posts()) : $recent->the_post();?>
<?php the_post_thumbnail(); ?>
<?php if( get_post_meta($post->ID, "thumbnail", true) ): ?>
<imgstyle="float:left;margin:0px 10px 0px 0px;" src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" alt="alt text" />
<?php else: ?>
<imgstyle="float:left;margin:0px 10px 0px 0px;" src="<?php bloginfo('template_url'); ?>/images/thumbnail.jp" alt="Default thumbnail" />
<?php endif; ?>
<b><a href="<?php the_permalink() ?>" ><?php the_title(); ?></a></b>
<?php the_content_limit(80, ""); ?>
<div style="border-bottom:1px dotted #AFAFAF; margin-bottom:10px; padding:0px 0px 10px 0px; clear:both;"></div>
<?php endwhile; ?>
I rename the extension jpg to jp coz stackoverflow donot allow me to add image. I also changed
Prior to WordPress 2.9, thumbnails had to be custom fields. Since then, native support has been added.
Read about it on the Codex: http://codex.wordpress.org/Post_Thumbnails
In a nutshell, add this to your theme's functions.php file:
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
}
Then, add this to your theme where you want the thumbnail to appear:
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
You can try this one.
http://wordpress.org/extend/plugins/wp-post-thumbnail
I didn't test it though. Thanks
Related
I have created a gallery field group in ACF as seen in the image below.
To display this on my wordpress page I have added the following code to the php file.
<?php
$images = get_field('employee_testimonial_gallery');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
<p><?php echo $image['caption']; ?></p>
</li>
<?php endforeach; ?>
</ul>
However the end result is displaying as a list
and I need the images to display as a grid like below
I've read all the documentation on ACF and it seems to be a general issue. TIA.
Add the following css to list it as like grid. Before start just add a class to your output html markup.
<ul class="gal-grid">
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
<p><?php echo $image['caption']; ?></p>
</li>
<?php endforeach; ?>
</ul>
Then after this markup changes apply bellow css,
ul.gal-grid li{
display: inline-block;
float: left;
margin: 0 10px 0 0;
}
ul.gal-grid li:last-child{
margin-right: 0 !important;
}
I'm working on a child theme from twentythirteen.
Twentythirteen has support fro thumbnails:
add_theme_support( 'post-thumbnails' );
But when I use:
the_post_thumbnail_url()
I get a fatal error.
All the google answers say that add_theme_support( 'post-thumbnails' ) has to be in the parent theme functions.php, well, in this case it is there but I'm getting the fatal error anyway.
I have even duplicated the support sentence in the child functions.php (just in case) but still in trouble with this.
The code:
query_posts('category_name=curso&showposts=3');
?>
<?php if (have_posts()) : ?>
<h2>Cursos</h2>
<?php while ( have_posts() ) : the_post(); ?>
<div class = "ficha curso">
<?php
if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<div class="ficha-thumbnail" style = "background: url('<?php the_post_thumbnail_url('large'); ?>') no-repeat; background-size: 300px auto"></div>
<?php endif; ?>
<h3 class="ficha-title"><?php the_title(); ?></h3>
<div class="ficha-resumen">
<?php the_excerpt(); ?>
</div><!-- .entry-content -->
</div>
<?php endwhile; endif;
Try this Logic if it does anything for you:
<?php
if ( has_post_thumbnail() && ! post_password_required() ) :
$imgURL = wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) );
?>
<div class="ficha-thumbnail" style = "background: url('<?php echo $imgURL; ?>') no-repeat; background-size: 300px auto"></div>
<?php endif; ?>
Hope this does the trick for you... ;-)
With the excellent help of Poiz I have finally found a solution. The one suggested by him works, but I needed to get the large thumbnail rather than the attachment.
This is doing the trick for me:
<?
if ( has_post_thumbnail() && ! post_password_required() ) :
$imgURL = the_post_thumbnail(get_the_ID(), 'large');
preg_match('/src="([^"]+)/i',$imgURL, $src);
?>
<div class="ficha-thumbnail" style = "background: url('<?php echo $src; ?>') no-repeat; background-size: 300px auto">
I will mark Poiz answer as the correct one as he deserves the reputation.
Have you tried removing single quotation marks around php tags in your markup? It seems like these are the source of a parsing problem.
background: url(<?php the_post_thumbnail_url('large'); ?>)
You might like this simple function to do the job.
function getImage($id, $size){
if(has_post_thumbnail()){
return wp_get_attachment_image_src(get_post_thumbnail_id($id), $size)[0];
}
return false;
}
It checks if there is a post thumbnail, if there is it looks for the post thumbnail ID, and then using the $size and wp_get_attachement_image_src's first part of the answer (the src) the response.
I was able to retrieve the post featured image url with the following:
wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );
So I know masonry in a single column has been covered a few times on stack but I'm not very familiar with jquery and I'm not sure of the adjustments I need to make. I'm also not extremely proficient in wordpress to know if I am making an obvious mistake here. I'm editing a theme and I'm trying to make the blog use a masonry layout. The theme calls the post loop from it's own php file so the blog is kind of broken up in to several php files. I hope I am including the right info.
The posts are showing up in blocks but it's just one column straight down. It seems the container is going all the way across the page on each post. I'm not sure if it's not stopping the loop or what I need to add so that each post spreads across the container width. Any help or tips on what I am doing wrong would be greatly appreciated. Thanks in advance.
I added this to my functions.
function wdv_enqueue_scripts() {
wp_enqueue_script( 'jquery-masonry' ); // adds masonry to the theme
}
add_action( 'wp_enqueue_scripts', 'wdv_enqueue_scripts' );
This to my footer.php
<script>
jQuery( document ).ready( function( $ ) {
$( '#container2' ).masonry( { columnWidth: 220 } );
} );
</script>
Here is my code for the loop.
<div id="container2">
<?php
global $ae_post_factory;
$ae_post = $ae_post_factory->get('post');
$post = $ae_post->current_post;
?>
<div class="brick">
<div class="brick_header">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" >
<h4 class="media-heading title-blog"><?php the_title(); ?></h4>
</a>
</div>
<div class="brick_featured_image">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail (); ?>
</a>
<?php endif; ?>
</div>
<?php the_excerpt(); ?>
Read More
</div>
</div><!-- container -->
And this is the CSS
* masonry brick layout */
#container2 {
width: 100%; /* width of the entire container for the wall */
margin-bottom: 10px;
}
.brick {
width: 30%; /* width of each brick less the padding inbetween */
padding: 0px 10px 15px 10px;
background-color: #fff;
margin-top: 5px;
}
.brick_header{
border-bottom: solid 1px #1d1d1d;
padding-bottom: 10px;
padding-top: 10px;
}
.brick_header a{
color: #ffff00;
}
.brick_header a:hover{
color: white;
}
.brick_featured_image{
width: 100%;
margin-top: 10px;
}
.brick_featured_image img{
width: 100%;
height: auto;
}
Here you're providing Column-Width in JS 220px.
And in CSS : 30%.
That might be creating problems.
Make sure your HTML Structure Looks like this.
<div id="container2">
<div class="brick">...</div>
<div class="brick">...</div>
<div class="brick">...</div>
</div>
And CSS :
.container2{
width:100%;
}
.brick{
width:25%;
/*
This should be respective of the columns you want
Like for 4 columns, 100%/4 = 25%
*/
}
And JS.
var $container2 = $('#container2');
$container.masonry({
itemSelector: '.brick'
});
For more detailed explaination : http://masonry.desandro.com/#getting-started
To know more details on the problem you're having, kindly provide the URL so I can have a look at it and can provide exact solution.
I personally use the "js-masonry" class mainly because if you are using a framework such as Bootstrap or Modest Grid, it will keep the gutter settings, etc.
Here is an example:
<div class="js-masonry">
<?php if ( have_posts() ): ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="dt-6 tl-6 tp-6">
<article>
<h2>
<a href="<?php esc_url( the_permalink() ); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark">
<i class="fa <?php echo strtolower(str_replace(" ", "-", get_field('project_type'))); ?>"></i>
<?php the_title(); ?>
</a>
</h2>
<?php the_excerpt(); ?>
<div class="download">
<a href="<?php esc_url( the_permalink() ); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark">
View <?php the_title(); ?>
</a>
</div>
</article>
</div>
<?php endwhile; ?>
<?php else: ?>
<h2>No posts to display</h2>
<?php endif; ?>
Notice that the <div class="js-masonry"> is outside of the while.
for a project I am working on I have been trying to set up a wordpress post loop on a subpage which woould display all posts as a thumbnail image with the posts title underneath. However I do not get any posts listet but rather just one link referring to the subpage the gallery should be on. Could anyone help me out please?
Here is my code which is saved as page-gallery.php in my childthemes folder:
<?php get_header(); ?>
<div id="main" class="wrapper">
<?php global $query_string; if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="gallery_image_container">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<div class="gallery_image_thumb">
<?php the_post_thumbnail('thumbnail'); ?>
</div>
<h2><?php the_title(); ?></h2>
</a>
</div>
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
The CSS is the following:
.gallery_container {
position: relative;
float: left;
width: 150px;
height: 150px;
border: 10px solid #CCC;
margin: 20px;
}
I have created a jsfiddle to tell you what I want to achieve in the end: http://jsfiddle.net/vdpktLxr/
Your code just echos the content of your page "page-gallery.php" . For displaying POSTS you need to use another loop, for example something like this:
<?php
// The Query
query_posts( $args );
// The Loop
while ( have_posts() ) : the_post();
echo '<li>';
the_title();
echo '</li>';
endwhile;
// Reset Query
wp_reset_query();
?>
You can find more info here
the site is http://www.christopherwaller.com/wordpress/
if you take a look on the above site i'm trying to insert a link to a page on each of the images on a carousel, so if you click anywhere on the image it will navigate to a new page. I have created the link i want on the post title text (ie. Look 1, Look 2 etc . . .) by using
<h2 class="postitle"><?php the_title(); ?></h2>
but i can't for the life of me find the right PHP to create the same links on each of the carousel photos?
I'm still trying to get to grips with PHP if anyone could advise that would be great.thanks
this is the PHP
<div class="edit"><?php edit_post_link(); ?></div>
</div>
<div class="postcontent">
<?php
$content = $post->post_content;
$searchimages = '~<img [^>]* />~';
preg_match_all( $searchimages, $content, $pics );
$iNumberOfPics = count($pics[0]);
if ( $iNumberOfPics > 0 ) { ?>
<?php the_thumb('medium'); ?>
<?php } else { ?>
<div class="imgframe"></div>
<?php } ?>
<div class="post_content">
<h2 class="postitle"><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php wp_link_pages('<p class="pages"><strong>'.__('Pages:').'</strong> ', '</p>', 'number'); ?>
<div class="post_meta">
<div class="author"><?php the_author(); ?></div>
<div class="date_meta"><?php the_date(); ?></div>
<div class="category_meta"><?php the_category(', '); ?></div>
</div>
</div>
</div>
<div class="postbg_bottom"></div>
<div class="social_links">
<a class="read" title="Read the rest of this post" href="<?php the_permalink(); ?>">read more</a>
</div>
</div>
<?php endwhile ?>
<div class="navigation">
<div class="nxt_page"><?php previous_posts_link('New Entries »', 0); ?></div>
<div class="prv_page"><?php next_posts_link('« Old Entries', '0') ?></div>
</div>
<?php endif ?>
</div>
</div>
<!--CONTENT END-->
and the CSS
/* Easy Slider */
#slider ul, #slider li{margin:0;padding:0;list-style:none;}
#slider li, #slider2 li{ width:1000px;height:1100px;}
#nextBtn{display:block; width:13px; height:14px; position:relative; left:0px; top:0px; z- index:1000; right:120px; top:-718px; float:left; left:840px; margin-right:20px; }
#prevBtn{display:block; width:13px; height:14px; position:relative; left:300px; top:0px; z-index:1000; right:120px; top:-718px; float:left; left:-100px; margin-right:20px; }
#prevBtn{ left:-20px;}
#nextBtn a, #prevBtn a{ display:block;position:relative;width:13px;height:14px;
background:url(images/sl_left.png) no-repeat 0 0;}
#nextBtn a{ background:url(images/sl_right.png) no-repeat 0 0;}
.graphic, #prevBtn, #nextBtn{padding:0; display:block; overflow:hidden; text-indent:-8000px;}
/* Easy Slider END */
/*SLIDER END*/
You could try using the following instead of "the_thumb();"
add the following to your theme's 'functions.php'
// Add post thumbnail theme support
add_theme_support('post-thumbnails');
Then use the following to replace the 'the_thumb();'
if ( has_post_thumbnail() )
the_post_thumbnail();
I actually use this myself and created a plugin that links the post thumbnail to the post. It seems like you're trying to do the same kind of thing so I hope this works for you.
I understand you are using the PostThumb revisited plugin, correct? And if I read correctly, this plugin outputs a single picture with the_excerpt() . If that is the case, couldn't you just do this? :
<a href="<?php the_permalink();?>">
<?php the_excerpt(); ?>
</a>