Archive Page with Small Photos

• 

  photolord · Member · Jan 28, 2019 at 5:16 pm

  • Copy link
  • Add topic to favorites

  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)

• 

  gemmacevans · Member · Jan 29, 2019 at 11:27 am

  • Copy link

  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 :)

• 

  photolord · Member · Jan 29, 2019 at 3:23 pm

  • Copy link

  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?

• 

  photolord · Member · Jan 29, 2019 at 3:29 pm

  • Copy link

  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.”

• 

  supernovia · Staff · Jan 29, 2019 at 9:48 pm

  • Copy link

  @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;
  }
  
  

• 

  supernovia · Staff · Jan 29, 2019 at 10:00 pm

  • Copy link

  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.

• 

  photolord · Member · Jan 30, 2019 at 3:54 pm

  • Copy link

  You, Supernovia, are amazing! That did the trick. Your coding skills are “Like a boss”. Thank you. I appreciate your help.

• 

  photolord · Member · Jan 30, 2019 at 3:55 pm

  • Copy link

  You are amazing! Thank you that did the trick! :)

• 

  supernovia · Staff · Jan 30, 2019 at 4:53 pm

  • Copy link

  Thank you! Glad we were able to figure something out :)

• 

  mark16mission · Member · Feb 7, 2019 at 5:28 pm

  • Copy link

  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?

• 

  supernovia · Staff · Feb 7, 2019 at 10:16 pm

  • Copy link

  Hi! Looks like that’s a default in your shortcode.

  posts_per_page
  How many posts to display.
  Default: 10

  Try 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.)

• 

  supernovia · Staff · Feb 7, 2019 at 10:18 pm

  • Copy link

  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. :)