Image Size

Hi,

thanks for your question, and sorry for the trouble.

I just checked your link in both Chrome and Firefox, and in both cases, the table shows four thumbnail images in the first column of the table, all in the correct size. Isn’t that what you want?

To now center all the text in this table both vertically and horizontally, you could add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-1 thead th,
.tablepress-id-1 tbody td {
    text-align: center;
    vertical-align: middle;
}

About that suggestion with the star ratings: That is a very precise type of content already, and nothing really that a general table plugin should be doing. I suggest to simply insert those as images.

Regards,
Tobias

Hello-

Thanks for the quick response and helpful answers. Let me clarify my original question (I’m new to WordPress so I have a lot to learn):

They are all 150×150 thumbnails which is what I did want. However, you’ll notice how the YETI Tundra image includes the entire cooler image, yet the other cooler images remove parts of the cooler. This is probably because the other images were not squares (same width and same height) when I uploaded to the media library. They are rectangles. I wanted to have all of the images the same size (as in width and height) and at the same time not remove the outer edges.

Since I am new to web building, I figure I must be doing something wrong with the image, which is not a Tablepresss error. I was hoping someone on this forum could give simple easy to understand guidance on how to upload and add images to pages/posts with the idea to have each photo on the post/page be exactly proportional. I think the proper term is aspect ratio.

This is how I go about uploading and adding images. Please let me know what I am doing wrong. Surprisingly, I could not find a simple to understand answer online.

-I’ll find a image online and save it as a jpeg.
-If the file size in MB or KB’s is greater than 150KB, I will optimize the jpeg and make it no more than 100KB.
-I then upload the media to my library.
-I then go to the post/page that I want to add the media to and I usually either select medium or thumbnail.
-I don’t do any other editing to it.

If I have a post/page where I want every image to be exactly the same width and height, and I do not want to have the image have the sides removed (for example if its a rectangle), I cannot figure out how to do this for just that post/page. I’ve seen example online of people saying to enter code except I don’t want to change every image size on the website.

Hi,

thanks for the clarification! I think I understand now.

Now, the problem here is that WordPress will always create square thumbnails. And when it get a rectangular (non-square) image, it will create that, by chopping of some of the image on the longer side.

I’m not too familiar with the WP Media Gallery or its code, but I’ve not seen a way to change this (e.g. in a way so that it adds a little bit of “white” on the shorter sides to make the image square).

Now, from what I can see, you are already using some extra plugin for the zoom/sizing of images, or at least the parameters that are attached to the image URLs indicate that.
I can therefore only suggest that you check if that somehow offers an option for this. Otherwise, the only solution that I can think of is that you create the desired squared version of the images offline in an image processing application.
Or, if you could waive the requirement of having square images in the table, and if it were enough for them to have the same width, then you could simply try to insert the medium or full version of the image. Those images might have higher dimensions, but they are not cropped or anything and should therefore show the full “item”. You could then still force those to have the same width, while the height might differ.

Regards,
Tobias

Hello-

Thanks for the response. Great forum. I will follow your recommendations and try to figure out a way to edit the images so that they are all the same size on the page.

Hi,

sure, you are very welcome!
I hope that you can find a good way.

Best wishes,
Tobias

Hello-

I finally figured out a way to make rectangle images into square images without losing part of the image. You have to crop it in a graphic design program.

When I add the square thumbnail image, there is a outline border around the image. I was able to remove the outline border from pages by using the CSS code:

.wp-caption {
border: 0;
}

The thumbnail images in the tablepress chart still have the outline border. I wasn’t sure if there is a way to get rid of that outline border in tablepress. Thanks.

Hi,

good to hear that you found a way to create the images in the way you like them! ??

About that border: I’m not really sure what you mean here. The table in the link from your very first post does not show borders around images. Can you guide me?

Regards,
Tobias

Hello-

I re-posted the thumbnail image that has the outline border. The URL link is still the same. Thanks.

Hi,

thanks! From what I can see, the border is actually part of the image:
https://www.kayakauthority.com/wp-content/uploads/2015/06/Yeti-Tundra-Cooler-420.jpg

Regards,
Tobias