Add a picture/image on the sidebar (15 posts)

  1. HopeIsKindled
    Posted 7 years ago #

    Hi everybody!

    I'm new here, don't have much experience with HTML so, maybe my question will look silly: i wish to put a few pictures on the right sidebar on my blog, i'm using the Atahualpa Theme, i tried already to post the html code but the image doesn't show on the website, i'd like to do something like this website (nothe the images on the right) http://www.beppegrillo.it/ i'd like to have the images linked to pages, is there any plugin widget something.. Help!! Thank you all in advance.

  2. alexteo
    Posted 7 years ago #


    this seems to be a huge problem and nobody seems to have the answer, I have tried everything

    harcode in sidebar.php, does not display anything
    insert html in text widget, displays a white box

    if you found out how to solve this issue , please, please help!!!!!!

  3. hhsleep
    Posted 7 years ago #

    Oooh... i have the same question. please somebody help.

  4. Doodlebee
    Posted 7 years ago #

    >>harcode in sidebar.php, does not display anything
    insert html in text widget, displays a white box<<

    Are you linking to the file correctly? If you're using relative path, that won't work. Is the image uploaded to the server?

    Hope - I've done something similar before, but not this exact thing. I mean, you *can* hard code it in the sidebar (within the sidebar.php file, or by using a text widget and plugging it in there). But if you want it more automated, you can use a query and custom fields.

    Basically, in your functions.php file put in this:

    function postimage() {
     // get the post meta info
      $key = "postimage";
      $id = get_the_ID();
      $custom = get_post_meta($id, $key, true);
      echo $custom;

    Then in your sidebar.php file (or within a widget that you can enter in PHP code), put in:

    $image = new WP_query ('showposts=1');
    if(have_posts()) : while($image->have_posts()) : $image->the_post; ?>
    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php postimage(); ?></a>
    <?php endwhile; endif; rewind_posts; ?>

    where you want the image to appear.

    Then when you write a post, scroll down to the bottom and find the "Custom Fields" area. Expand it, and for "Key" type in "postimage" (you'll only have to do it the first time - afterwards it'll be available in your dropdown for the key). For "value" put in the HTML code for your image. If you want to make it pretty simple, within the post content area, add an image like you normally would and have it insert the code for you. Highlight, copy and paste it into the "Value" area. (Delete it from the post if you don't want it to show up in there) "Add Custom Field" and then save your post.

    Your sidebar should then show the most recent post's image, linked to the post.

    I haven't tested that - but like I said, I've done similar stuff, so that code (even though I just wrote it off the top of my head) will probably work.

    Hope that helps.

  5. bytesforall
    Posted 7 years ago #

    To hardcode a linked image into a sidebar, add, in sidebar.php (left sidebar) or sidebar2.php (right), this:

    <a href="http://www.somelink.com/"><img src="<?php echo get_bloginfo('template_directory'); ?>/images/your-image.gif" alt="Some alt text" border="0" /></a>

    above this:

    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>

    to place it above all widgets, or below this:

    <?php endif; ?>

    to place it below all widgets.

    * in sidebar.php the line to look for contains "dynamic_sidebar(1)" instead of "dynamic_sidebar(2)" (sidebar2.php)

  6. hhsleep
    Posted 7 years ago #

    I figured it out. Pretend you are doing a post. Upload the image you want. Then insert it in your post. Copy the code and insert it in your text widget. You may have to mess with the height and width to get it the right size but i chose medium size to start with. You can chose where to link the image to as well by modifying the location in the code.

  7. djrockwell
    Posted 6 years ago #

    What are the advantages/disadvantages of widget vs hard code when adding to the sidebar?

  8. themamalist
    Posted 6 years ago #

    Thank you HHSLEEP!! It worked just like you said by uploading the image you want into a new post (remember to link it to the url you want) and then copy and paste into a new text widget on whichever side you want it. I used the full size image. see here: The Mama List - look for the "Business of Being Born" image on the right. So easy!! Thanks again!

  9. wlaury
    Posted 6 years ago #

    I need to place an image in the sidebar and make it linkable. I have tried the following using a text widget and it works great using ff, but in ie7 it separates the footer from the body and if I place something else in the sidebar it places the sidebar content between the body and the footer on the left side. The code I am using is below.

  10. <a href="http://mymayorsucks.com/crony/advertise"
    ><img src="http://mymayorsucks.com/crony/homicon.png"
    alt="Advertise!" width="40" height="39" />
  11. I have left the image in the page so that others can view it in ie7 and see what may possibly be causing this.

    The url is MyMayorSucks.com/crony

    I really can't add anything else to the sidebar as far as ads or images until it is resolved, so any help would be greatly appreciated.

  • emarketingcoach
    Posted 6 years ago #

    I also wanted to put linkable pictures on my sidebar,
    particularly buttons to my social media sites
    (u can see it them here http://www.YourMLMProsperity.com/blog)

    so if you want something like that, here's what to do:

    1)go to sidebar.php
    2)place a similar code in the necessary spot

    <li><a href="http://www.myspace.com/cathrineny"><img class="alignleft size-full wp-image-313" title="myspace_button2" src="http://yourmlmprosperity.com/blog/wp-content/uploads/2009/03/myspace_button2.png" alt="myspace_button2" width="82" height="82" /></a></li>
    Note: replace the links in this code to your own pic & link!

    If you don't know how to get a similar code, you can do these easy steps:

    1)add a new post (only do not publish)
    2)upload the pic you want from your computer or insert an url
    3)edit & resize it, if necessary
    4)link the uploaded image to the site u want
    5)click HTML view and copy the code
    6)paste the code in sidebar.php in the place you want
    7)insert <li> before the code and </li> after the code
    8)save the file

  • worldview
    Posted 6 years ago #

    I have tried this same code five ways to sunday and cannot get the image to load in IE7 on XP

    Either as code in text widget or as

  • in sidebar.php

    what am I missing?

  • showmii
    Posted 6 years ago #

    I love wordpress so I don't want to sound overly critical... but is there any reason why it's so ridiculously hard to get an image into the sidebar?

    relative links works fine for calling background images with css.. is this not the case with wordpress?

    There are instances I want to hardcode one in there; what path should I use?

  • doggettfitness
    Posted 6 years ago #

    Thank you, hhsleep. Works lovely! Brilliant.

  • ryans149
    Posted 6 years ago #

    relative images does not work in widgets, they will work on your sidebar.php.. you need to know properly how to use it.

    It is not hard at all, you need to know how wordpress works and how various elements are handled... then everything is easy.. :)

  • thebellman
    Posted 6 years ago #

    hhsleep, you rock!!!! I've been at this for 3 days nonstop...Thank you!

  • Topic Closed

    This topic has been closed to new replies.

    About this Topic