Can't get images side-by-side

  • sabfoto

    (@sabfoto)


    13 years, 5 months ago

    Hi All!

    I read a lot of threads about this but I didn’t find an answer that worked for me.

    Here is my situation:
    I have to WordPress blogs with Prophotoblogs.com themes. I was building them side-by-side and using all the same settings to keep my workflow similar for two businesses. All of a sudden on one, when I would upload two vertical images, they stopped going side-by-side. When I would load the same two images in the second blog, it worked. Same settings, same files, etc.

    One of the threads talked about encasing them in a <div> tag or something, so I tried that, only, I did it on the one that worked. Well, now that blog doesn’t work anymore. All the legacy posts (in pages) are now mis-aligned and new posts post the images on top of each other.

    Any ideas? It had to have changed something global since it affected things already posted right?

    Thanks a ton in advance!

Viewing 13 replies - 1 through 13 (of 13 total)
  • Mark / t31os

    (@t31os_)

    13 years, 5 months ago

    Can you link to the problem page(s)?

    Without being able to see the page, there’s numerous things that be causing the issue, so any suggestions would be pure speculation and guess work..

    Would likely take only a few moments to figure out if it’s possible to see one of the problem pages.

    Thread Starter sabfoto

    (@sabfoto)

    13 years, 5 months ago

    Sorry, that makes sense! I have it in under construction mode as I build but I’ll turn it on for sure to get help.

    You can see the issue here: http://sabfoto.com/?page_id=93

    Prior to adding that <div> into the html code of a single post (which isn’t up there anymore, it was just a dummy test post) all of those images that are vertical used to be 2-up side by side and now they’re all separated. I didn’t change ANYTHING in the post that I linked to here. That’s what I don’t get. I didn’t even touch any other posts or settings within the entire blog. Just that dummy post. Any new pages do what this page is doing as well.

    Here’s the code for the first couple images:

    <img class=”p3-insert-all size-full alignnone” title=”sab_080906_2756_highpass” src=”http://sabfoto.com/wp-content/uploads/2010/10/sab_080906_2756_highpass3.jpg&#8221; alt=”” width=”400″ height=”602″ /><img class=”p3-insert-all size-full alignnone” title=”sab_080906_2750_highpass” src=”http://sabfoto.com/wp-content/uploads/2010/10/sab_080906_2750_highpass2.jpg&#8221; alt=”” width=”400″ height=”602″ /> <img class=”p3-insert-all size-full alignnone” title=”aps_100617_1876″ src=”http://sabfoto.com/wp-content/uploads/2010/10/aps_100617_1876.jpg&#8221; alt=”” width=”400″ height=”601″ /><img class=”p3-insert-all size-full alignnone” title=”aps_100617_1886″ src=”http://sabfoto.com/wp-content/uploads/2010/10/aps_100617_1886.jpg&#8221; alt=”” width=”400″ height=”601″ />

    Thanks a ton!

    cipals15

    (@cipals15)

    13 years, 5 months ago

    I think this class=”p3-insert-all size-full alignnone” is giving the problem.

    As a solution, replace it with:

    style=”float: left;”

    esmi

    (@esmi)

    13 years, 5 months ago

    Or remembering to select “Align: Left” when inserting images.

    Thread Starter sabfoto

    (@sabfoto)

    13 years, 5 months ago

    When I took out the class and then added the style it put them side by side in the post area but then when I published the post they were centered and stacked.

    :/

    I’m not familiar with a lot of this and I also need it to be really easy for my employee to do.

    I still don’t get why changing something on that one dummy post would change existing posts and make them all messed up.

    cipals15

    (@cipals15)

    13 years, 5 months ago

    Hmm.. Can you send the link to the ‘messed up’ post? Thanks.

    I recommend using Firefox add-on named: “Firebug” which helps you analyze HTML files easily through some visualization improvement.

    Link here: https://addons.mozilla.org/en-US/firefox/addon/1843/

    Thanks.

    Mark / t31os

    (@t31os_)

    13 years, 5 months ago

    You should be able to select the image alignment by clicking on the edit icon shown over the image when in visual mode..

    Selecting left alignment should produce something like this in the editor if you now look in the HTML tab.. (assuming you’ve set link to none)

    <img class="alignleft size-full wp-image-536" title="example-title" src="http://example/wp-content/uploads/2010/08/example.jpg" alt="" />

    Although the markup should differ somewhat the alignment class should be reflected in the HTML that appears in the editor…

    alignleft left aligned
    alignright right aligned
    alignnone (which you have now) when no alignment is wanted

    You have all the necessary CSS in place, it’s a matter of correctly setting the alignment for the images, either by hand directly in the HTML, or in Visual mode using the Edit icon shown over each image..

    Thread Starter sabfoto

    (@sabfoto)

    13 years, 5 months ago

    Thanks for the help. It still doesn’t work though. All that happens is the second image will align to the right if I select that, but it’s still on the next line, they’re not side by side.

    Do you have any idea why all the legacy posts that were already up there have changed? It seems to me like somehow, even through a keyboard shortcut, I changed something global and that this problems isn’t just something I’m doing when putting images in. It was FINE 3 days ago, then all of a sudden everything was wonkus.

    common shortcuts I use (because of other programs) are (on a Mac):
    command+f
    keystrokes f, g, t, sometimes with command added, etc.

    ?

    Mark / t31os

    (@t31os_)

    13 years, 5 months ago

    I don’t use the shortcuts, but you can see the hotkey list by clicking the kitchen sink icon in visual mode, then the help button(last one, bottom right), then clicking on the hotkeys tab of the help window..

    I’m pretty sure that what i suggested above will work for you though..

    Why multiple posts would be effected i cannot fathom, did you update any plugins recently? Or the theme maybe?

    Thread Starter sabfoto

    (@sabfoto)

    13 years, 5 months ago

    I didn’t. It baffles me. I was working on the second blog with my partner, it started to get weird. Then we went setting by setting with this one and everything matched, then I tried a fix I found on these forums and then the second blog was messed up. Strange.

    I appreciate the time and effort! I think for my purposes, it’ll be safer and easier to just make verticals 2-up and the same size as horizontals in Photoshop. Then I don’t have to worry!

    🙂

    Mark / t31os

    (@t31os_)

    13 years, 5 months ago

    then I tried a fix I found on these forums and then the second blog was messed up. Strange.

    Can you remember what that was, possibly related?

    And no problem, you’re welcome.. 😉

    Thread Starter sabfoto

    (@sabfoto)

    13 years, 5 months ago

    I read somewhere that the two images needed a <div> wrapper or something like that. So I put that before, between and after both images, trying different combos. It didn’t work and after that is when I had the problems.

    Mark / t31os

    (@t31os_)

    13 years, 5 months ago

    Did you adjust the alignment of the element in the visual tab? Or maybe even switch between tabs after adding the new code? It may be that after introducing the new code that something didn’t play nice with the editor (one way or another) and reset the alignment to none(alignnone) which is the cause of your problem..

    If you changed each instance of alignnone in your code to alignleft your images would then sit as you want them to.. (or as i said before you can also do that by using the edit icon on images).

    I’ve tested applying a left float on your images (as would happen if they had the alignleft class) and they line up beside each other…

    I’m off shortly, but hope you manage to get your images working the way you want.. 🙂

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Can't get images side-by-side’ is closed to new replies.