WordPress.org

Ready to get started?Download WordPress

Forums

Full image code not showing in widget ad. (28 posts)

  1. Backroadsliving
    Member
    Posted 1 year ago #

    Hi, I am adding my logo to my side bar and have the widget activated. I added this code so others could copy it and past it to their Blog and share my logo:

    <strong><center><a href="http://www.backroadsliving.com/" title="Back Roads Living"><img alt="Back Roads Living" src="http://www.backroadsliving.com/wp-content/uploads/2013/03/Back Roads Image.jpg"/></a><center> </center>
    <center><textarea id="code-source" rows="3" name="code-source"><center><a href="http://www.backroadsliving.com/"><img border="0" src="http://www.backroadsliving.com/wp-content/uploads/2013/03/Back Roads Img.jpg"/></a></center></textarea></center></center></strong>

    and it works great except when someone else copies it from my actual blog page they don't get the full url. all they get is,

    <strong><center><a href="http://www.backroadsliving.com/"><img border="0" src="http://www.backroadsliving.com/wp-content/uploads/2013/03/Back Roads Img.jpg"/></a></center></strong>
    [Please post markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

    this doesn't direct them to my Blog. No image will come up with this code. Why isn't the entire code being shown on the Blog?

    Any help will be appreciated.

    Thank you .

    C. Keys.

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    What widget are you using?

  3. Backroadsliving
    Member
    Posted 1 year ago #

    It doesn't have aname, just a standard text widget that came with the download of WordPress.
    .

  4. esmi
    Forum Moderator
    Posted 1 year ago #

    All of the widgets have names. :-) Is it the Text widget from Appearance -> Widgets?

  5. Backroadsliving
    Member
    Posted 1 year ago #

    Yes. :)

  6. esmi
    Forum Moderator
    Posted 1 year ago #

    Can I ask what theme you are using and whether you have a custom CSS plugin (eg there's such a module in the Jetpack plugin) installed?

  7. Backroadsliving
    Member
    Posted 1 year ago #

    I am using twenty eleven with a child theme. Yes, Custom CSS is activated in Jetpack.

    [No bumping, thank you. Try to be patient.]

  8. esmi
    Forum Moderator
    Posted 1 year ago #

    Oh - excellent! Only you have two issues in the old markup:

    1. You cannot add markup to content (either in a widget or in a page area) without a web browser immediately parsing that markup. The only way around this is to encode the < and > tags so that the browser doesn't see the markup as... well, markup and will display it "as is".

    2. Some of the formatting markup you were using is old and deprecated. Moving this all out to CSS will give you leaner markup that will be far easier to style from theme to theme.

    Try adding the following to your Text widget:

    <a class="brl-image-link" href="http://www.backroadsliving.com/"><img alt="Back Roads Living" src="http://www.backroadsliving.com/wp-content/uploads/2013/03/Back Roads Image.jpg"/></a>
    
    <textarea class="brl-image-link" id="brl-code" rows="3"><code>& lt;a href="http://www.backroadsliving.com/"& gt;& lt;img border="0" src="http://www.backroadsliving.com/wp-content/uploads/2013/03/Back Roads Img.jpg"/& gt;</a></code></textarea>

    and remove all of the spaces after & in the second block. Next, go to your Custom CSS module and add something like:

    a.brl-image-link,
    textarea.brl-image-link {
    display:block;
    margin:0 auto;
    font-weight:bold
    }

    and see how that looks.

  9. esmi
    Forum Moderator
    Posted 1 year ago #

    Edited the above code to try and stop the forum's parser from breaking the encoded tags. *sigh*

  10. Backroadsliving
    Member
    Posted 1 year ago #

    I can't seem to get the text code you sent to copy without the whole page copying. Can't just copy the code in the window. What am I doing wrong?

  11. esmi
    Forum Moderator
    Posted 1 year ago #

    Not sure. It could just be due to mouse control. Try http://pastebin.com/JeERp8EY instead.

  12. Backroadsliving
    Member
    Posted 1 year ago #

    Just got the code and going to try now.

  13. Backroadsliving
    Member
    Posted 1 year ago #

    To add to the module do I just click configure and add the code above to the bottom or something? I am not very familiar with the css stuff. Sorry for being so green in this. I am laernign this as I go. Still a long way to go!

  14. esmi
    Forum Moderator
    Posted 1 year ago #

    Just paste everything from the pastebin into the Text widget "as is".

  15. Backroadsliving
    Member
    Posted 1 year ago #

    I edited the CSS under Apperance>Edit CSS and added the code. The CSS ask me to remove the "a" in the first line and the "textarea" in the second line. I did this and added the code for the image but still can't get it to work?

  16. Backroadsliving
    Member
    Posted 1 year ago #

    What about the css? Did I do it right?

  17. Backroadsliving
    Member
    Posted 1 year ago #

    There are 2 sections in the pastebin. Do I use the raw data one?

  18. esmi
    Forum Moderator
    Posted 1 year ago #

    I'd have kept the a and textarea in. Not sure why it was suggested that you remove them. As to whether it worked, I can't tell without a link to the site in question. :-)

  19. Backroadsliving
    Member
    Posted 1 year ago #

    I had one of those little yellow triangles saying it was not needed I think. http://www.backroadsliving.com

  20. Backroadsliving
    Member
    Posted 1 year ago #

    This was the css response I got.
    Element a.brl-image-link is overqualified, just use .brl-image-link without element name
    Element textarea.brl-image-lin is overqualified, just use .brl-image-link without element name

  21. esmi
    Forum Moderator
    Posted 1 year ago #

    I had one of those little yellow triangles saying it was not needed

    that's just general advice. Humans are always better judges in these situations than dumb software. ;-)

    I can see a mistake of mine in there. Try using http://pastebin.com/zt19mjPv instead. You might also want to add:

    textarea.brl-image-link {
    font-size:.8em;
    }

    And this time, it is vital that you leave the textarea in.

    So that the whole CSS for this should look like:

    a.brl-image-link,
    textarea.brl-image-link {
    display:block;
    margin:0 auto;
    font-weight:bold;
    }
    textarea.brl-image-link {
    font-size:.8em;
    }
  22. esmi
    Forum Moderator
    Posted 1 year ago #

    Missed this...

    Do I use the raw data one?

    Yes.

  23. Backroadsliving
    Member
    Posted 1 year ago #

    Just updated cSS Stylesheet and Text Widget.

  24. Backroadsliving
    Member
    Posted 1 year ago #

    My ad image on the page still has the correct link but the code still does not work on a post or page. Still no image when I copy and past the code from my Blog to a post or page?

  25. Backroadsliving
    Member
    Posted 1 year ago #

    It is the CSS Style Sheet I am supposed to add the code you gave me to isn't it? Appearance>Edit CSS.

    a.brl-image-link,
    textarea.brl-image-link {
    display:block;
    margin:0 auto;
    font-weight:bold;
    }
    textarea.brl-image-link {
    font-size:.8em;
    }

    [Stop bumping! This is a forum staffed by unpaid volunteers - not online chat!]

  26. esmi
    Forum Moderator
    Posted 1 year ago #

    It is the CSS Style Sheet I am supposed to add the code you gave me to isn't it?

    The code above? Yes.

  27. Backroadsliving
    Member
    Posted 1 year ago #

    The code still isn't working. I took it down from the Blog so no one would try it before I got it working right. I put the code you gave me in the CSS and the other in the text widget but it still does the same thing as before. The Text Widget does not give the full code after it is posted to the Blog.

  28. Backroadsliving
    Member
    Posted 1 year ago #

    Decided to use Img Widget instead of all the code!

Topic Closed

This topic has been closed to new replies.

About this Topic