Icon next to the post tile in simple html?

  • I try to display small “new” or “updated” icons next to the post titles by using simple html <img src=”…”> next to where the title is written. The title and the image next to it show up perfectly, however, that messes the beginning of the post below.

    The code for the the addthis: description=””, which should be invisible, appears. I guess it breaks the code.

    Is there any simple solution? And if yes, can it be also applied in feeds, so that they won’t show code instead of the icon?

    Or maybe some custom field solution?
    I’d like to add such icons on some posts, not on all.

    Thanks

Viewing 6 replies - 1 through 6 (of 6 total)

  • Check the HTML that you’ve used to add in the images. Every time I’ve seen this happen it’s been because a ‘ or ” has been missed, eg:

    <img src="img.jpg" width="30" height="20" alt="Image" title="Image description="" />

    Notice that there’s a ” missing after thetitle attribute? That’s what you’ll be looking for, but check all of the attributes to see which one (or possibly more) is causing the problem.

    Thread Starter dasfgh

    (@dasfgh)

    thanks, I understand what you mean, but the html is so simple, there are no errors in it, its like

    <img src=”https://mydomain.com/uploadsfolder/updated.gif”&gt;
    I also tried with the closing /> at the end, both with or without a space before it.

    Note that I’m placing this code simply in the field where the title is written. I do not edit the header of the post, I don’t have such plugin and I don’t know another way to edit the headers or footers of single posts individualy (I know how to edit templates and css however, but if i work in them, the results will apply to all single posts, which i do not want)

    If that’s the case there’s a good chance that a filter is doing something to the HTML code that you’re entering there. What is the actual HTML that you’re entering, and that’s output on the website? That might give us an idea of what is happening.

    Be aware that if it is a filter you coudl be in for some “hard core” PHP work to try and change the way that it works…

    There is another way to do it, but it involves some CSS work. If you can handle that, the idea is to set a height and padding on the titles <h1> tag and add the image as a background to that tag. You can use the post ID selectors that are output for the body to set it up for individual pages.

    body.page-id-1 h1 {
    height: 30px;
    padding-left: 40px;
    background: url('images/myimage.jpg') top left no-repeat;
}
    Thread Starter dasfgh

    (@dasfgh)

    Thanks, but I leave the most complicated solutions for last, if there’s no simpler way. I am sorry that I can’t show you that post right now, its a mess and i cant publish it.

    However here’s the html (which I cant edit anyway, cause there’s no way for me to enter the header of an individual post):

    <div class="post-meta-single" id="post-NUMBEROFTHEPOST">
<h1>TITLE OF MY SINGLE POST <img src="https://MYDOMAIN.COM/UPLOADS/updated.gif" /></h1>
<div class="post-date">
Posted by blabla 2012 11:54 | <a href="categoryurl" title="checkallinthiscat" rel="category tag">sport</a>&nbsp;&nbsp;<a class="post-edit-link" href="https://vbb.mk/wp/wp-admin/post.php?post=3872&action=edit" title="Edit">Edit</a></div><!-- POST DATE END -->
<div class="social"><div class="addthis_toolbox addthis_default_style" /*THIS IS WHERE I THINK THE PROBLEM BEGINS*/"
addthis:url="theurltothepost"
addthis:title="The title of the post <img src="https://MYDOMAIN.COM/UPLOADS/updated.gif" /> /*OR MAYBE HERE*/
addthis:description="THIS IS A STORY ABOUT BLABLA. CHECK IT OUT"> /*THIS APPEARS THO IT SHOULD BE HIDDEN ON THE SINGLE POST PAGE*/
  <a class="addthis_button_facebook"></a>
  <a class="addthis_button_twitter"></a>
  <a class="addthis_button_delicious"></a>
  <a class="addthis_button_digg"></a>
  <a class="addthis_button_stumbleupon"></a>
  <a class="addthis_button_reddit"></a>
  <a class="addthis_button_email"></a>
</div></div><!-- SOCIAL END --><div class="post-content">

    There must be some solution by using custom fields. Or a plugin for title icons, if someone knows a simple one, which will not occupy much space.

    OK, that’s a whole lot different to your original description. The area that’s the problem has nothing at all to do with the title. It’s an extra area underneath the title (well, underneath in the source code at least).

    My first guess here is that you’ve done a copy-and-paste of this code from another site? Get rid of it and install the AddThis plugin and let it do the work for you instead.

    Thread Starter dasfgh

    (@dasfgh)

    the code is from my site i just made changes to it, to describe the situation better (like: mydomain.com and so on), cause my first description of the problem was not very clear.

    I think that the problem is in this line:

    addthis:title="The title of the post <img src="https://MYDOMAIN.COM/UPLOADS/updated.gif" />
    or maybe in this one:
    addthis:description="THIS IS A STORY ABOUT BLABLA. CHECK IT OUT">

    Addthis is obviously installed, just how to control it? If I can put custom fields for addthis (just whats the right syntax?) then I will be able to remove the image from it’s addthis:title and maybe the code won’t break. Maybe addthis is confused by the html. How to kill it? Now I see the custom fields in the drop-down menu under my visual editor, there’s no mention of addthis, but maybe i can add values manually

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Icon next to the post tile in simple html?’ is closed to new replies.