Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

12

placing multiple stacked images into a blog

  1. cruisenomad
    Member

    I have been trying to make my blog look more professional and as photography is the main reason I started the blog I tried to create a multiple image that looks like photos thrown onto a pile. I only used four images each one was placed on the bottom of the other one creating a four image montage.
    I created these in photoshop 4 and tried multiple ways of creating JPEG, and PNG files all that has happened when I import to my blog is that the image appears inside a rectangle of white with edges and I have been trying to get it to be just the four images by them selves I have been able to see this in other peoples blogs and it looks very good and I would like to be able to do that sort of thing for my blog to increase the overall look.

    If anyone has any ideas i would love to hear them

    Thanks in Advance

    Chris Taylor.

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

  2. thesacredpath
    Member

    Can you give us a link to an example of what you are talking about on your site please?

  3. cruisenomad
    Member

    Hi Sacred path

    If you go to http://www.pixelatedimage.com/blog/ you will see examples of what I would like to attempt to recreate on my blog.

    I have also placed an example on my post page of what I have been able to upload called example.

    Thanks Chris Taylor

  4. panaghiotisadam
    Member

    At the moment your composite image shows up inside a grey frame because you've made it a captioned image. Click on the image while on the visual post editor screen, click the edit icon, delete the caption, click Advanced Settings, type 0 in the Border field, click Update (image), click Update (post).

  5. panaghiotisadam
    Member

    By the way, note that you get better quality if you upload images downsized to the dimensions you want instead of letting WP do the downsizing - see here:
    http://wpbtips.wordpress.com/2010/01/16/image-quality/

  6. cruisenomad
    Member

    Thanks very much for your help here guys I will try all of these and I will get back to you letting know if I am able to solve it this way.

    And I will look into uploaded images dimensions at the link.

    Thanks again

    Chris

  7. cruisenomad
    Member

    Hi all
    I have tried to type 0 in the border field, although nothing has changed I am still not able to get the images to seem like they are in Davids blog http://www.pixelatedimage.com/blog/

    I have been able make my images, at least my Landscape images at this time seem to pop in my new blog.

    So many thanks for that.

    I will keep looking for a way to make multiple images for my blog.

    Chris

  8. panaghiotisadam
    Member

    I thought you were talking about this image in particular:
    http://cruisenomad.wordpress.com/2011/09/26/example/

    Are you talking about all your images? Some of them are captioned, some aren't, some have borders, some don't - please explain in more detail what exactly you're looking for. "Get the images to seem like they are in Davids blog" doesn't tell us much.

  9. designsimply
    Staff

    You did remove the border, but it's done with "border: none" not 0. Looks like you figured that part out.

    If you want to remove the background color from behind captioned images in the Twenty Eleven theme, you can use this: 

    .wp-caption {
    background: none;
}

  10. cruisenomad
    Member

    Hi panaghiotisadam the style that I like is on David Du Chemin's blog its called pixalated image he has 5 or 6 tear sheets placed together that is what I am trying to achieve with my images you can visit his blog at http://www.pixelatedimage.com/blog if you would like to have a look.

    Hi Happiness engineer
    Where do I use this , wp- caption { background: none} is it in the CSS Class or the Styles

    By the way I really appreciate all the help in improving my blog as this is my first ever
    query

    Chris

  11. panaghiotisadam
    Member

    @designsimply: In my reply I was talking about editing in the visual editor, not CSS editing. In the visual editor, it's done with 0.

  12. designsimply
    Staff

    You would put the wp-caption CSS code into the Appearance → Custom Design → CSS page inside your blog, but you do need to purchase the paid upgrade for Custom Design if you want to make changes to the CSS. You can try out the code I listed above and click the Preview button to check out how it works.

    If that's the only design change you want to make, then it might work just as well for you to just not use a caption. A lot of the WordPress.com themes use a border and background color for captioned images but not regular images. Try editing the image and remove the caption to see if that gets you the result you're after for the border.

    If you do want to learn more about the custom design upgrade, check out this page: http://en.support.wordpress.com/custom-design/

  13. panaghiotisadam
    Member

    @cruisenomad: I did visit David's blog, and it's got all sorts of things. Please point to a specific image in a specific post.

  14. designsimply
    Staff

    Ah yes, I was in CSS mode. You're right, border is 0 in the visual editor. :)

  15. wpgaurav
    Member

    I think I understand what (s)he is asking for! She is trying to put a bunch of images at one place, one behind one, similar as Slideshow but not the same.

  16. cruisenomad
    Member

    Hi panaghiotisadam
    Its under The Inspired Eye, Volume 3. the images (of 6 tear sheets are placed one at the bottom of the next and there seems to be a drop shadow as well)
    By the way your 0 and losing the caption seems to work I will be experimenting over the next few days and will get back to you to let you know my results.

    Happiness Engineer
    Thanks I might have to get the upgrade if I do not solve this some other way, I am new to blogging and want to become better with every blog that I produce.

    again the help has been fantastic.

    Kudos to all

    Chris

  17. designsimply
    Staff

    I found this example: http://www.pixelatedimage.com/blog/wp-content/uploads/2011/09/InspiredEye3-Comp-Vertical.png

    That image was created using a graphics program like Photoshop before it was uploaded for WordPress. I bet you could find a tutorial about that if you search online.

  18. cruisenomad
    Member

    Thanks wpgaurav mate wrong gender its he minus the S.
    and no not a slide show just placing the next image at the bottom of the before image.

    I placed an example on my blog it under Uncategorized.

  19. cruisenomad
    Member

    Hi Happiness Engineer

    I will try that

    Thanks

  20. wpgaurav
    Member

    @cruisenomad oops. Sorry for that. :) I've seen the example. That's brilliant.

  21. cruisenomad
    Member

    wpgaurav

    Its cool I might need a better bigger picture for my gravitater. and it does look cool Im almost there thanks to all of you.

  22. thesacredpath
    Member

    Do you have the Custom Design upgrade?

    On the image example you posted under uncategorized, All I'm seeing right now is the background that happens when you hover over the image. If you want to get rid of that, the following CSS will do it (if you have the custom design upgrade). I don't know of anyway to get rid of it from within the image HTML coding.

    a:focus img[class*="align"], a:hover img[class*="align"], a:active img[class*="align"], a:focus img[class*="wp-image-"], a:hover img[class*="wp-image-"], a:active img[class*="wp-image-"], #content .gallery .gallery-icon a:focus img, #content .gallery .gallery-icon a:hover img, #content .gallery .gallery-icon a:active img {
