How to resize images in posts?

Developer help
1

Hello, what would you recommend to make image size smaller?

When I upload image, there is no way to drag and change size. And then image can look enormous, especially if it is vertical.

What would be the best workaround?

Screen Shot 2021-08-17 at 12.31.25 PM
Screen Shot 2021-08-17 at 12.31.25 PM1234×874 74.4 KB

Also, look here.

2

@andrii One option would be to do something similar to the following methodology for floating images, but without adding float functionality or margins:

3

hey, some tips are here.

  1. Upload or Drag the Image. Click to upload or Drag the image you want to resize.
  2. Edit your photo. Click on Edit and set the desire part of your photo. …
  3. Confirm and Download the Image. So, image is set according to your need, now just click on Confirm button and that’s it. …
  4. Compress Image.
4

@Kevin_David_K where do you see Edit option?

5

@andrii Whoops, I totally forgot that I’ve actually implemented the functionality that you speak of into my theme, and not via the methodology I mentioned above.

What you could do is adjust, in your theme, the max-width sizes of one of the kg-image-card classes. Having done that, all you have to do is select the appropriate image width option every time you want, say, your vertical image not to appear huge.

I’ve implemented exactly this with my customised theme. You can see an example via this post on my blog, where the Songbird movie poster image is constrained from extending to its max width.

6

Now that I’m not on mobile and can relay some code, here’s the code I use to achieve the aforementioned:


.kg-card.kg-image-card img:not(.kg-card.kg-image-card.kg-width-wide img) {
    display: block;
    margin: 0 auto;
    width: auto;
}
.kg-card.kg-image-card img:not(.kg-card.kg-image-card.kg-width-wide img)  {
    max-height: 300px;
}
@media screen and (min-width: 525px) {
    .kg-card.kg-image-card img:not(.kg-card.kg-image-card.kg-width-wide img) {
        max-height: 400px;
    }
}
@media screen and (min-width: 769px) {
    .kg-card.kg-image-card img:not(.kg-card.kg-image-card.kg-width-wide img) {
        max-height: 450px;
    }
}
@media screen and (min-width: 1183px) {
    .kg-card.kg-image-card img:not(.kg-card.kg-image-card.kg-width-wide img) {
        max-height: 500px;
    }
}
@media screen and (min-width: 1503px) {
    .kg-card.kg-image-card img:not(.kg-card.kg-image-card.kg-width-wide img) {
        max-height: 550px;
    }
}

I just noticed that that code hasn’t been committed yet, and so while that means that it’s been in code injection for at least a couple of months now, I kinda forget if it’s in a final form or testing form or what. In other words, and without taking a closer look at it, some of the code may be superfluous and it’s probably still in “draft mode”. Meanwhile, I notice that I haven’t added a :not conditional for full-width images, but as my theme has a side-panel and so can’t take advantage of full-width images I take it that that’s why I didn’t bother. Regardless, I’m sure you get the idea and can adjust things as you see fit, if you’re even interested in this methodology.

7

Turns out, If you don’t want to mess with the theme, I could just use the img tag in an HTML snippet

<img src="...." width="...">

You can get URL of the image by first dragging image to the editor to upload it, then right click to get it’s source

8

@Yaroslav_Bulatov None of what I’ve mentioned requires you to mess with the theme. All that CSS can be placed in code injection.

Moreover, the method you suggest is what I used to use but which I abandoned for what I deemed to be a superior method (see my explanation here). That is, when you utilise image cards you take advantage of all present (and possibly future) built-in functionality. Lazy-loaded images, responsive images, and possibly more.