Hueman image scaling

  • Resolved TomSaunders

    (@tomsaunders)


    10 years, 2 months ago

    WordPress 4.4.2
    Hueman child theme

    I want complete control over image scaling so I’ve stopped WP from creating multiple copies of images, as I know hueman already does the same thing and I want it to be controlled by the theme.

    I’ve noticed that when inserting images into a gallery, the thumbnails look terrible, and/or they are never the size I want. I’ve read several threads like this one so I understand why its happening, but I’m not sure how to configure hueman to do what I want.

    Basically, I want to be able to do this:
    – Upload a 1200×800 full size image
    – Have hueman create a 600×400 copy, and scale it to 300×200 for a thumbnail in the gallery
    – Link the 300×200 thumbnail to the full size in a responsive lightbox (which I can do already)

    The other thing is that columns in the gallery must be effecting image scaling too. I want the thumbnails to always be 600×400 scaled to 300×200 no matter how many columns I use.

    I expect I’ll need to be editing the alx_setup() functions, specifically ‘// Thumbnail sizes’, but I’m not sure how to do this to achieve what I want.

    Does anyone know how I can do this?

    All help greatly appreciated, and thanks for creating and supporting such an awesome theme!

    Cheers

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter TomSaunders

    (@tomsaunders)

    10 years, 2 months ago

    May have found a way to achieve this by using CSS and/or the thumbnails generated by hueman…Will post back soon if I manage it.

    Thread Starter TomSaunders

    (@tomsaunders)

    10 years, 2 months ago

    OK I’ve figured out how to achieve what I want.

    All I had to do was enable the medium image size in settings > media, set it to 600×400, and then put the following in my child themes CSS:

    .entry .gallery img {
    height: 200px;
    width: 300px;
}

    When creating the gallery, I select the image, and select medium size. The 600×400 image is then scaled to 300×200 in the gallery.

    One question:
    What are the theme-generated thumbnails used for?
    I know the largest is used for featured image slider or something like that, but what about the others?

    Thread Starter TomSaunders

    (@tomsaunders)

    10 years, 2 months ago

    What a mess!

    I’ve achieved exactly what I want…when viewing my gallery on my desktop computer. When I checked the gallery display on my smartphone it was an absolute shambles.

    Heres what I’ve done:

    WordPress > Settings > Media
    – ticked thumbnails (150×150
    – ticked medium (600×400)

    Style.css – Relevant sections:

    .entry .gallery img {
    	height: 200px;
    	width: 300px;
	border: 2px solid black !important;
}

.col-3cm .main-inner { background-position: -80px 0; padding-left: 260px; }
.col-3cm .s1 { width: 260px; margin-left: -260px; }

    So as stated before, looks great on desktop, terrible and compressed on mobile.

    I know I probably need to use alx_setup() functions, specifically ‘// Thumbnail sizes’

    Questions:

    1. Can I use those, and untick all of the options under Settings > Media?

    2. How do I edit them to achieve what I want in combination with CSS?

    3. How can I get this to behave nicely with mobile?

    bdbrown, you are my only hope! :O

    Edit: Here is an example of a page that works as I want it to on desktop but looks crap on mobile.

    bdbrown

    (@bdbrown)

    10 years, 2 months ago

    Hi Tom. Working with images; what fun 😉 First thing I’d recommend is removing the height for your .entry .gallery img. That’s keeping the images from being responsive. Then try adding this to your child theme CSS:

    #gallery-1 .gallery-item {
  width: 32%;
  padding-right: 1%;
}

    You can adjust those as needed; the above is just a starting point.

    Thread Starter TomSaunders

    (@tomsaunders)

    10 years, 2 months ago

    bdbrown, you have no idea how reassuring your presence is, thanks for helping! Bear with me, I have a couple of questions :O

    So I made those changes, and yes the gallery looks nice on mobile now!

    However no matter how much I change the width in your code above, the images all stay the same size (600×400 scaled to 323×216).

    Any idea how I can get them to scale to exactly 300×200? Just where does that size come from anyway? Is it to do with the alx_setup() function containing:
    add_image_size( 'thumb-standard', 320, 320, true );

    I would absolutely love a table that tells me what all of the sizes of thumbnail are used for, and how they interact with the WP-generated images too.

    All this image stuff is really confusing. Do I need to use any of the settings in the Settings > Media section, or can hueman handle all the thumbnails and extra images I’ll need? For example, at the moment I’m using WP to generate 150×150 thumbs so I can see a preview of media in my media library, and a 600×400 medium image to be scaled for use as a gallery thumbnail.

    If I untick those and configure the add_image_size to contain those values will they replace the WP generated ones? Or should I disable the ‘thumbnail size’ part of that function and let WP handle it?

    Do any of the thumbnail sizez created by hueman connect with the ‘thumbnail, medium, large’ options you get when you insert images into a gallery?

    God Im so confused… :S

    Thanks so much for helping me out though!

    Thread Starter TomSaunders

    (@tomsaunders)

    10 years, 2 months ago

    Ah ha!

    I used firebug to play around, and yes your code was spot on. All I had to do was change it to 30.6% and put !important after it and the margin. I think thats nailed it. Thanks so much!

    Do you have any ideas about my other questions? I really dont want to be generating extra images if I don’t need them. Is it safe to disable the thumbnail size part of the alx_setup function? Will anything bad happen?

    Edit2: Just thought something had screwed up, but surprise it was my error!

    bdbrown

    (@bdbrown)

    10 years, 2 months ago

    I think that nailed it. Thanks so much!

    Good deal; glad to hear it and you’re most welcome.

    All this image stuff is really confusing

    You got that right. I know the WP core team is working on making images easier to use but, right now anyway, it’s anything but straight forward. I’m not sure I have the answers to your specific questions but will offer the following:

    1. Here are the WP and theme image sizes generated when you upload an image (and maybe you already know this):
    WP Thumbnail Sizes
    The default image sizes of WordPress are “thumbnail”, “medium”, “large” and “full” (the size of the image you uploaded). These image sizes can be configured in the WordPress Administration Media panel under Settings > Media. This is how you can use these default sizes with “the_post_thumbnail()”:

    the_post_thumbnail( ‘thumbnail’ ); // Thumbnail (default 150px x 150px max)
    the_post_thumbnail( ‘medium’ ); // Medium resolution (default 300px x 300px max)
    the_post_thumbnail( ‘large’ ); // Large resolution (default 640px x 640px max)
    the_post_thumbnail( ‘full’ ); // Full resolution (original size uploaded)

    Hueman Thumbnail sizes
    add_image_size( ‘thumb-small’, 160, 160, true );
    add_image_size( ‘thumb-standard’, 320, 320, true );
    add_image_size( ‘thumb-medium’, 520, 245, true );
    add_image_size( ‘thumb-large’, 720, 340, true );

    2. There is a bit of information on changing the theme thumbnail sizes in the documentation. Hueman uses the theme thumbnails in various locations. However, they are very rarely displayed at the exact image dimensions because they are usually resized to 100% of the content width using CSS. Since the height is not set in CSS, they expand in height proportionately.

    3. I have many references related to working with images in WP; too many to list here. I’ve put them up on Pastebin . Probably more than you ever want to know about images in WP but it’s there if you’re interested.

    4. Personally, I would just let WP and Hueman generate the image thumbnails as they’re defined unless you have a reason to need a different specific size. The more important thing, at least IMO, is to make sure you upload the smallest size possible and that’s it’s compressed, either before you upload it or using a plugin that does it dynamically.

    Hope all that is helpful; if you have more questions feel free to ask away.

    alot of the styling just changed on my site

    Strange. If you’re just working with the image CSS it shouldn’t affect anything else. If that’s still an issue please post a new topic and we’ll see if we can sort that out.

    Thread Starter TomSaunders

    (@tomsaunders)

    10 years, 2 months ago

    Yeah actually I think I will just let hueman do what it wants (despite the wasted space) and configure the WP ones myself. The thing I was struggling to understand was, where do the hueman-generated images get used? But I looked at the hueman demo and saw that they are used for featured images, thumbnails on related stories etc.

    I think I will use the featured image ones for blog posts (when I get round to actually starting it!), and I think I’ve figured out how to stop them from cropping badly and scaling.

    make sure you upload the smallest size possible and that’s it’s compressed, either before you upload it or using a plugin that does it dynamically.

    Yeah I use the Smush It plugin which is nice, and I normally get pretty small jpegs when exporting from Lightroom.

    The other styling thing was a silly mistake, forgot abracket in styles.css which prevented half from being read haha.

    Anyway, thanks again, you’re always a great help and I appreciate it alot! Cheers.

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

The topic ‘Hueman image scaling’ is closed to new replies.