background: none;
border-color: transparent;
}

  23. cruisenomad
    Member

    Hi the sacred path

    Looks like I will have to upgrade to get this to do what I would like with this issue, I will try some things over the next few days and see how it goes.

    Thanks for the help.

    Chris

  24. thesacredpath
    Member

    You can put the above code into the CSS edit window at appearance > custom design > CSS tab and use the preview function to take a look at it. You might need to force refresh the preview page as it sometimes takes that to show the actual change.

  25. designsimply
    Staff

    I experimented with this a little. Totally fun. :) It won't tilt the images, but it will make a nice looking stack of images. I'd be interested to see if you decide to try it out!

    First, make a post with a gallery in it and make sure to set columns to "1" when you add the gallery: http://en.support.wordpress.com/images/gallery/

    Then add this to the Appearance → Custom Design → CSS page and click Preview: 

    #content .gallery .gallery-icon {
    position: relative;
    background: #fff;
    border: 1px solid #fff;
    -moz-box-shadow: 0px 2px 10px #333;
    -webkit-box-shadow: 0px 2px 10px #333;
    box-shadow: 0px 2px 10px #333;
    float: left;
    padding: 5px 5px 10px 5px;
}

#content .gallery .gallery-icon img {
    border: none;
    padding: 0px;
}

    Note: the 2nd rule in this CSS is specific to Twenty Eleven. It removes some extra borders and padding from gallery images.

    If you do a single column stack as suggested above, you'll probably want to float the stack left too: 

    #content .gallery {
    width:180px;
    float:left;
}

    Note: you may need to adjust the width depending on your media size settings.

  26. panaghiotisadam
    Member

    But the easy way is the one designsimply originally suggested: you edit the images in Photoshop, rotate them, turn them into one composite image (as you had already done), then simply add a dropshadow effect (Layer > Layer Style).

  27. cruisenomad
    Member

    Hi All

    I Think I will try through Photoshop. as I already have the basic idea and if needed I will have to upgrade to place it into my page.

    I will definitely be trying it on my next blog Durban - South Africa I have some great images that will work well.

    I want to thank you all for everything you have suggested and will try them all.
    Chris

  28. shimworld
    Member

    @cruisenomad
    I know you're after just one thing - vertically stacked images. In the event you get tired of that some day, take a look at http://www.shapecollage.com/ that gives you flexibility to create various different kinds of stacked photographs.

    As a professional photographer, I take the less aesthetic approach by keeping focus on the images instead of layout. If you work with a lot more photographs than 4 per blog, say, 20 to 30 ... I wrote about the method I use that easily inserts this many photos http://shimworld.wordpress.com/2011/08/30/use-windows-live-writer-to-easily-insert-many-images-into-your-wordpress-com-blog/

  29. cruisenomad
    Member

    Hi Shimworld

    Thanks for the advise I have a Mac and I am not sure the Windows program will work although the shape collage has some nice looking merits.

    I am not a professional yet even though that is one area I hope to move towards.
    I have a web site and now have been starting my blog. I have not yet sold even one of my images as I have not put myself out there enough.
    Im a bit scared that my images are not good enough.

    I am lucky I do travel a lot working on cruise ships although this makes me hard to contact at times.

    Chris

  30. wpgaurav
    Member

    Picasa is better than photoshop in making collages, online(? Not sure!) or offline. I tried photovisi.com for a few minutes and created a collage.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags