http://wordpress.org/support/ WordPress › Support Topic: How do I add thumbnail images in category listing? en Thu, 26 Nov 2009 11:24:37 +0000 http://wordpress.org/support/topic/282027#post-1262016 Wed, 28 Oct 2009 15:34:51 +0000 digitalrenewal 1262016@http://wordpress.org/support/ <p>This code works so nicely.</p> <p>I used the archive.php to create the category.php template, and just pasted the code after my title (i removed the_time) and before the_content.</p> <p>it created the right size thumbnail, left aligned it and everything.</p> <p>THANKS!!!!</p> <p>heres the whole code i used, looks pretty cool:</p> <pre><code>&lt;?php while (have_posts()) : the_post(); ?&gt; &lt;div class=&quot;category_post&quot;&gt; &lt;h3 id=&quot;post-&lt;?php the_ID(); ?&gt;&quot;&gt;&lt;a href=&quot;&lt;?php the_permalink() ?&gt;&quot; rel=&quot;bookmark&quot; title=&quot;&lt;?php the_title_attribute(); ?&gt;&quot;&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h3&gt; &lt;?php $images = get_children( array( &#39;post_parent&#39; =&gt; $post-&gt;ID, &#39;post_status&#39; =&gt; &#39;inherit&#39;, &#39;post_type&#39; =&gt; &#39;attachment&#39;, &#39;post_mime_type&#39; =&gt; &#39;image&#39;, &#39;order&#39; =&gt; &#39;ASC&#39;, &#39;orderby&#39; =&gt; &#39;menu_order&#39; ) ); if ( $images ) { $count = 1; foreach ( $images as $id =&gt; $image ) { if( $count === 1 ) { $img = wp_get_attachment_thumb_url( $image-&gt;ID ); $link = get_permalink( $post-&gt;ID ); print &quot;\n\n&quot; . &#39;&lt;div style=&quot;float:left&quot;&gt;&lt;a href=&quot;&#39; . $link . &#39;&quot;&gt;&lt;img src=&quot;&#39; . $img . &#39;&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&#39;; } $count++; } } ?&gt; &lt;?php the_excerpt(); ?&gt; &lt;a href=&quot;&lt;?php the_permalink() ?&gt;&quot;&gt;&lt;span style=&quot;color:#cc0000&quot;&gt;read more&lt;/span&gt;&lt;/a&gt; &lt;p class=&quot;cat_meta&quot;&gt;&lt;?php the_time(&#39;M j y&#39;) ?&gt; | &lt;?php the_tags(&#39;Tags: &#39;, &#39;, &#39;, &#39;&#39;); ?&gt; | &lt;?php edit_post_link(&#39;Edit&#39;, &#39;&#39;, &#39; | &#39;); ?&gt; &lt;?php comments_popup_link(&#39;No Comments &#187;&#39;, &#39;1 Comment &#187;&#39;, &#39;% Comments &#187;&#39;); ?&gt;&lt;/p&gt; &lt;br style=&quot;clear:both&quot; /&gt; &lt;/div&gt; &lt;?php endwhile; ?&gt;</code></pre> <p>AND HERES MY CSS:</p> <pre><code>/* category page template style */ .category_post {border:1px solid #eee; margin:20px 0; padding:20px; font-size:14px; line-height:18px; } .category_post h3 {padding-bottom:10px;} .category_post img {margin-right:20px;} .cat_meta {font-size:11px;} .cat_meta a {color:blue;}</code></pre> http://wordpress.org/support/topic/282027#post-1113137 Mon, 22 Jun 2009 22:07:40 +0000 mfields 1113137@http://wordpress.org/support/ <p>Here is info on the loop: <a href="http://codex.wordpress.org/The_Loop" rel="nofollow">http://codex.wordpress.org/The_Loop</a></p> <p>You would add this code somewhere "inside" the loop.</p> <p>I would create a new category template for this. If your theme has a category.php file, open it and save as category-###.php</p> <p>The ### part should be the category id of the chub category. This way the special code will only be executed when a visitor is viewing the chub category. </p> http://wordpress.org/support/topic/282027#post-1112644 Mon, 22 Jun 2009 14:40:11 +0000 skywalker786 1112644@http://wordpress.org/support/ <p>Which loop? what file should I put this in? single.php? where exactly should I put the code? </p> http://wordpress.org/support/topic/282027#post-1110480 Fri, 19 Jun 2009 23:37:11 +0000 mfields 1110480@http://wordpress.org/support/ <p>use this code in your loop:</p> <pre><code>&lt;?php $images = get_children( array( &#39;post_parent&#39; =&gt; $post-&gt;ID, &#39;post_status&#39; =&gt; &#39;inherit&#39;, &#39;post_type&#39; =&gt; &#39;attachment&#39;, &#39;post_mime_type&#39; =&gt; &#39;image&#39;, &#39;order&#39; =&gt; &#39;ASC&#39;, &#39;orderby&#39; =&gt; &#39;menu_order&#39; ) ); if ( $images ) { $count = 1; foreach ( $images as $id =&gt; $image ) { if( $count === 1 ) { $img = wp_get_attachment_thumb_url( $image-&gt;ID ); $link = get_permalink( $post-&gt;ID ); print &quot;\n\n&quot; . &#39;&lt;div class=&quot;alignleft&quot;&gt;&lt;a href=&quot;&#39; . $link . &#39;&quot;&gt;&lt;img src=&quot;&#39; . $img . &#39;&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&#39;; } $count++; } } ?&gt;</code></pre> http://wordpress.org/support/topic/282027#post-1110147 Fri, 19 Jun 2009 18:10:53 +0000 skywalker786 1110147@http://wordpress.org/support/ <p>Hi,</p> <p>I have a catergory called Chub which holds 4 descriptions and header<br /> link which when clicked go to their individual pages.</p> <p>When someone clicks on the chub catergory they go this page <a href="http://www.fishingchair.org.uk/category/chub/" rel="nofollow">http://www.fishingchair.org.uk/category/chub/</a> which displays the 4 descriptions and header links which is a summary of their main page, in this summary page how do I add a thumbnail image next to each description? </p> <p>Thanks<br /> Shebs </p>