WordPress.com

1. magicandmedicine1
   Member
   Mar 5, 2013, 3:37 PM

   Hi there

   I want to be able to list books found on goodreads onto my blog so that when you click on it, it takes you to the page for that book on good reads. I'd like the title and author of the book displayed to the right of the image. I'm aware that there is a widget for goodreads, but I don't want a sidebar for book covers on my blog page, I'd like them to display as the main feature on this page: http://thackraymagicandmedicine.wordpress.com/researchmedia/booklists/childrens-books/.

   Does anyone please know how I can go about this? I've searched the forums but haven't been able to find a solution.

   Thanks for your help.

   The blog I need help with is thackraymagicandmedicine.wordpress.com.

2. raincoaster
   Member
   Mar 5, 2013, 3:51 PM

   Just upload the image as an image and align it left. Then the text will go on the right.

3. designsimply
   Staff
   Mar 7, 2013, 1:36 PM

   When you put several left aligned images in a row with a short amount of text, they have the tendency to stack up oddly if you don't clear each next set of content. You can get around that by clearing the floats.

   Here is an example:

   Add the image and accompanying text as usual, and then view the HTML for the post by clicking the Text tab in the editor and add this to the beginning of each section you want to set apart:

   <div class="book-list">

   And add this to the end of each section you want to set apart:

   </div>

   Here is an example of a full HTML block with a linked image and a title:

   <div class="book-list"><a href="BOOK_LINK"><img src="IMAGE_LINK" alt="Book Title" width="320" height="240" class="alignleft size-thumbnail wp-image-1234" /></a>Book Title</div>

   The "book-list" class can be named anything you like. Once you have your HTML setup, go to your Appearance → Custom Design → CSS editor and add this CSS:

   .book-list {
   	clear: both;
   }
   
   .book-list img {
   	margin-top: 0;
   }

   I added the margin-top value because I think it makes the text line up a little more nicely.

4. magicandmedicine1
   Member
   Mar 11, 2013, 5:10 PM

   Many thanks designsimply.

5. designsimply
   Staff
   Mar 11, 2013, 7:59 PM

   No problem! :)

Topic Closed

This topic has been closed to new replies.