Images

  • Author
    Posts
  • #1280051

    celiaknox
    Member

    I’m having trouble aligning images the way I want them. When I write my post in the “visual” mode, I can set my images how I want them. But when I preview the post, the images are misaligned, and some text appears in different places. FYI, I haven’t published this particular post yet.

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

    #1280139

    raincoaster
    Member

    What browser and version are you using? Are you using the http or https version of the site?

    #1280144

    celiaknox
    Member

    I’m using Chrome Version 27.0.1453.93 m
    And using the http version.

    #1280152

    raincoaster
    Member

    Try the https version. Some people have said that helps.

    #1280169

    celiaknox
    Member

    Thanks for your help. I tried, but it didn’t make any difference.

    #1280172

    raincoaster
    Member

    Okay, then I’m going to need you to be more specific, preferably giving us a link to a post that has gone wonky on you. How, specifically, do the images move? What kind of alignment were you going for in the first place?

    #1280173

    celiaknox
    Member

    Sorry, I should have been more specific… The problem occurs when I try to put two images side by side. I shrink them to fit, and Left and Right align them into place. Then I enter to the next line and add more images, and so on. I can’t actually give you the link as I haven’t published the page yet, I’ve just looked at it in the Preview setting.

    #1280174

    celiaknox
    Member

    … Unless you can view preview pages??

    #1280181

    justpi
    Member

    Images aligned left or right mean text-wrap; that is, the rest of the content is supposed to start next to instead of below the image. This creates undesirable side effects when the images are unequal and/or when you combine them with text. What to do to correct these side effects depends on the particular situation. You need to publish the post so we can check things and tell you how to deal with this.

    #1280184

    celiaknox
    Member

    I see. It sounds like I need to do a bit of homework!
    I’ve decided to just publish my current post with one image per line, that way there’s no alignment issues.
    And I’ll try again next time after I understand it all a little more.
    Thanks very much for your help.

    #1280185

    justpi
    Member

    Once you publish the post and I see its content, I can tell you what you could have done.

    #1280186

    raincoaster
    Member

    I myself generally can’t be bothered with fiddling, so I use large images and center them all. It saves so much time.

    #1280187

    celiaknox
    Member

    Raincoaster, that’s what I usually do, too. I just wanted some images smaller, and to make the post shorter in length.
    Justpi, I have published it. If you could give me any tips that would be great!

    #1280190

    justpi
    Member

    a) I checked a few of your images, and they all seem to be in a 4/3 or 3/4 aspect ratio. But some of them are landscape-shaped and some are portrait-shaped. I don’t know if you wanted/tried to put a landscape-shaped and portrait-shaped image side by side: this would never look good, in my opinion, but anyway if you did that and the two inserted versions didn’t have the same height, then next image would show up below the shorter image instead of in a new row (because of the wrap-around effect). To prevent this from happening, and make sure the images would show in rows of two, you’d have to switch the editor to Text (=code) and paste this after each pair of image codes:
    <div style="clear:both;"></div>
    (edited to fix the code: by Tess)

    b) Two images side by side would look ok if they were both landscape-shaped or both portrait-shaped. In the theme you’re using, the maximum width that will allow two captioned images in a row is 269 pixels. So you’d make things easier if you went to Settings > Media and set the default width for the medium option to 269; then you’d simply select that option when inserting such images, and pairs of left/right aligned images would show side by side (provided you inserted them with no space or line break or paragraph break between them).

    c) But actually both #a and #b are unnecessary. Since you insert several images with no text after each image, just use the gallery feature instead of inserting individual images, selecting a two-column display.
    http://en.support.wordpress.com/images/gallery/
    (Again you may need to go to Settings > Media and adjust the default widths.)

    d) And a more important tip: the files you upload are unnecessarily large. The ones I checked are 3264×2448 or vv (while the maximum that can fit in the theme you’re using is 610 pixels). This means you waste your storage space, you make your pages load slower, and you get slightly reduced quality on the post. Ideally you should use an image editing application to downsize copies of your images to the desired width, and upload and insert those copies instead of the oversized originals.

    #1280191

    justpi
    Member

    Oops – a typo in the code. Should be:
    <div style="clear:both;"></div>
    (note: Tess fixed the code above)

    #1280272

    celiaknox
    Member

    Loads of good info. Thanks for taking the time to help me out. I was aware that the images I upload are really large, I was just being lazy and not resizing them. I will start doing that though. I didn’t know about the gallery feature, but it makes sense to use since the majority of my posts follow the same format. Anyway, I’m going to play around and see what works! Cheers.

    #1280273

    celiaknox
    Member

    Loads of good info. Thanks for taking the time to help me out. I was aware that the images I upload are really large, I was just being lazy and not resizing them. I will start doing that though. I didn’t know about the gallery feature, but it makes sense to use since the majority of my posts follow the same format. Anyway, I’m going to play around and see what works! Cheers.

    #1280278

    justpi
    Member

    You’re welcome.
    As you realize, the advantage of the gallery feature is that it automatically arranges images in rows and columns, no matter what their size or shape. Plus it can display your images as a carousel slideshow, plus you can also select the gallery format for your posts so that only one thumbnail will show on the blog front (faster loading, less scrolling down).

    #1280282

    celiaknox
    Member

    I don’t think the theme I use supports columns, because there’s no ‘column option’ in the gallery settings. But I have gone with the mosaic style which I’m really happy with, so it’s all good.

    #1280299

    justpi
    Member

    The gallery feature works the same on all themes. The Columns setting is on the same screen with the Type setting, but it works/shows only when the Type is set to the default option (Thumbnail Grid).

The topic ‘Images’ is closed to new replies.