Can images be inserted amid the text in a widget?

• 

  calgough · Member · Jul 29, 2012 at 9:42 pm

  • Copy link
  • Add topic to favorites

  Is it possible – for example, using HTML – to insert an image INSIDE/ALONGSIDE the text of a widget? Specifically, I am hoping to be able to insert a (small) image of a book cover underneath each title in my list of books I’m reading or have finished reading – this list is one of my sidebar widgets, and at the moment consists only of text. – Cal Gough (http://www.calgough.wordpress.com)
  Blog url: http://calgough.wordpress.com/

  The blog I need help with is: (visible only to logged in users)

• 

  justpi · Member · Jul 29, 2012 at 10:07 pm

  • Copy link

  Yes of course it’s possible. For the basic coding see here:
  http://wpbtips.wordpress.com/2009/04/01/codes-useful-for-text-widgets/

  But your list is long: if you add images below each entry, it will become too long in my opinion. I think it would be better if you placed each text next to instead of above each image. If you’d like to try that, let me know.

• 

  timethief · Member · Jul 29, 2012 at 10:08 pm

  • Copy link

  Yes you can include an image in a text widget.
  http://en.support.wordpress.com/widgets/text-widget/#adding-an-image
  http://en.support.wordpress.com/widgets/text-widget/
  The easy way to do this is create a draft post upload the image and enter text ie. and do everything in it. Then when you have what you want, switch to the HTML (Text) editor and copy the code. Paste the code into a text widget and when it’s displaying correctly delete the draft post.

• 

  calgough · Member · Jul 30, 2012 at 2:09 am

  • Copy link

  Yes, I would like to position the text (i.e., the title and author of the book) next to, rather than below, the image. So how can I code that to happen???

  Thanks for your earlier reply.

• 

  raincoaster · Member · Jul 30, 2012 at 2:21 am

  • Copy link

  Just align the image to right or left via the workaround TT has told you about.

• 

  shollows · Member · Jul 30, 2012 at 2:39 am

  • Copy link

  Hi, I would like to include the image widget on my blog, but it asks for an image URL… I do not have this only a .jpg file (by-the-way, I have already included one with an image URL as I happened to get one from my website). Please help? Thank you!

• 

  raincoaster · Member · Jul 30, 2012 at 2:45 am

  • Copy link

  You have to upload the image to your media library first. Then you can get the URL, which will end in .jpg.

• 

  shollows · Member · Jul 30, 2012 at 2:51 am

  • Copy link

  Thank you so much raincoaster! Your advice makes perfect sense… :-)

• 

  justpi · Member · Jul 30, 2012 at 7:57 am

  • Copy link

  @calgough:
  As raincoaster said to shollows, first you need to upload the images via Media > Add New and copy the File URLs you’ll get.
  But then forget timethief’s workaround, as it will never produce acceptable results without extra coding. For each image and text pair, use this code:

  <img class="alignleft" style="width:60px;" src="IMAGE URL HERE" />
  <p style="margin-top:10px;">TEXT HERE</p>
  <br style="clear:both;" />

  The two numbers are just suggestions: you can change them to modify the size of the thumbnails and the vertical alignment of the text.

• 

  calgough · Member · Jul 30, 2012 at 12:01 pm

  • Copy link

  For positioning the text alongside (rather than under) the image, what is the alignment code to use, please, combined with the image-insertion code? (I’m wanting to position the image to the left, and the text alongside the right-hand side of the image, beginning at the top of the image.)

  Thanks, to all who’ve answered this thread so far. (I feel like I’m gradually getting closer to being able to insert a thumbnail-sized image into the list of books I’m reading, which is in a widget in my sidebar.)

• 

  justpi · Member · Jul 30, 2012 at 12:07 pm

  • Copy link

  ? I gave you the code in my previous reply.