Adding a picture above blog title

Hey,

Total newbie looking for some help. I’m using the theme Marfa and would like to add a picture above the blog title on the front page.

TIA

Dave

Hello! You can do this with some javascript and css magic.

First, add the javascript:

/* BEGIN HEADER IMAGE */

let img = document.createElement("IMG");
img.setAttribute("class", "header-img");
/* CHANGE URL HERE */
img.src = "https://via.placeholder.com/350x65";
document.body.prepend(img);

/* END HEADER IMAGE */

then add the CSS:

/* BEGIN HEADER IMAGE */

.header-img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
}

/* END HEADER IMAGE */

An explanation:

We create a new html element with javascript using createElement, then we set the appropriate class (so that we can style with css), add a source url (change it) and prepend it to the document body, so that its on top of the page. Keep in mind that this will be above everything added before this.

Then we style it with css so that its centered and not hugging the titlebar. You can change the “margin-top” value as you please, try it out and see what pleases you - increase or decrease the number before “em”.

2 Likes

Awesome. Thank you for your help. The picture loads up and is correctly aligned. I had to work out how to size the picture to its 250x250, but that was google-able :slight_smile:

My next question is: is it possible to have it only show on the front page? When its site wide, it throws off the layout of the other pages.

Hey @queryquokka! To remove the picture on the post pages, you can add the below code to your Custom CSS. It will only leave the header image on the front page.

#post .header-img {
    display:none;
}

Hope that helps!

1 Like