Blog Page Image

[Mark Newton]

Bill,

Am I able to have a hero image on the blog page as well as images associated with each individual post entry? In other words, have the blog include behavior as a page that additionally includes posts, each with their own chosen media as a post.

I realize a post can have its own image. More so, can the blog page have its own image like a hero? I have not had success and it feels like I am stumbling over something simple. I have used hero images on other pages so, I know the function and how to make that work.

Tired head says, “Thank you!” 😉

Mark

[Bill Robbins]

Good observation and great question. When a page is selected as the “posts” page, WordPress ignores just about everything except for the title and slug. Anything else that’s entered into the page as far as custom fields or featured images will not be taken into account.

If you wanted to edit the hero-options.php file, you’ll see this line:

<?php // this prevents the first post from having it's hero section from being at the top of the blog/archive page ?>

You could replace that code note with something that you’d like to have displayed in the hero section of the home page. You can use the code from the front page of the demo as a template for what to add in there:

		<style>
			
					
				#hero-section { background-image: url(https://demo.organizedthemes.com/elite/wp-content/uploads/sites/29/2013/10/firewood.jpg) }
			
						
							.hero-copy h2.hero-title { color: #ffffff }
						
							.hero-copy h2.hero-title { background-color: # }
						
							.hero-copy p { color: # }
						
							.hero-copy p { background-color: # }
						
													
				.hero-copy a.button.hero { color: # }
						
													
				.hero-copy a.button.hero { background-color: # }
						
													
				.hero-copy a.button.hero:hover { color: # }
						
													
				.hero-copy a.button.hero:hover { background-color: # }
					
		</style>
		
		<div class="hero-copy center-text">
			
							<div class="hero-title-holder">
					<h2 class="hero-title">WELCOME TO ELITE</h2>
				</div>
										<div class="hero-caption">
					<p>A full-screen plus WordPress theme.</p>
				</div>
										<div class="hero-button-holder">
					<a class="button hero" href="http://demo.organizedthemes.com/elite/features/">Learn More</a>
				</div>
						
		</div>
		
		
	<div class="scroll-down"></div>

Hope that helps out. If you have any trouble, let me know.

Have a great day,
Bill

[Author]

Posts