Archived

This topic is now archived and is closed to further replies.

  • 0

Add Image between Post Header and Meta Data

Question

Posted · Report post

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

11 answers to this question

Posted · Report post

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;
}

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

 

See if that moves the image up enough.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks, I will give it a try!

Share this post


Link to post
Share on other sites

Posted · Report post

Keep us posted.

Share this post


Link to post
Share on other sites

Posted · Report post

Moving the thumbnail is something like this:

 

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

Posted · Report post

You're welcome :-) Glad it worked

Share this post


Link to post
Share on other sites