If you like the WordPress.com style entries, you can reproduce that look and feel using Flint 0.5.0 or later. Here’s an example of how this tutorial can make your blog, archives and search results look in just a few steps…
Create A Custom Image Size
Before we style the archive entries themselves, we need to make sure we have an appropriate image size for use as the featured image. Visit the Flint » Setup page and find the Custom Image Sizes section.
In that section, create a new image size in the dimensions you want. A landscape or panoramic image will work best for this solution so choose either of those shapes and the set the width and height as you prefer. The width needs to be as wide, or wider, than your content area width. If you don’t create images as wide as your content area, they won’t fill the entire width of your entry either and that won’t look right.
If you haven’t changed Flint’s default site max width or content area width, you might try the values I chose for this site…
Tell Genesis To Use Your New Image Size
Now visit the Genesis Theme Settings page, Content Archives section and enable featured images if they aren’t already. Then choose your new image from the image size drop down menu. Save your settings and continue.
Rebuild Old Images
Here’s the part that a lot of people miss. Images you uploaded in the past will not have this new image size and consequently won’t display properly now. To fix this, you can use a handy plugin called AJAX Thumbnail Rebuild. Download and install that plugin and we’ll rebuild your old featured images with your new image size.
Once installed, you’ll find the plugin page under the Tools menu. On that page, you’ll see a list of all your image sizes and they’ll be checked by default. UN-check all of them except for your new image size. Also check the box to only rebuild featured images. Then click the button to rebuild all thumbnails.
The process to rebuild your images will vary depending on the number of images it has to process so let it finish before doing anything else.
Style Your Entries
Now visit your Flint » Archives page to make the necessary option updates.
NOTE — The settings I give you here are based on Flint’s default styles. If you have tweaked your archive entry settings already, you may have to adjust these a bit.
Entry Container
In this section, you only need to set your padding values to zeros.
Entry Image
In this section…
- Check the Position box to move the image before the title and then
- Check the Fallback box so that images within your posts don’t display when no featured image or default featured image has been specified. You can provide a default featured image if you wish.
- Set the margins to zeros. Optionally you can use a negative margin on the bottom to make the space between the image and the title smaller
- Set the alignment to none
Entry Header
In this section, you only need to set the padding as you see in the image below.
Entry Content
In this section you have a choice to make. You can either show the content or hide it completely. Genesis doesn’t allow you to hide it completely, but the Visibility option in Flint does. If you choose to show it, you’ll also need to set the padding values as shown in the image below.
Entry Footer
In this section, you only need to set the margin and padding values as you see in the image below.
That’s It!
Provided you didn’t have any conflicting settings applied prior to making these changes, your new WordPress.com style blog and archive entries should now look awesome!