Jump to content


Photo
- - - - -

Add Image between Post Header and Meta Data


Best Answer James B , 10 January 2013 - 02:43 AM

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.../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;
}
Go to the full post


  • Please log in to reply
11 replies to this topic

#1 deanbain

deanbain

    Member

  • Members
  • 18 posts
  • Country: Country Flag

Posted 07 January 2013 - 11:18 PM

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:

 

Please Login or Register to see this Hidden Content

 

Thanks.



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 08 January 2013 - 12:26 AM

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.



#3 deanbain

deanbain

    Member

  • Members
  • 18 posts
  • Country: Country Flag

Posted 08 January 2013 - 03:00 AM

Thanks, I will give it a try!



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 08 January 2013 - 06:12 AM

Keep us posted.



#5 deanbain

deanbain

    Member

  • Members
  • 18 posts
  • Country: Country Flag

Posted 09 January 2013 - 04:01 AM

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 

 


#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 09 January 2013 - 04:14 AM

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

 

See if that moves the image up enough.



#7 deanbain

deanbain

    Member

  • Members
  • 18 posts
  • Country: Country Flag

Posted 09 January 2013 - 02:27 PM

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?



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 09 January 2013 - 11:20 PM

Moving the thumbnail is something like this:

 

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


#9 deanbain

deanbain

    Member

  • Members
  • 18 posts
  • Country: Country Flag

Posted 10 January 2013 - 02:15 AM

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?


#10 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 January 2013 - 02:43 AM   Best Answer

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.

 

Please Login or Register to see this Hidden Content

To find out more on the :after selector please see

Please Login or Register to see this Hidden Content

 

or you can use

 

Please Login or Register to see this Hidden Content



#11 deanbain

deanbain

    Member

  • Members
  • 18 posts
  • Country: Country Flag

Posted 10 January 2013 - 03:07 AM

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!



#12 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 January 2013 - 03:11 AM

You're welcome :-) Glad it worked