Excerpt Image Problem and Blog Menu/Header request

  • Author
    Posts
  • #60129
    janabouc
    Member

    1. When someone lands on a specific blog post (e.g. clicks the link from Facebook to:
    http://janasjournal.com/2014/10/04/playing-dirty-ball/
    would it be possible to display the same header that says “JanasJournal BLOG” that you get when go to:
    http://janasjournal.com/blog/
    OR if that’s not possible, at least make the menu item “BLOG” be highlighted when on an individual specific blog page.

    2. In order to display an image at top of the blog excerpt on the home page I paste in and copy and paste the image url I obtain from the media library page. But every time I do it the url gets messed up. Sometimes the code is partially or completely stripped out. Often an extra “/> gets added. It usually takes about 5 attempts to redo the image html and republish the page until finally something works. What worked today was not pasting the html, just typing the opening code, pasting the url in and then typing the closing code. But that’s not what worked last time. Any clues?

    The blog I need help with is: (visible only to logged in users)

    #60316
    thejohnparris
    Theme Author

    Jana,

    1. Try adding this to the CSS section under Appearance > Customize:

    .current_page_parent a {
        color: #fff;
        border-bottom: solid 3px #33b26e;
    }

    2. Can you repost the code you paste into the editor? It got messed up here and looks like a broken image. When you post it, use the “code” button in the toolbar above the box you type in. Screenshot.

    #60337
    janabouc
    Member
    Original poster

    1. The CSS helped: now “BLOG” is highlighted. Thanks.

    2. Here’s the fixed #2:

    In order to display an image above the blog excerpt on the home page I paste in:
    <img src=“img url“/>
    and then I replace the image url by copying and pasting the image’s url from its Media Library library page. But every time I do it the url gets messed up. Sometimes the code is partially or completely stripped out. Often an extra “/> gets added at the end. It usually takes about 5 tries of redoing the html and republishish the page until finally something works. What worked today was typing, not pasting, the opening code, then pasting in the url, then typing the closing code. But that’s not what worked last time. Any clues?

    Also, I wish the blog post excerpt wasn’t “below the fold” — the header takes up so much space that on many monitors you won’t even see that there’s anything below the header. Is there a way to shrink the header vertically?
    Thanks!
    Jana

    #60339
    thejohnparris
    Theme Author

    I’m not sure what’s happening when you insert the image, but there are a couple of other ways to do it, depending on which editor view you’re using.

    If you’re using the Text mode, click the “img” button in the editor toolbar and paste your URL that way. Screenshot.

    This way works in either Visual or Text mode: Click the Add Media button, select Insert from URL, and paste your URL that way. Screenshot.

    With regards to the header taking up so much space, I see two things. I’m not sure which one you’re talking about, maybe both.

    First thing, your logo at the top with the two cats is making the header taller, pushing down the post title and the rest of the content. I’m not sure there’s much we can do here with that particular image and still retain its legibility. You can try playing with a little custom CSS to see if you can get it to your liking. Try this code, adjust the height, and see if you get something that works.

    .site-header img {
        max-height: 100px;
    }

    Second thing, a lot of your posts have tall vertical images above the post content. If this is a concern, you might try adding the images after the first paragraph so the text is visible.

    #60343
    janabouc
    Member
    Original poster

    When you’re entering the content in the Excerpt window on the edit post page there’s no toolbar for adding media: Screenshot
    The menu options you showed at the top of the screen places the image in the post, not the excerpt.

    I’ll get rid of the logo or make it smaller–I don’t recall noticing that it increased the height of the header though. I’ll compare and see.

    Re your last paragraph “Second thing” that’s not a problem. It’s ok with me if the image is at the top on a blog post. It’s only on the home page that the large header concerns me because I put a lot of effort into making sure the current post and its image shows up there and then it kind of disappears below the fold.

    #60346
    thejohnparris
    Theme Author

    Oh, sorry about that. For some silly reason I overlooked the fact that you said Excerpt. Maybe I shouldn’t be working on Sunday. :)

    I was thinking about your entering text in the post editor and using the more tag.

    Ampersand doesn’t make any changes to the content you enter/paste into the excerpt box. It’s not allowed to do so on wordpress.com. I wonder if there’s a stray character or something in your paste, like a weird quotation or something? I tested it on our sandbox site and couldn’t get it to break.

    I tested this as a paste:
    This is a test excerpt. <img src="http://placehold.it/350x150">

    The only difference I can see is I’m not including the trailing slash (/) character. That shouldn’t be a problem, but it’s no longer required so you can leave it off.

    Edit: now that I look at it, it seems like your quotation marks in the img line are the “fancy” ones. That could be causing issues.

    #60449
    janabouc
    Member
    Original poster

    YAY! Finally did another post and your code worked! It must have been that stupid / at the end of the line that was screwing things up. Thanks so much!!!

  • The topic ‘Excerpt Image Problem and Blog Menu/Header request’ is closed to new replies.