SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resizing images on a blog post

    Hi everyone,

    I'm styling a blog that allows users to post multiple images up. I would like the images to be in the following format:
    1st - large, 2nd - large width, half size. 3rd and 4th - small.


    I want to make it easy for the editors to just upload the images and the site take care of resizing as I they (the editors) may not have access/skill/experience with photo editing software

    I'm wondering what the best way to size a set of photos would be using only CSS? I was thinking of psuedo children? e.g :first :nth-child(2)??

    Many thanks!

  2. #2
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    One way to do this is to set up the sections accordingly and specify the width and height of the images 100%. Click here to see an example.

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Resizing images by setting width/height combos using CSS is a very poor method. Not to mention it fails miserably when the aspect ratio is unknown. What I would recommend is using a service like sencha io src to resize the images for you. If you want greater control with different aspect ratios apply the images as backgrounds and use background-size: contain. That trick work s incredibly well when image sizes and orientations are unknown yet the images need to "fit" in a container with defined relative or absolute dimensions. If the image is content than you might get slapped for using a background-image but I think it is a worth while trade off. You could always place the images down as normal image tags and hide them if your gun-ho on having actually image tags yet would like to use the power of CSS3 background-size: contain.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response, I'll have a play around.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I've just found another example of what I am trying to achieve. If you upload multiple images on Facebook (as of 10 April 2012) it displays them in the feed like so:


    Thanks for the feedback so far, but is there another way to achieve this?

    Many thanks

  6. #6
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Like so?


  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes like that, so the method you proposed previously would suffice, but is it the best way of doing this?

  8. #8
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm sure there are other ways in which you can get similar effect. Unless you have time to search for a better one, I would just use the one that serves your need and perhaps fine tune it as you go along. You might pick up a few things by doing it.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, decided to just drop it and keep it simple by having one large image.

    Thanks for the feedback.

  10. #10
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use Image crop option after uploading and before saving of images.
    Lokesh Singh
    Digital Marketing
    Online Education

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers guys!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •