Archive Page with Small Photos
-
How do I do something like this: https://joshidaniel.com/archive/ on my website: https://f2.ee/archives/
I have put in two other tickets on this in the past:
https://en.forums.wordpress.com/topic/image-archive-with-photos-listed-horizontally/
https://en.forums.wordpress.com/topic/post-thumbnails-shortcode-in-horizontal-columns/
The blog I need help with is: (visible only to logged in users)
-
Hi photolord,
I noticed you added CSS to the bottom of the post content. It needs to be added to the CSS editor instead so please try removing it from there, then paste the code in to My Sites > Customise > CSS.
If you need any further help, you are welcome to reply here or start a chat :)
-
Hi, gemmacevans. Thanks for your reply. :)
I removed the code and placed it in the css, but the photos are not evenly square and spaced like https://joshidaniel.com/archive/
What am I missing or doing wrong with my code in my css?
-
My other questions is how does https://joshidaniel.com/archive/ have more than 100 photos on the archive page as according to https://en.support.wordpress.com/display-posts-shortcode/ there is a limit of 100?
“Limits – The Display Posts Shortcode has a limit of 100 posts displayed.”
-
@photolord the person who did that is literally hand-coding each item in the archive. There’s not a great way to make all of the images square with CSS alone, as far as I’ve been able to find.
What you could do, though, is make all of the images the same height, for just a little bit more uniformity.
Try this (and I’m including all the CSS here) and let us know what you think.
.display-posts-listing .listing-item { clear: none !important; } .listing-item .title { display: none; } .display-posts-listing .listing-item img { height: 75px; width: auto; } .display-posts-listing .listing-item .alignleft { display: inline; float: left; margin-right: 5px; margin-bottom: 5px; } -
Here we go. With a bit more digging and thanks to our friends at stackoverflow, I found this that may work:
.display-posts-listing .listing-item { clear: none !important; } .listing-item .title { display: none; } .display-posts-listing .listing-item .alignleft { display: inline; float: left; margin-right: 5px; margin-bottom: 5px; } .display-posts-listing .listing-item a { position: relative; width: 50px; height: 50px; overflow: hidden; } .display-posts-listing .listing-item a img { position: absolute; min-width: 100px; top: -9999px; left: -9999px; right: -9999px; bottom: -9999px; margin: auto; }If you want to make the images a little bigger, you’ll need to use bigger thumbnails.
I hope this helps.
-
You, Supernovia, are amazing! That did the trick. Your coding skills are “Like a boss”. Thank you. I appreciate your help.
-
-
-
Do you know what is wrong with the archive page with the code you gave me at: https://f2.ee/archives/
It will only list the last 10 blog posts.
What do I need to do to show all of my blog posts?
-
Hi! Looks like that’s a default in your shortcode.
posts_per_page
How many posts to display.
Default: 10Try adding
posts_per_page=”20″
or another number as you’d like.
Just bear in mind performance can degrade with the more separate requests you add. It might be better to do somewhat larger images to fill up the page a bit better. You could try increasing the thumbnail size here, then increasing the size in the CSS. (I used half the the thumbnail size in the CSS to ensure it would crop to a square.)
-
er, not sure why the forum converted that to “fancy quotes” but yeah, regular straight quotes are fine :)
[display-posts category="photography" image_size="thumbnail" wrapper="div" posts_per_page="30"]etc. :)
- The topic ‘Archive Page with Small Photos’ is closed to new replies.