Why aren’t the cover images aligning properly on the past issues page?
This problem is almost always due to a difference in the height of the cover images.
The layout of the page is created by floating the cover images, which works perfectly if the images are all the same size but even a 1 pixel height difference can cause unwanted gaps to appear.
So, why are the cover images different heights? It’s all down to how WordPress generates the thumbnails.
In Settings > Media you’ll find the default WordPress image sizes. IssueM doesn’t care about the image sizes but it does take notice of whether the hard crop box is selected.
If hard crop is not selected then when IssueM asks WordPress to generate the thumbnail for a cover then it will maintain the ratio (width v height) of the original image. If that ratio is not the same as the ratio of the thumbnail dimensions you’ve set in Articles > IssueM Settings then the thumbnail will not be the default dimensions.
Let’s use an example to explain.
Let’s say you’ve left the IssueM thumbnail setting at the default of 200 x 268 and that your original cover image (the one you uploaded) is 1000 x 1400.
WordPress looks at the ratios and realises that both the ratios are for a portrait-orientated image and because hard crop is off, it’s simply going to scale the image down to a width of 200 resulting in a height of 280 (1000/1400 * 200).
If you’ve got a second cover image which is 990 x 1400 then the thumbnail will be 200 x 283 (990/1400 * 200), more than enough to throw out the formatting on the past issues page.
What are the solutions then?
1. Ensure the original images are all the same dimensions
If you can, then using cover images with the same dimensions is the preferred option. This ensures that even if the scaling doesn’t match the defined thumbnail dimensions, they will at least all be the same height.
2. Use CSS to set a fixed height for the image container
Of course, you’ve likely discovered this problem after you’ve loaded up plenty of cover images, so going back and resizing all the originals is not that appealing.
Luckily, you can fix the layout by adding the following CSS to your theme’s style.css:
.issuem_archive { height: 288px; /* set this height to 5px more than the height of the tallest thumbnail */ }
In this example, the height is set to 288px as the second example thumbnail was 283px.
3. Use *hard crop* to generate thumbnails
The more radical solution is to use hard crop (Settings > Media) for thumbnail generation.
Remember, this is a global setting for the generation of all thumbnails.
Using hard crop will ensure that all your thumbnails are the exact dimensions specified, however you might get some odd looking thumbnails.
For example, the 1000 x 1400 image naturally scales to 200 x 280, which is 12 pixels too tall. To create the thumbnail, WordPress will center a 268 pixel-high image vertically, essentially knocking off 6 pixels from the top and bottom of the image.
If you use borders on your images (not recommended) then you are going to lose them.
Consistent dimensions the best solution
Whether you use hard crop or not, life will be much easier if the original images all use the same dimensions (or if that’s not feasible, the same height to width ratio).
When the original images are consistent, you can set the thumbnail dimensions accordingly and be assured that your issue archive will display flawlessly.