Archive Page with Small Photos

  • Author
    Posts
  • #3258375

    photolord
    Member
    #3258798

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

    #3258897

    photolord
    Member

    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?

    #3258905

    photolord
    Member

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

    #3259106

    supernovia
    Staff

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

    supernovia
    Staff

    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.

    #3259567

    photolord
    Member

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

    #3259568

    photolord
    Member

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

    #3259586

    supernovia
    Staff

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

    #3264018

    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?

    #3264172

    supernovia
    Staff

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

    #3264174

    supernovia
    Staff

    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.