Add Image Gallery as Header Image, Reformat Post Displays

  • Unknown's avatar
    stocksandbonbons · Member ·

    Hi, hoping you can help with some custom CSS. I’d like to add a header image to my homepage that displays the featured image of my 2, 3, and 4th most recent posts as thumbnails, with the title of the post over the thumbnail in a white box.

    Below the header image, I’d like the right-hand sidebars to display, and in the left/center, the most recent post to show, with the title/date/image/excerpt in the following order:

    [Post Title]
    Posted on [Date]
    [Featured Image]
    [Text Excerpt]

    I’d like to have the next most recent posts (5th, 6th, 7th, and 8th) follow in 2×2 grid format, where the featured image is displayed as a thumbnail, and the title, date, and text excerpt following below.

    Here is an example of the formatting described: http://sallysbakingaddiction.com/

    Is something like that possible?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there,

    I’d like to add a header image to my homepage that displays the featured image of my 2, 3, and 4th most recent posts as thumbnails, with the title of the post over the thumbnail in a white box.

    Hi there, CSS is a styling document used by browsers to position and style the elements of a webpage, it cannot be used to add functionality to a theme, such as a slider/gallery at the top such as you describe. That would require modifications to the theme php script files, and we cannot edit those here at WordPress.com.

    On the moving of post titles/dates, I replied to your other thread on that at: https://en.forums.wordpress.com/topic/display-post-title-above-featured-image?replies=2.

    We can do two columns in the post display on your front page with the following CSS. I’ve used a Media Query to limit this to screens/windows 768px and wider as below that the content start to get a bit too narrow. 

    @media screen and (min-width: 768px) {
	.display-posts-listing {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.listing-item {
		width: 47% !important;
		display: inline-flex;
		align-self: flex-start;
	}
}

    It looks a bit funky, but some of your posts do not yet have images and some have very short excerpts on them. Once you add images to those and perhaps get some more text content, they will align better.

  • Unknown's avatar
    stocksandbonbons · Member ·

    Hi thesacredpath, thanks for your response!

    It sounds like my theme won’t let me achieve the header gallery idea- do you know by chance of another theme that might?

    With respect to the two columns CSS question, this looks like a good start, but I’d like to have the images display in a uniform size, like the thumbnails do. Is that possible?

  • Unknown's avatar
    thesacredpath · Member ·

    What you may wish to do is to filter the theme showcase to show themes that have a post slider. This link does that: https://theme.wordpress.com/themes/features/post-slider/

    Some of them will display x number of your latest posts and some utilize a featured tag so that you can choose which posts you wish to have in the post slider. Some of them auto advance and some of them require clicking of a forward or back button to advance to the next post. You can view the demos for the themes that may interest you.

    On the images in the display posts shortcode, there isn’t going to be a way to crop or control what shows. The dimensions/height to width ratios of the images will determine that. What you could do would be to prepare your images all with the same height to width ratio and have them all in one orientation (portrait or landscape).

  • The topic ‘Add Image Gallery as Header Image, Reformat Post Displays’ is closed to new replies.