WordPress.com

1. kikiorleans
   Member
   Dec 7, 2011, 9:21 AM

   Hi, I tried out the new AutoFocus theme (GREAT theme, BTW!) on my blog, but it didn't turn out as expected:
   1. I have mostly 2 smaller pics currently displayed next to each other, and when I activate the AutoFocus theme, the show on top of each other. I tried to change their size in the advance pic settings to make them appear next to each other again, but it seems nothing works (I can provide screen shot if necessary).
   2. Even though I have set up widgets with links, blogroll etc, they didn't show up in AutoFocus.

   I have switched back to TwentyTen for the time being - hope you can help with a solutions for the picture issue, and tell me what I need to do to make my current widgets show in AutoFocus.

   Thanks very much & regards,
   Kiki
   Blog url: http://dinnerfornone.wordpress.com/

2. philiparthurmoore
   Staff
   Dec 7, 2011, 1:56 PM

   Hi Kiki. I'm quite jealous of your Chocolate Covered Mulled Wine Cherries. My goodness. No words.

   1. The reason your images are displaying on top of each other is because they don't have .alignleft or .alignright classes associated with them, which basically means that you just need to align those images to the left when you insert them into your post from your media upload screen.
   2. AutoFocus supports a widgetized sidebar on pages only, not posts. For more information about this, see AutoFocus' Theme Showcase

   Keep cooking, please. Those photos are amazing.

3. panaghiotisadam
   Member
   Dec 7, 2011, 3:01 PM

   For those image pairs you must set the image alignment to left or right as well as downsize the images, because the post column in AutoFocus is narrower than in 2010. For two equal images side by side in AutoFocus, maximum width is 280px (or 295 if you eliminate the margins the theme adds).

   By the way, your images link to the original files alone when clicked. Is that intentional or not?

4. kikiorleans
   Member
   Dec 7, 2011, 9:14 PM

   Thank you philiparthurmoore for the cherry & cooking comment - wish I could send you some chocs :-) In TwentyTen I used to center both pics, so I never thought that could be the problem.

   And thank you panaghiotisadam for the max width info. Yes, it's intentional that the images link to the original files alone.

   Now I just tried doing the .alignleft/.alignright thing, but I feel really daft because I still can't get them to show up properly next to each other. There's either a gap between them when I size them at 280px width, or if I size them at 295px they show up left pic in one line, text on the right to it, then in the next line text and 2nd pic to the right.

   I assumed I need to do the align left + right thing in the advanced pic settings - is that correct? If not, could one of you e-mail me foolproof instructions?

5. timethief
   Member
   Dec 7, 2011, 9:56 PM

   @kikiorleans
   We Volunteers do not provide support by way of email. We do have extensive support documentation. :)
   image alignment
   Side by Side
   If you would like to see images appear side by side on the same line, put the images next to each other and give them both either left or right alignment. Make sure the images are small enough that they will both fit on one line, including borders and margins.

   The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. They are used to achieve wrapping text around images on either the right or left hand side, or to display an image that’s centered without text on either side of it. If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.

   Align-left means position left, with the rest of the content wrapping around the right side of the image.
   Align-right means position right, with the rest of the content wrapping around the left side of the image.
   Align-center means position center, with no wrap-around (= the rest of the content below the image).

   So if you want your images to be side by side on the same line start by setting the alignment of all three images to left. To prevent the staggered effect what you do is insert the following snippet of code into the HTML editor after each image/text pair:

   <br style="clear:both;" />

6. panaghiotisadam
   Member
   Dec 7, 2011, 10:04 PM

   @kikiorleans:

   a) I don't see the point of making the images clickable when the originals are almost the same size. You would get better quality on the post if you used an image editing application to downsize copies of your originals to the exact dimensions you want on the post, and uploaded and inserted those copies. See here:
   http://wpbtips.wordpress.com/2010/01/16/image-quality/

   b) The gap is there because (as I mentioned in passing above) Autofocus automatically adds margins to left- or right-aligned images. To get those pairs side to side with no gap at all between them, click on each image in the Visual editor, click the edit button, set the alignment to left; then click Advanced Settings, set the width to 295, delete the height number (so that the height will adjust itself without your having to calculate it), type 0 in the "Horizontal Space" field, click Update. Update post when you're done with all the images.
   (Personally I wouldn't do it that way: I would change the code in the HTML editor, as it is a lot faster, but I don't know if you are familiar with coding.)

   c) No experienced forum volunteer gives instructions via email: we offer our help to a community, not to each user separately. The whole point of the forums is that the discussion is public, so we can all help one another and learn from one another.

7. kikiorleans
   Member
   Dec 8, 2011, 12:53 PM

   Sorry for asking for e-mail instructions. I was reallly desperate here, especially as I'm not familiar with code. I think I'll manage with above instructions though. Thank you all for your help!

Topic Closed

This topic has been closed to new replies.