Wordpress, Alternating float on featured image - css

I want each loop on a specific category to alternate float on the "featured image". So that each new post the "featured image" change float (right side, left side).
I use folowing code to pull odd or even classes on each post,
<?php query_posts('showposts=5&cat=5,'); if (have_posts()) : ?>
<?php $c = 0; ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class((++$c % 2 === 0) ? 'odd' : 'even'); ?>>
<h2 class="entry-title"><a>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="featuredImage">
<?php the_post_thumbnail('medium'); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php endif; wp_reset_query();?>
Then I was trying to change the float on the "featured image" with css on the different post classes (odd or even). Se example,
.even { width:650px; height:250px; background-color: #000;}
.odd{ width:650px; height:250px; background-color: #616161;}
.odd, .featuredImage{ float:left;}
.even, .featuredImage{ float:right;}
My example, http://fskador.se/myPerformanceLast/?page_id=49
But cant get it to work!! please help!

Incorrect
<h2 class="entry-title"><a>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
Corrected
<h2 class="entry-title"><a title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
CSS
Incorrect
.odd, .featuredImage{ float:left;}
.even, .featuredImage{ float:right;}
Corrected
div.odd .featuredImage{ float:left;}
div.even .featuredImage{ float:right;}
Or
.odd .featuredImage{ float:left;}
.even .featuredImage{ float:right;}

Related

Add image with Post url after content

I would like to add an image with the link to the post - <?php echo esc_url($theme_post['url']); in the bottom right corner of the class "blog-grid-content".
Could someone please guide me to the best approach?
Thank you
<div class="blog-grid grid-2<?php echo esc_attr( $blog_grid_class ); ?>" <?php echo esc_attr( $anim_attrs ); ?>>
<div class="blog-grid-content">
<?php if ( $theme_post['categories'] ) : ?>
<div class="tags">
<?php if ( in_array( 'sticky', get_post_class( '', $theme_post['post_id'] ) ) ) : ?>
<span class="tag tag-sticky"><?php esc_html_e( 'Featured', 'theme' ); ?></span>
<?php endif; ?>
<?php foreach ($theme_post['categories'] as $_category) : ?>
<a class="tag brand-bg-color" href="<?php echo esc_url( get_category_link( $_category->cat_ID ) ); ?>">
<?php echo esc_html( $_category->name ); ?>
</a>
<?php endforeach; ?>
</div>
</div>
</div>

Wordpress Fallback image

I have picked up a project from a previous developer and he is using this code to generate thumbnails. I need to add a default fallback image and I'm unsure of the best practice.
<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="container">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="entry">
<?php the_content(); ?>
</div>
<?php $categories = get_categories(array('orderby'=>'order','number'=>'13'));
$wud = wp_upload_dir();
$width = get_option('thumbnail_size_w');
$height = get_option('thumbnail_size_h');
$exclude_cats = array(1, 27); // Array of category ID's to exlude from this page
?>
<div id="gallery">
<ul class="cat-list">
<?php foreach ($categories as $cat) {
if (!in_array($cat->cat_ID, $exclude_cats)) : ?>
<li class="cat-item cat-item-<?php echo $cat->cat_ID; ?>">
<a href="<?php echo get_category_link( $cat->term_id ); ?>" title="View all artists under the <?php echo $cat->cat_name; ?> category">
<div class="cat-ss" style="position: relative; width: <?php echo $width; ?>px; height: <?php echo $height; ?>px; overflow: hidden;">
<?php $artists = get_posts('category=' . $cat->cat_ID . '&orderby=rand');
foreach ($artists as $artist) {
$name = get_the_title( $artist->ID );
$thumb = $wud['baseurl'] . '/thumb-' . sanitize_title( $name ) . '-' . $width . 'x' . $height . '.jpg'; ?>
<img src="<?php echo $thumb; ?>" alt="<?php echo $name; ?>" title="<?php echo $name; ?>" width="<?php echo $width; ?>" class="cat-ss-image" height="<?php echo $height; ?>" style="position: absolute; top: 0; left: 0;" />
<?php } ?>
<div class="cat-ss-caption png" style="position: absolute; bottom: 0;"><h3><?php echo $cat->cat_name; ?></h3></div>
</div>
</a>
</li>
<?php endif;
} ?>
<ul>
</div>
<div style="clear: both"></div>
</div>
<?php endwhile; ?>
<?php else : ?>
<div class="post">
<h2><?php _e('Not Found'); ?></h2>
</div>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>
Regardless of your code you should have a look into has_post_thumbnail and then use get_the_post_thumbnail to output a thumbnail or your fallback image.
Works like a charm on many of my sites. You can find examples in the Codex pages I linked to.
Looks like his code to pull in a thumb is
<?php $thumb = $wud['baseurl'] . '/thumb-' . sanitize_title( $name ) . '-' . $width . 'x' . $height . '.jpg'; ?>
So to make it a conditional if/else statement if it's not empty render the image thumbnail, and use a fallback if it is empty, do this (add whatever other code you need to for the image to render):
<?php if(!empty $thumb) { ?>
<img src="<?php echo $thumb; ?>" alt="<?php echo $name; ?>" title="<?php echo $name; ?>" width="<?php echo $width; ?>" class="cat-ss-image" height="<?php echo $height; ?>" style="position: absolute; top: 0; left: 0;" />
<?php } else { ?>
<img src="yourfallback.jpg" style="position: absolute; top: 0; left: 0;">
<?php } ?>

First post in Wordpress blog displays incorrectly

I am styling a wordpress theme and the top blog post always displays incorrectly. The code is here:
<div class="bordered centered">
<p class="negative-margin alignleft header"><?php the_title(); ?></p><p class="negative-margin alignright date"><?php the_date(); ?></p><div style="clear:both;"></div>
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php if ( has_post_thumbnail() ):?>
<div id="entry-left"><?php $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
echo get_the_post_thumbnail($post->ID, 'large');
echo '</a>';?>
</div>
<div class="entry-right">
<?php the_content( __( 'More <span class="meta-nav">→</span>', 'huckleberry' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'huckleberry' ), 'after' => '</div>' ) ); ?>
</div>
<div class="entry-right">
<table>
<tr>
<td><p class="header">Details</p><br />
<?php $my_meta = get_post_meta( $post->ID, 'link', false ); ?>
<?php if ($my_meta): var_dump($my_meta) ?>
<?php foreach ($my_meta as $currMeta): ?>
<?php if( $currMeta && '' != $currMeta ): $currMeta=explode($currMeta,";",2);?>
<?php $my_meta[0];?>
<?php endif; endforeach; endif; ?>
</td>
<td>
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?>
</a>
</td>
<td>
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'tertiary-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'tertiary-image'); endif; ?>
</a>
</td>
<td>
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'fourth-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'fourth-image'); endif; ?>
</a>
<td>
</tr>
</table>
</div>
with the relevant CSS here:
.alignleft {
float:left;
}
.alignright {
float:right;
}
.bordered {
border:2px solid black;
}
.negative-margin {
margin-top:-25px;
margin-left:5px;
background:white;
}
.header {
font-size:200%;
}
.date {
font-size:150%;
}
.centered {
width:640px;
margin-left:auto;
margin-right:auto;
}
#entry-left {
float:left;
width:200px;
}
.entry-right {
float:right;
width:430px;
}
All the other posts have the border, with the title and date on the border, but the top post has a border that goes over the header, like so: http://imgur.com/6pE79ro
I'm relatively new to Wordpress and can't seem to figure out what's going on here.
Also, I'm trying to use Custom Fields to display links under "details." The idea is to have the key for the links always be "link", and the value to be in the format "description;url" so that I can break the value into two values to have a link description and URL display. I'm unable to get that to actually display any links. Any help would be greatly appreciated.
Perhaps irrelevant, but where do you close the following divs? <div class="bordered centered"> and <div id="entry-left">?
This is not exactly answering your second questions, but as for custom fields: I would suggest using a great WP module - ACF. It allows you to create and read values of custom-created fields easily, coming with many more useful features. The plugin can be found here: http://wordpress.org/extend/plugins/advanced-custom-fields/

