WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Replacing a Page Title with an Image (18 posts)

  1. erikmarcus
    Member
    Posted 5 years ago #

    I've created a few major pages (not posts) on my site that are deserving of titles that are bigger and bolder than what the wimpy default page title offers. I'd like to create PNG files and have them appear instead of the text title.

    I did this for one of my pages:

    http://www.vegan.com/recipes/vegancom-top-10-recipes-of-2008/

    copying this code inyp my Page's title box:

    <img src="http://www.vegan.com/images/2008/top10recipes/recipesheadline.png" alt="Top 10 Recipes, 2008" />

    And the result is just perfect, except there's a cursed "> above my image. I'm guessing my theme (Cleaker) was never created with what I'm trying to do in mind. Unfortunately, the page template file is too complicated for me to understand and create a patch for.

    I thought perhaps if I entered a space before my <img> tag I could get around this problem, but no luck. I could really use some help here!

  2. mylife64
    Member
    Posted 5 years ago #

    There's an extra "> before your image tag.

    It should be

    alt="Top 10 Recipes, 2008" /><img src="http://www.

    but right now it's..

    alt="Top 10 Recipes, 2008" />"><img src="http://www.

    If you take that out, you should be just fine.

  3. garbonzo
    Member
    Posted 5 years ago #

    The reason why it works funny is because the image code was also inserted into the title attribute of the link.

  4. haochi
    Member
    Posted 5 years ago #

    It seems like that you are using the_title() inside alt, replacing the_title with the_title_attribute() should do the trick.
    http://codex.wordpress.org/Template_Tags/the_title_attribute

  5. erikmarcus
    Member
    Posted 5 years ago #

    I obviously messed up the code I gave in my initial post. But I don't think this was causing the problem of the unwanted "> hovering above my image.

    I think garbanzo and haochi may have thought I was using the_title or the_title_attribute tags. I wasn't. I had merely put the code from my first example inside the "title" field of WordPress' "Write Page" screen.

    Now, I've put the following corrected code in that field:

    <img src="http://www.vegan.com/images/2008/top10recipes/recipesheadline.png" /> <alt="Top 10 Recipes, 2008" />

    But still, the "> text appears above my image. Here again is the offending page:

    http://www.vegan.com/recipes/vegancom-top-10-recipes-of-2008/

    Any idea what code I could put into the title field to make "> go away?

  6. jberghem
    Member
    Posted 5 years ago #

    Should be

    <img src="http://www.vegan.com/images/2008/top10recipes/recipesheadline.png" alt="Top 10 Recipes, 2008" />

    The problem lies in the permalink. Since you have put code in a text field where wordpress doesn't expect it, wordpress is also using that code in the permalink. The closing /> of the <img> tag is closing the permalink tag resulting in an extra ">

    Solution?
    simple, change your permalink.

  7. mylife64
    Member
    Posted 5 years ago #

    Do you have access to edit the data directly? If the editor is changing what you're putting in the title field automatically on you, then I would imagine your best bet would be to directly edit the post_title field in your wp_posts table.

    This way it would stick with the code you've entered. A view page source on your site shows that it's clearly not what you've posted above.

  8. erikmarcus
    Member
    Posted 5 years ago #

    It just occurs to me, based on what mylife just wrote, that perhaps what's happening is the editor's converting my straight quotes to curly quotes.

    Does anyone know the easiest way to turn off this "feature" within a given page?

    I'm now thinking we've found the problem.

  9. jberghem
    Member
    Posted 5 years ago #

    The problem lies in the permalink. Since you have put code in a text field where wordpress doesn't expect it, wordpress is also using that code in the permalink. The closing /> of the <img> tag is closing the permalink tag resulting in an extra ">

    Solution?
    simple, change your permalink.

  10. erikmarcus
    Member
    Posted 5 years ago #

    Wow, OK, jberghem's advice nailed it. And thanks for explaining what's going on. Here's the code I switched to, complete with a missing >

    <img src="http://www.vegan.com/images/2008/top10recipes/recipesheadline.png" alt="Top 10 Recipes, 2008"

    jberghem, did you have something different in mind, where the permalink is specifically set? My grasp of this is so weak that unless you show me the actual code your explanation is likely to go over my head.

  11. erikmarcus
    Member
    Posted 5 years ago #

    I've been trying to think through jberhem's piece of advice regarding changing the permalink and I'm coming up empty. As I mentioned in the previous post, providing the unclosed img src code above allows the artwork to properly display in place of a text headline, without the unwanted "> symbols appearing. But I have the sense that this is some sort of terrible kludge and I'm probably doing something that will crash browsers or screw my site up in the future.

    In any case, the permalink had previously been set properly because I initially created this page with a regular text title. This is the permalink in case anyone's interested:

    http://www.vegan.com/recipes/vegancom-top-10-recipes-of-2008/

    I guess in the future, when I want to create a headline graphic in place of a text headline, I could always do what I did this time around: first create the page using a text headline, and then swap in an unclosed img src statement as shown in my previous post.

    In any case, I don't understand how I would implement jberghem's solution: "simple, change your permalink."

    I see that I can change a permalink to whatever I'd like by clicking the permalink feature below a page's title window. But I don't know what I'd change this to to resolve the problem I described in the very first post of this thread. If somebody knows, can you tell me, and also tell me if it's a more XHTML compliant solution than the unclosed img src statement I'm currently using.

  12. jberghem
    Member
    Posted 5 years ago #

    Let me get back to you on that. You have fixed the visual problem with what you've done but now the html code is missing something. You might say that's not so important as long as it looks good but the erroneous code has potential to give you a much larger problem. Let me figure out an alternative solution might be for you.

  13. erikmarcus
    Member
    Posted 5 years ago #

    JB, that's extremely kind of you. I'm fairly new to WordPress and I thought long and hard about ways to resolve this based on the advice I received.

    My sense is that even if you can figure out a way for me to accomplish this under 2.5, it would make be a welcome new feature if future versions of WordPress could handle what I'm doing without any hoop-jumping.

    I'll be checking back and hoping you or someone else can come up with a solution. Again, thanks very much!

  14. jberghem
    Member
    Posted 5 years ago #

    Okay, I think I got a solution for you, but you will have to edit your template files.

    The problem you're having is that you are entering an (X)HTML image element ( <img src... /> ) in the post title bar where WordPress is only expecting text. So we'll just ad the the image element into the template file(s)

    Open your template files and find this line of code:

    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>

    It will probably be inside of a <h2> or <h3> tag, (you won't have to change them).

    We are going to add some extra (X)HTML inside this line of code to make it look like this:

    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php the_title(); ?>" /></a>

    When you create a new post you'd enter the following into the title box:

    http://www.vegan.com/images/2008/top10recipes/recipesheadline.png" alt="Top 10 Recipes, 2008

    Note that you don't have to begin or end with double quotes ( " ) as they're already there in the template code. If you're only going to use images for titles on Pages (not posts) you'll only have to edit the page.php template file. If your are also going to use this in the posts you'll have to change every template file where this line of code occurs and you'll always have to upload an image. Once you've changed the templates you won't be able to use just text because you'll get a horrible box with a red "x" in Internet Explorer.

    Now just out of curiosity, are these images always going to be a text only graphic like in your example? Or will there also be a decoration or pattern in this image?

    If all you need is text there's a plugin for that. It's called "WP FLASH TITLES PLUGIN" You can find it here

    You could give it a try.

  15. erikmarcus
    Member
    Posted 5 years ago #

    I figured out something workable. But before getting to that, let me tell you the two proposed solutions I rejected, and why they don't work for my needs.

    1) I wasn't open to considering the Flash Titles plugin, since I want to keep my site lean, quick loading, and maximally compatible.

    2) I also couldn't consider changing the template files as suggested in the previous post, because most of my pages will always be headed by text rather than graphics.

    It's clear that there's currently no easy way to insert graphics code in the title bar thanks to WordPress' method of parsing the title box to create a permalink. As we've seen on this thread, the only way to insert graphics into the title bar is to resort to complicated template modifications or felony-level coding violations like the one I was committing by deliberately not closing my tag.

    So I got to thinking, why not just erase the contents of the Title box, and embed the graphics code at the top of the Page field instead? It works almost perfectly. The date floats to the top, which isn't optimal, but it's not a dealbreaker. Apart from that, everything's perfect. I've got clean, simple code. And if and when WordPress supports entering graphics into the Title box, I can always easily come back and move it up there. Here's how my page looks in case anyone's interested:

    http://www.vegan.com/recipes/vegancom-top-10-recipes-of-2008/

    The only requirement for this approach is that you either initially create your page with the desired title in the title bar (to create a permalink), and then delete the title later. Or I suppose you could just enter the desired permalink title the first time you save the page.

    I'm going to mark this thread as resolved. I'm also going to look into making a feature request that future versions of WordPress support embedding graphics code into titles. Thanks to everyone who chipped to help me with this issue. I could not have figured this out on my own.

  16. jberghem
    Member
    Posted 5 years ago #

    Seem to me like the best solution for your pages as well. It looks good

  17. WordPresssnap
    Member
    Posted 5 years ago #

    I've got the same problem of trying to place an image over my title box.
    I've currently reduced the opacity of the title box and changed the background image. This gives a less than favourable result as the position of the background changes as a screen to the size of the display screen.

    This is my page http://www.24by36.com/filmroll/

    I'll appreciate some helping in making the changes that erikmarcus describes. Which is to "erase the contents of the Title box, and embed the graphics code at the top of the Page field instead".

    Any help will be appreciated.

  18. jberghem
    Member
    Posted 5 years ago #

    What you're trying to do is completely different than what this post is about. Either that or you're going about it the wrong way.
    As far as I understand you're talking about the title of the site i.e the header image. If you read this post carefully you'll see that erikmarcus is talking about replacing the post title with an image, a unique image for each post which is something completely different and far more complex.

    Maybe you'll find your answer here: http://wordpress.org/search/change+header+image?forums=1

Topic Closed

This topic has been closed to new replies.

About this Topic