Tips & Tricks
Sick of images being to large for the content area?
Have you ever uploaded an image that might have been a tad bigger than the width of your content area? I know I have! So here is a little CSS fix to handle these situations.
.post img { max-width: 600px; height: auto; }
That’s it, really simple huh. Just make sure that you change the .post
to the correct body class(which starts with a “.“) or body ID(which starts with a “#“).
Would you like a quick explanation?
The CSS is just telling any image inside the class of .post
to not be more than 600px wide. By the way make sure you change it to fit the dimension of your content width. And the height attribute is set to auto to automatically change the height to match the new width. 🙂
Themes
Jon Asked: How to add thumbnails above post on the THiCK theme
I was asked by a reader:
I’m using the THiCK theme for my new design blog. I noticed you were able to add thumbnail images above your blog posts on the home page. What would I need to do to enable this on my blog?
Well Jon, this can be done very simple, since the theme is already using the Tim Thumb script.
What you will need to do is find in your index.php
file, the second loop. Which you can find on line 40
.
<?php query_posts('offset=1&showposts=' . get_option('woo_other_entries') . '&cat=-' . $GLOBALS['ex_asides'] ); ?> <?php while (have_posts()) : the_post(); ?> <div class="post"> <h2><a title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2> <div class="post-meta"><?php the_time('j/m/y'); ?> <span>|</span> <?php comments_popup_link('0 Comments', '1 Comment', '% Comments'); ?></div> <?php the_excerpt(); ?> </div> <?php endwhile; ?>
Now we are going to add in the code. At line 43
we are going to add:
<?php if (get_option('woo_resize')) { // Check if we should use the image resizer ?> <a title="Continue reading this entry..." href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo get_post_meta($post->ID, "image", $single = true); ?>&h=80&w=280&zc=1&q=90" alt="<?php the_title(); ?>" /></a> <?php } else { ?> <a title="Continue reading this entry..." href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php echo get_post_meta($post->ID, "image", $single = true); ?>" alt="<?php the_title(); ?>" /></a> <?php } ?>
That’s it, just make sure that in the THiCK options panel you choose the “resize” option, or the image might break the layout. Or you may change the this code: $post->ID, "image",
to: $post->ID, "image_thumb",
and use a separate image for the lower blog.
Tips & Tricks
How to: Add any authors gravatar to their post
This is an easy one, just add one line to your single.php
file where you would like the Gravatar to show up.
<?php echo get_avatar( get_the_author_id(), $size = '96', $default = '<path_to_url>' ); ?>
Tips & Tricks
How to: Show what a user is searching for in the title
Want to show what any user was searching for?
It is simple, just add this line where your title would be.
<h1>Browsing search results for <strong>"<?php the_search_query() ?>"</strong>.</h1>
The important line is the_search_query()
-
Tips & Tricks6 months ago
WordPress Security Hacks
-
Pages2 weeks ago
Write For Us – Guest Post
-
Showcase4 weeks ago
StylizedWeb.com
-
News1 week ago
How to: Show/Hide any div box with jQuery in WordPress
-
Tips & Tricks7 months ago
Remove the title attribute using jQuery
-
Tips & Tricks4 months ago
How to: show/hide a widget in WordPress with jQuery
-
Plugins4 months ago
Top Membership plugins
-
Tips & Tricks3 weeks ago
Limit the characters that display on the_title
You must be logged in to post a comment.