Agenda page listing last 6 posts, grouped by month(dsc)

Could I use some help? I'm worse than a rookie with PHP stuff.
I'm trying to create a loop that requests posts from an specific category(agenda). I'd need 6 posts from an specific month stacked in 2 rows by 3 columns, something like the image down below.
http://imageshack.us/scaled/landing/833/schemeq.jpg
I was trying to merge codes and make this work, but I don't know what I'm doing wrong.
Any help would be great.
<?php $count = 0; ?>
<?php for ($i=1; i<12; $i++)
{
$month=$i;
$nQuery = new WP_Query("monthnum=$month&order=DSC&posts_per_page=6" );
if (nQuery->have_posts()) : while (nQuery->have_posts()) : nQuery->the_post();
<div class="box<?php if( $count%3 == 0 ) { echo "'-1'; }; $count++; ?> post">
<a href="<?php the_permalink(); ?>" class="alignleft" >
<?php if ( has_post_thumbnail() ) { the_post_thumbnail('postfeatured'); } else { ?> <img src="/wp/wp-content/uploads/2012/12/thumb_featured.jpg" alt="<?php the_title(); ?>" />
<?php } ?> </a>
<div class="entry-meta">
<?php twentyten_posted_on(); ?>
<span class="comments-link"><?php comments_popup_link( __( '0', 'twentyten' ), __( '1', 'twentyten' ), __( '%', 'twentyten' ) ); ?></span>
</div><!-- .entry-meta -->
<h2><span class="entry-title"><?php the_title(); ?></span></h2>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
</div>
}?>
What results are you getting now? Quite simply, you could handle the columns with CSS. Also, I do not see a cat argument in you query.

hide title is wordpress post doesn't have a title

I believe things are getting warmer, the no title display correctly with blank, but the title now isn't a link nor a h2, it's just flat text. Any suggestions?
<?php if (the_title()) { ?>
<h2>
<a href="'<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
<?php the_title(); ?></a></h2>
<?php } else { ?><?php }; ?>
<?php if (get_the_title() != "") { ?>
<h2><?php the_title(); ?></h2>
<?php } ?>
Should work.

Resources