Jump to content
Sign in to follow this  
deanbain

Add Image between Post Header and Meta Data

Recommended Posts

deanbain    0
deanbain

Hi all, 

 

I am attempting to add an image between my post header and the meta data as a line break but can not figure it out. Here is an example of what I am trying to achieve, as you see this site as a series of colored dots between the header and meta. Can you please recommend how I code this or if there is a plugin that will do such:

 

http://www.onegoodthingbyjillee.com

 

Thanks.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi.  I'm presuming you did not mean "header" but "title".

 

A simple HTML img tag placed in a hook will achieve that goal.

 

Start by using the Action Map plugin (free in Store) to see where it goes.  That tells you which hook to use.

 

Once you have the correct code, upload the image (those dots are one single graphic). Copy and paste the URL from the Media Library to a notepad file.

 

Craft your HTML with a unique div like this:

<div class="mydots"><img src="the url is pasted here"></div>

 

Add that to your hook.

 

Make sure that you've tested everything.  It should work.  You may need to apply some custom CSS to the class via Custom Code.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

Keep us posted.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
deanbain    0
deanbain

So it kind of worked...

 

I added the image code to the pagelines_loop_before_excerpt hook, however when the feature image is called it is put on the same line as the image that I am calling. I have an example posted right now where you can see without an image it is fine and with a feature image they are both on the same line. Ultimately I want the feature image to push down below by divider image.

 

www.glow-organic.com 

 

Share this post


Link to post
Share on other sites
Rob    547
Rob

Now try .mydots {margin-top: -21px;}

 

See if that moves the image up enough.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
deanbain    0
deanbain

Sorry that is not working, it just moves up the dots up and then they overlap the metadata. I actually need to edit the call for the feature image thumbnail and push it down somehow. Any ideas?

Share this post


Link to post
Share on other sites
Rob    547
Rob

Moving the thumbnail is something like this:

 

.fpost .post-thumb.img {
    margin-right: 20px;
    margin-top: 45px;
}

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
deanbain    0
deanbain

Rob,

 

Thanks for all your help on this but my client (the wife!) wants the dots between the Title and Meta not under the meta like I have been pursuing...

 

I can see that it is in the Post_loop hook, thanks to your comment above, therefore I could add custom css like below

 

e.g.

 

 

.fpost .metabar {
    margin-top: 45px;
}
 
but instead of adding a margin now what i want to do is call the image so that it inserts, how would one do so?

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, if you have the image you should be able to add it using css. I've tried it quickly and its working on my test site.

 

.post-title .fix:after {content: url("your full url goes here") !important; }

To find out more on the :after selector please see http://www.w3schools.com/cssref/sel_after.asp

 

or you can use

 

h1, .fpost .entry-title {
    background-image: url("your full url goes here");
    background-position: left bottom;
    background-repeat: no-repeat;
    font-size: 43.6px;
    padding-bottom: 15px;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
deanbain    0
deanbain

Mate, you are the man as they say here in the states. Thanks very much, it was completely doing my head in trying to figure it out! Case closed!

Share this post


Link to post
Share on other sites
James B    436
James B

You're welcome :-) Glad it worked


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×