Need help? Check out our Support site, then


WordPress.com Forums » Widgets

Justify image in text widget

  1. greenpetburial
    Member

    I'm using the Mistylook theme. I created a text widget entitled "Brochure". I want to put in text and an image. when the image is centered, it can be as large as the widget is wide. However, when I left justify the widget (as it now appears), when I increase the image size, the legnth of the widget does not expand; thus, I must make the image smaller than I want. Why can't the widget lengthen when an image is left justified, as it does when it is centered?

    The blog I need help with is greenpetburial.org.

  2. panaghiotisadam
    Member

    Because left aligning the image means the rest of the content should wrap around, and it's the rest of the content that would make the widget expand, not the image. Delete what you've got in your widget and paste this:

    <a href="http://greenpetburialsociety.files.wordpress.com/2010/06/brochureimg.jpg">
<img class="alignleft" style="border:0;" src="http://greenpetburialsociety.files.wordpress.com/2010/06/brochureimg.jpg" alt="What will you do with your pet's body?" width="80" /></a>
<a href="http://greenpetburialsociety.files.wordpress.com/2010/04/brochuretrifold_bw_photo.pdf" target="_blank">What will you do with your pet's body?</a>
<p>PDF File</p>
<br style="clear:both;" />

    The last line I've added cancels that side effect of the wrap-around text, but I've made other corrections as well. You can change the width number, of course.

  3. greenpetburial
    Member

    Hi - If the image when centered does make the widget expand, I don't understand why the same couldn't be true when left justified. Nevertheless, I added your coding, but had the same problem - the brochure image went beyond the bottom of the widget. So I had to put back the original coding. Is there anything else I can try?

    Thanks!

  4. panaghiotisadam
    Member

    You're welcome.

    I already mentioned why "the same couldn't be true when left justified": "it's the rest of the content that would make the widget expand, not the image". It's a defect in the theme you're using (and other themes too): setting the image alignment to left or right says start the text next to the image, and the theme understands the image as, say, a single word; setting the alignment to none or center says place the text below the image, and everything works as it should.

    Before suggesting the code I pasted above, I tested it (using the same theme) and it works, so you probably made some mistake with the copy-pasting. Try again please, and if it doesn't work leave it there and let me know so I can check and see what's wrong.

  5. timethief
    Member

    @Panos
    I have change my Test blog to Misty Look posted your code in a text widget and the brochure image does not extend beyond the bottom of the widget.

  6. panaghiotisadam
    Member

    @tt: Yes, thanks. (Of course it doesn't - that's the purpose of the clear:both command I've added!)

  7. greenpetburial
    Member

    Hmmm - I copied and pasted and checked again - the widget still doesn't legnthen for me. I left your coding there for you to check. I really appreciate your help. Thanks!

  8. timethief
    Member

    @greenpetburial
    Will you please place a text widget with the code Panos provided in it in your sidebar? Something must be amiss with your copying and pasting because I have twice used that code in 2 different test blogs wearing Misty Look and it displayed properly in both test blogs.

  9. greenpetburial
    Member

    Yes, I did, I left the code Panos provided in the widget.

  10. timethief
    Member

    @greenpetburial
    Yes I see it using Firefox and it looks fine to me. The brochure image does not extend beyond the bottom of the widget. I click the image in the widget and there the image is on it's own page.

  11. greenpetburial
    Member

    I'm using IE 8.0 - and it does extend beyond the bottom of the widget. How can I make this work for IE?

  12. panaghiotisadam
    Member

    Oh boy. I knew IE ignores many web standards, but I didn't expect this too...

    Ok use this alternative - should be fool-proof:

    <table>
<tr>
<td>
<a href="http://greenpetburialsociety.files.wordpress.com/2010/06/brochureimg.jpg">
<img class="alignleft" style="border:0;" src="http://greenpetburialsociety.files.wordpress.com/2010/06/brochureimg.jpg" alt="What will you do with your pet's body?" width="80" /></a>
</td>
<td valign="top">
<a href="http://greenpetburialsociety.files.wordpress.com/2010/04/brochuretrifold_bw_photo.pdf" target="_blank">What will you do with your pet's body?</a>
<p>PDF File</p>
</td>
</tr>
</table>

  13. greenpetburial
    Member

    Voila! It works! Thank you for all the help!

  14. timethief
    Member

    YAY! for Panos .:)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags