The past week I have spent several hours trying to get KTOWNLOWDOWN looking and functioning just the way I wanted. For those of you that are looking for behind the scenes technical stuff about how this website works, read on. For those of you that just enjoy the KTOWN updates, posts, and the pontificating on everything else, this post will bore you.
This post will specifically explain how I am using the Wordpress ‘Excerpt’ function to display the images on the front page. First things first. I am using the Massive News theme (demo site). Download here.
I liked what I saw on this site and wanted to figure out how to do what they were doing.
The theme uses a Featured Article section where you can upload up to 5 photos and their associated posts. this can be found by going to the design/massive news options tab. This is where you define what photos will be shown in the Featured Stories section of the front page (the slide show at the top of the page) and to which posts those photos will link if clicked on. Pretty straight forward.
The problem I was having with the theme ‘out of the box’ was that on the front page each post looked like this…(click on the thumbnail below or check out any page beyond the first page).
None of my posts were using the Custom Field or Excerpt functions that are under the Advanced Options on the admin page for any post.
I found a plugin that fixed this problem. Thumbnail for Excerpts. Basically this plugin searches the post for the first image and puts it near the excerpt. By using this plugin I got the basic look I wanted, but refer back to this site….I wanted to show one photo in the excerpt and another photo in the actual post. What if I wanted an excerpt photo to show on the front page and I didn’t want any photo in the post. For example this post…I wanted to show the photo on the front page but didn’t feel the need to show it anywhere in this post.
So I was about 95% there. Here’s another plugin I tried, but I couldn’t get it to work the way I wanted….that’s not to say that you can’t change a bit of the code to make it do what I wanted…I’m just not that good at changing the code.
After hours of searching and always coming back to the two plugins listed above, I noticed this in the index file:
<p><?php the_excerpt(); ?></div>
By now, I understood a bit more about the Custom Fields but had not expirmented with the ‘Except” built-into the lastest version of Wordpress.
I deactivated the plugins I had activated earlier and now I was back to the ‘out of the box’ theme…with my content.
I added some text to the Excerpt field…and low and behold it appeared in the “excerpt” area to the left of the…what I would call the….main excerpt. So I figured that if I entered HTML code in this excerpt area, then I could just ‘hard code’ the image I want to appear. With a little trial and error, I figured out to get exactly what I want. So here is an example of the code I put directly into the “Excerpt” field in the Advanced Options section of a Wordpress post…
<a href=”http://ktownlowdown.com/YOURPOSTNAME/”><img title=”PHOTO TITLE” src=”http://ktownlowdown.com/wp-content/uploads/2008/11/PHOTONAME.jpg”/></a>
This will give you an image that you have uploaded to your upload file (if that’s where you keep your upload files) that links to whateverpost you would like and displays a title for the photo when the cursor is over the photo.
Now this method takes a bit of configuration…
I manually make the photos I want to appear on the front page to be 140 x 140. I use GIMP to do this easily. I then upload the image (I usually put the word ‘thumb‘ in the title of the photo so I can tell which photos are on the front page), write the post, copy and paste the ‘Excerpt’ code “I developed” (for lack of a better term), change the ‘excerpt code’ to match my new post and my new image and give it whatever title I want.
And that’s how I am using Photos in Excerpts.
Remember, this is probably the most inefficient way to do this, but given the theme I am using, it’s really not that difficult. I hope this helps with those that are using the Massive News theme or similar magazine themes for Wordpress. I really like this new layout and Wordpress….of course..is great.
I hope I have helped those of you that may be searching like I was for an answer and could only get 95% there. I also look forward to hearing from those of you that are much more of a code monkey than me, and tell me where I have gone wrong or could use something else.
One last reason for using this method…here’s the code from the index.php file….
<div class=”entry”>
<div id=”introIMG”><p><?php the_excerpt(); ?></div>
<p><?php the_content_rss(”, TRUE, ”, 75); ?> <a href=”<?php the_permalink() ?>” title=”Read More”>Read More</a></p>
</div>
</div>
The best I can tell is that the theme itself is using the excerpt funtion within Wordpress for this image area, because the line after
<div id=”introIMG”><p><?php the_excerpt(); ?></div>
**this controls the photo area**
seems to control the ‘Main Excerpt’…
<p><?php the_content_rss(”, TRUE, ”, 75); ?> <a href=”<?php the_permalink() ?>” title=”Read More”>Read More</a></p>
Like I said, I am not much of a code monkey, but this is what I figured out for this theme and it seems to work pretty nice.
Comment away.
