Need help? Check out our Support site, then


breaks between images

  1. wendyannemclean
    Member

    Hi, I wanted to space my images out, give them a bit of breathing space but every time I went back into the page to edit it the gaps collapsed (I'm not able to use code, but had used the line
     
    for a line gap which I find somewhere on support. Ideally I'd like about 3 lines gap)
    To cheat I made blank images to put in instead so I didnt have to lay everything out again, but since updating my browser I've noticed they have drop shadows - not really the look what I was going for!
    Is there a different code that I could use, or can i get rid of the shadow gap so you wouldnt notice the blank images?

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

  2. To get rid of the shadows, you'd need to modify the coding of the images. But using white images isn't a good solution anyway: some users set their browsers to display different colors than the original ones of the page, so they'll see white rectangles instead of nothing; plus, the more the iamges, the more the loading time of a page. To add space after each captioned image, switch the editor to Text (=code) and paste this code after the image shortcode:
    <div style="clear:both;height:66px;"></div>
    Change the number to adjust the amount of space.

  3. wendyannemclean
    Member

    Thats brilliant thank you! I knew I was doing it a dodgy way. can I ask you another question? On the page http://wendymcleanartist.wordpress.com/works-1/

    I have a sidebar running down the right side (starting with the red image widget) then some blank images so further down some text on custom menus sit opposite the image they are related to. Any ideas how I could do this in a better way. the twenty twelve theme isnt that wide and wasnt that sure how I could get this to work in the main page block.

  4. Stupid question but what is the " image shortcode?"

    Thanks,

    Mike

  5. @Mike:
    When you insert a plain image, you see its actual code in the Text editor. When you insert a captioned image, you don't see the real code, you see a special WP-specific formula (shortcode) inside square brackets. Insert an image with no caption in a post, then insert the same image after you type something in the Caption field, and check the difference in the Text editor.

    @wendyannemclean:
    You're welcome.
    Your idea with the sidebar isn't ok, because the theme is responsive: it shrinks to adapt to different screen resolutions and devices. Scroll down to one of the links, drag the browser window to make it narrower and see what happens.
    First edit the page and select the no-sidebar template.
    Then turn the alignment of each image to left, type the link text below each image shortcode, turn it into a regular link using the link tool, then add the code I gave you above (this code does two things, it adds extra space but it also cancels the wrap-around effect of left aligned images, so each link can show next to the respective image).
    This is the simplest way to approximate what you tried to do. Try this first, and then I can give you further options.

  6. wendyannemclean
    Member

    Hi cheers, yes a terrible idea! Thank you - I may not have noticed that!
    I've been trying out the text to the side on this page
    http://wendymcleanartist.wordpress.com/works-2/
    It would be good to be able to indent this away from the image without changing the text justification.
    Also is there somewhere where wordpress lists these shortcodes?
    Thanks again for your help!

  7. It would be good to be able to indent this away from the image without changing the text justification.

    If the images were all the same width, this would be very simple. Since they have varying widths, and since the theme is responsive, things get complicated. You have to enclose each image in a left-aligned section and each group of links in a right-aligned section, and give the right widths to these sections. So, for each image and group of links, you need this:

    <div style="float:left;width:70%;margin-right:5%;">
    IMAGE CODE HERE
    </div>
    <div style="float:right;width:25%;padding-top:20%;">
    LINKS HERE
    </div>
    <div style="clear:both;height:66px;"></div>

    You can change the 25% to adjust the horizontal positioning of the links (naturally, it has to be the same for all the groups of links on the same page, so that they will be vertically aligned). Just make sure the sum of the two widths plus the right margin is always equal or less than 100%.
    You can also change the padding-top percentage, to adjust the vertical positioning of the links in relation to the image.

    An alternative would be to use table coding (one two-column table for the whole page). If you're interested in this, check my tutorial first:
    http://wpbtips.wordpress.com/2013/04/09/table-coding-for-wordpress-com-users/

  8. wendyannemclean
    Member

    Thats great thanks, working on it now!
    How does the number of pixels relate to the total width of the usable area? Is there a set amount or does it depend on the size of your images? What is the optimum image size for an image appearing in the main body?
    Also a friend of mine was wondering if they are able to widen the body area of their blog. Is it unflexable because of the theme? Are there wider themes?
    Really enjoying reading your blog and getting to know how to take control of my blog layout, thank you!

  9. wendyannemclean
    Member

    Also sorry - if I keep switching between visual and text/code in the editing page is it ok, or will it cause problems/errors?

  10. It is generally a bad idea, because sometimes code gets stripped out when you do that.

  11. How does the number of pixels relate to the total width of the usable area? Is there a set amount or does it depend on the size of your images?

    Which number of pixels?

    What is the optimum image size for an image appearing in the main body?

    I don't know what to reply: I find the question too general as well as vague.

    Also a friend of mine was wondering if they are able to widen the body area of their blog. Is it unflexable because of the theme? Are there wider themes?

    Yes, themes vary in width.
    Some have fixed width, some have flexible width (up to a reasonable maximum).
    You can't change the fixed width or the maximum width without the Custom Design upgrade.

  12. If you set a class for the pictures with CSS that had something like

    .photo_left { clear:left}

    and a class to clear the float, something like

    .clear_floats {clear:both}

    This would give you flexibility as you could also create a class for .photo_right. You could then choose to use the .clear_floats class when you want the effect of wrapped text (or not.)

  13. @leelondon: You're in the wrong forum.

Topic Closed

This topic has been closed to new replies.

About this Topic