$20
Display thumbnails from each category

Question

I want to add a custom Paypal button to my blog pages and posts. ($5)

Answer 1

Cristian Antohe says:

You need the Easy Peasy Image script by Andrew Rickmann:
http://wp-fun.co.uk/2009/01/10/easy-peasy-images-suggestion-roundup/ (he sold that site so you can ignore the ads, but the info there is good.)

If you want you can download the Commune Child Theme for Thematic and poke around. It uses that exact script and gives you the possibility to add default category images selected from the media gallery. ( http://www.cozmoslabs.com/2009/04/07/green-anyone-try-commune-thematic-child-theme/ ).

It's pretty straight forward. If you have problems with it drop a question on cozmoslabs forums: http://www.cozmoslabs.com/forums/

Answer 2

Japh says:

Hi Andy,

If you could please provide the code that sets your $image_cat variable, that might help establish exactly what's going on in your script, so we might be able to provide some code to help you :)

Cheers,
Japh

Andy Essex says:
Hi,

Would I find the code for '$image_cat variable' in the functions.php file as I can't find it on the page that contains the code I originally submitted.

Thanks,
A.

Answer 3

Dan Fraticiu says:

Final solution:



<h3>List categories</h3>

<ul>

	<?php 



	$categories = get_categories('exclude=28'); 



	foreach($categories as $cat){



		echo '<li style="float: left;">';



		$catPost = get_posts('numberposts=1&category='.$cat->cat_ID.'');



		$post = $catPost[0];



		setup_postdata($post);



		echo '<a href="'.get_category_link( $cat->cat_ID ).'"><img style="margin:0px 18px 18px 0px; height: 225px; width: 225px; display: block;" src="/wp-content/themes/portfolio/scripts/timthumb.php?src='.get_post_meta($post->ID, "image", true).'&h=225&w=225&zc=1&q=100" alt="'.$post->title.'" /></a>';



		echo '<h4><a href="'.get_category_link( $cat->cat_ID ).'">'.$cat->cat_name.'</a></h4>';



		echo '</li>';



	}

?> 

</ul>

Andy Essex says:
What did you misunderstand, so perhaps I can clarify?

Dan Fraticiu says:

Andy, english is not my main language so that might be the cause of the misundertanding. from what I get is that you want a list of all the categories you have. Each list item has the name of the category and a thumbnail. So here we go:

<h3>List categories</h3>

				<ul>

				<?php 

					$categories = get_categories('exclude=28'); 

					foreach($categories as $cat){

						echo '<li>';

							echo '<h4><a href="'.get_category_link( $cat->cat_ID ).'">'.$cat->cat_name.'</a></h4>';

						

							$catPost = get_posts('numberposts=1&category='.$cat->cat_ID.'');

							$post = $catPost[0];

							

							setup_postdata($post); ?>

					

							<a href="<?php the_permalink(); ?>"><img style="float:left; margin:0px 18px 18px 0px;" src="/wp-content/themes/portfolio/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "image", true); ?>&h=225&w=225&zc=1&q=100" alt="<?php the_title(); ?> by Andrew Areoff" /></a>	

					

				<?php	echo '<li>';

				}

				?> 

				</ul>

The code generates an unordered list, each item contains the category name (+link) and a thumbnail (+link). The thumbnail is the taken from the latest post in each category.

Hope this is what you were looking for. If not you could rephrase.

Andy Essex says:
This almost works and your English is better than my ???

Please see the screenshot I have attached.

All I need to do now is get the wording text to appear underneath the image.

For instance 'Beach Huts' should appear underneath the first image you see of beach huts.

Can you help me with this?

Attached Image

Dan Fraticiu says:

Here you go, I just moved the <h4 > elementt under the <img > and removed the float on the image.



<h3>List categories</h3>

				<ul>

				<?php 

					$categories = get_categories('exclude=28'); 

					foreach($categories as $cat){

						echo '<li style="display: block;">';

						

							$catPost = get_posts('numberposts=1&category='.$cat->cat_ID.'');

							$post = $catPost[0];

							

							setup_postdata($post); ?>

					

							<a href="<?php echo get_category_link( $cat->cat_ID ); ?>"><img style="margin:0px 18px 18px 0px;" src="/wp-content/themes/portfolio/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "image", true); ?>&h=225&w=225&zc=1&q=100" alt="<?php the_title(); ?> by Andrew Areoff" /></a>	

							

							echo '<h4><a href="'.get_category_link( $cat->cat_ID ).'">'.$cat->cat_name.'</a></h4>';

						

				<?php	echo '<li>';

				}

				?> 

				</ul>

BTW: you should move the styling on the image in the css file. Inline css is just bad practice.

Andy Essex says:
Oops, this did't seem to work and some of the code is now displaying on the page. Please see the screenshot which shows this.

I copied all of the code from your replay above.

Attached Image

Dan Fraticiu says:

Ok my bad, forgot to verify.

<h3>List categories</h3>

				<ul>

				<?php 

					$categories = get_categories('exclude=28'); 

					foreach($categories as $cat){

						echo '<li style="display: block;">';

						

							$catPost = get_posts('numberposts=1&category='.$cat->cat_ID.'');

							$post = $catPost[0];

							

							setup_postdata($post);

					

							echo '<a href="'.get_category_link( $cat->cat_ID ).'"><img style="margin:0px 18px 18px 0px;" src="/wp-content/themes/portfolio/scripts/timthumb.php?src='.get_post_meta($post->ID, "image", true).'&h=225&w=225&zc=1&q=100" alt="'.the_title().'by Andrew Areoff" /></a>';

							echo '<h4><a href="'.get_category_link( $cat->cat_ID ).'">'.$cat->cat_name.'</a></h4>';

						

						echo '<li>';

				}

				?> 

				</ul>

Andy Essex says:
Sorry, still doesn't display properly - please see picture 5.

What I am looking for the thumbnails to display like: http://www.andrewareoff.com home page but with the title of the category underneath each thumbnail.

Attached Image

Dan Fraticiu says:



<h3>List categories</h3>

	<ul>

		<?php 



			$categories = get_categories('exclude=28'); 



			foreach($categories as $cat){



				echo '<li>';



					$catPost = get_posts('numberposts=1&category='.$cat->cat_ID.'');



					$post = $catPost[0];





					setup_postdata($post);

			

					echo '<a href="'.get_category_link( $cat->cat_ID ).'"><img style="margin:0px 18px 18px 0px;" src="/wp-content/themes/portfolio/scripts/timthumb.php?src='.get_post_meta($post->ID, "image", true).'&h=225&w=225&zc=1&q=100" alt="'.the_title().'" /></a>';



					echo '<h4><a href="'.get_category_link( $cat->cat_ID ).'">'.$cat->cat_name.'</a></h4>';



					echo '<li>';



		}



				?> 



				</ul>

I think I got it right this time... is really hard to write code without being able to test it. I used some inline styling to float the list items... to get the effect you need, you should move it to you .css file.

Andy Essex says:
Ok, this is working better, one last request:

Are you able to remove the title of the image that shows below the image as in this screenshot: Numbers 489-495 in snow.

All I want to show is the title of the category 'beach huts'

Attached Image
Dan Fraticiu says:
<h3>List categories</h3>

<ul>

<?php

$categories = get_categories('exclude=28');

foreach($categories as $cat){

echo '<li style="float: left;">';

$catPost = get_posts('numberposts=1&category='.$cat->cat_ID.'');

$post = $catPost[0];

setup_postdata($post);

echo '<a href="'.get_category_link( $cat->cat_ID ).'"><img style="margin:0px 18px 18px 0px; height: 255px; width: 255px; display: block;" src="/wp-content/themes/portfolio/scripts/timthumb.php?src='.get_post_meta($post->ID, "image", true).'&h=225&w=225&zc=1&q=100" alt="'.$post->title.'" /></a>';

echo '<h4><a href="'.get_category_link( $cat->cat_ID ).'">'.$cat->cat_name.'</a></h4>';

echo '</li>';

}

?>

</ul>
Andy Essex says:
Hi,

Your last solution seems to work better but for some reason the code is making the images enlarge. Their specified size is 225px x 225px but the code is making them display larger which is not suitable. I need to make this work within the timthumb script as this is central to the working of the images on my site.

Dan Fraticiu says:

Sorry I just wrote 255px instead of 225px.

Find this code: style="margin:0px 18px 18px 0px; height: 255px; width: 255px; display: block;" and change the values to 225px. Or you can remove this "height: 255px; width: 255px;" completly. Here is the code:

<h3>List categories</h3>



<ul>



<?php 



$categories = get_categories('exclude=28'); 



foreach($categories as $cat){



echo '<li style="float: left;">';



$catPost = get_posts('numberposts=1&category='.$cat->cat_ID.'');



$post = $catPost[0];





setup_postdata($post);



echo '<a href="'.get_category_link( $cat->cat_ID ).'"><img style="margin:0px 18px 18px 0px; height: 255px; width: 255px; display: block;" src="/wp-content/themes/portfolio/scripts/timthumb.php?src='.get_post_meta($post->ID, "image", true).'&h=225&w=225&zc=1&q=100" alt="'.$post->title.'" /></a>';



echo '<h4><a href="'.get_category_link( $cat->cat_ID ).'">'.$cat->cat_name.'</a></h4>';







echo '</li>';



}



?> 



</ul>

Andy Essex says:
Silly mistake on my part for not simply checking the dimensions, I assumed you cut and paste from the code I supplied.

Thank you! This works perfectly now and does everything I want!

And I've been able to style it correctly as well for my purposes.

Thank you again.

Attached Image

Answer 4

Frank Bültge says:

See my post, you can use the images from the mediathek.
http://wpengineer.com/easier-better-solutions-to-get-pictures-on-your-posts/

Answer 5

scribu says:

I think that what you actually need is to assign images to the categories themselves.

This can be achieved using a plugin like Category Icons

Answer 6

Christian Kobben says:

The following code works and is in some way more friendly if you don't know a lot about pure php stuff...

<!--

start "asking" for all categories



You can use other order, include parameters

(have a look at http://codex.wordpress.org/Function_Reference/get_categories )



Bad, that there isn't an order parameter like "last updated"

-->



	<?php

	$cf_getCategory = get_categories('exclude=28&orderby=name&order=ASC'); 

	foreach($cf_getCategory as $cat) : ?>



	<!--

	Now we're inside each single category

	we use the following function "$cf_currentCategoryId" to save the id of each current category,

	because we need it, if we ask for the last posts

	-->



		<?php $cf_currentCategoryId = $cat->cat_ID ;?>



			<!--

			with the following function we ask for the last posting of the current category...

			(have a look at http://codex.wordpress.org/Template_Tags/get_posts )

			-->





		<?php

		$cf_getCategoryPost = get_posts('numberposts=1&category=' . $cf_currentCategoryId . '');

 		foreach($cf_getCategoryPost as $post) :

    	setup_postdata($post); ?>



			<!--

			Now we're inside each single post

			You can style the last posting of each category as you wish... follwing lines are just an example...

			-->



			<div class="category_container">

				<div class="category_image"><a href="<?php the_permalink() ?>"><img style="float:left; margin:0px 18px 18px 0px;" src="/wp-content/themes/portfolio/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "image", true); ?>&h=225&w=225&zc=1&q=100" alt="<?php the_title(); ?> by Andrew Areoff" /></a></div>	

				<div class="category_title"><?php the_category(', ');?></div>

			</div>



			<!--

			end of each posting

			-->



		<?php endforeach; ?>



	<!--

	don't delete the following line

	-->



	<?php endforeach; ?>

Andy Essex says:
Hi,

Thanks for this solution.

However, can you look at the attached screenshot? Some of the images seem to be repeating. Is this because there are in multiple categories?

Also the title of the category is not displaying underneath the images.

Can you provide possible fix for this?

Thanks,
Andrew

Attached Image

$20
Display thumbnails from each category

(6) Possible Answers Submitted...

Recent Questions (+)

Top Experts (+)

$20 Display thumbnails from each category

(6) Possible Answers Submitted...

Recent Questions (+)

Top Experts (+)

$20
Display thumbnails from each category