Post styling: image dimensions

  • Hello, I’m working on creating my own theme from scratch. What I’m having trouble with at the moment is the images in my posts.

    Compare:
    https://www.gregorygainsborough.com/sketchbook/ (a twentyeleven child theme)
    with
    https://www.gregorygainsborough.org/sketchbook/ (my theme-in progress)

    My problem (should be obvious) is the image size. I can resize images in my style.css, (by applying a .img style to a class specified in my loop), but, because the imported images are all of different dimensions, the resizing that works for one image (eg: width:500px; height:300px) will stretch or squeeze another image.

    Twentyeleven is doing something to generically scale the images so they are all roughly of the same width, and I’d like to figure out how to do the same.

    Thanks to anyone who can help!

Viewing 5 replies - 1 through 5 (of 5 total)

  • If you look at the Twenty Eleven functions.php, you’ll find this:

    if ( ! isset( $content_width ) )
    $content_width = 584;

    This ensures that all images are no wider than 584px.
    I suspect that your theme is missing such setting.

    When building custom themes, a great starter theme to use is _s.
    It has a really good functions.php with lots of comments.

    Thread Starter Gregory Gainsborough

    (@gregory-gainsborough)

    hi – I added these lines to my functions.php, but in themselves they didn’t change anything. Is there some other function or code needed to ‘activate’ this?

    I’m really still a beginner; this is about where my understanding of wordpress breaks up… If you have any resources to recommend for understanding what’s happening here, that would be great.

    I have seen _s and found it a little overwhelming at first, but will check it out again.

    Thread Starter Gregory Gainsborough

    (@gregory-gainsborough)

    Ah – I’ve solved my problem at the ‘ground level’ with some css:
    .entry {width:660px} (my containing div)
    .entry img {max-width:100px, height:auto;}

    BUT, if you’d care to advise me on the functions discussed above, I’m all ears. (Teh PhP, it haz sum complicashuns…)

    This article has a good explanation of the functions.php file and the $content width:

    https://themeshaper.com/2012/10/27/setting-up-your-theme-functions/

    The full tutorial is well worth the time investment.

    Thread Starter Gregory Gainsborough

    (@gregory-gainsborough)

    Thanks Christine! I will put my learning cap on.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Post styling: image dimensions’ is closed to new replies.