Load Image before Blog Posts on Blog Page « Support Forum | Kriesi.at

Support Forum » Flashlight

Load Image before Blog Posts on Blog Page

5 posts from 3 voices

Started 6 months ago by circusvoltaire
Latest reply from Nick
This topic is not a support question

Tags:

circusvoltaire
Member

Hi
Perhaps you can help?
What would be the best way in Flashlight to load a banner image in the top of the main container on the page that is assigned to be my blog page, where the posts get loaded? I want the image to always be there and then have the posts load below it.

I tried just placing one there but its obviously being overwritten when the posts load.

Thanks

Posted 6 months ago #
Ismael
Moderator

Hi,

Try to create a posts then upload an image banner then look for Visibility option at the right side of the post editor. Check the option " Stick this post to the front page" to make the post stick at the top. :)

Regards,
Ismael

Posted 6 months ago #
circusvoltaire
Member

Hi Thanks

I did as you suggested - created a post - titled it "feature", Uploaded the image in the edit window and inserted it into the post - clicked the sticky option and published. Now on the Dispatches/Blog front page I see the title called "feature" listed as a post but no image. When I click on that it takes me to a 404 not found page?

thanks

Posted 6 months ago #
circusvoltaire
Member

Perhaps I can try this another way - do you have any suggestions for hardcoding a header image into the blog page before the posts get loaded - so the image will always be loaded as a part of that page and then the posts will load?

Thanks

Posted 6 months ago #
Nick
Moderator
Hi,

You have a file called template-blog.php located in the Flashlight theme folder. Put your image *after* line 17 which looks like
```
<div class='container'>
```
I would put it inside a div with some class name, and I would add another class name to the image itself so that you can style and position it. better.
so just add
```
<div class="blog-top-image-wrapper">

    <img class="blog-top-image" src="url-to-yourimage.png" />

</div>
```
Thanks,

Nick
Posted 6 months ago #