Pictures Issue in the Table

Hi there,

I noticed that most of the images on your page have an original size of 300px by 300px. The images in the third column, however, are originally a little smaller (236px by 236px).

The code used is making all of the images on that page a width of 150px and scaling the original height of the image down accordingly. This is why the images in the third column look a little smaller.

The best way around this would be to upload images that are all the same size to start with. You could also consider increasing the width of the images in the third column so that their height increases.

Have you also considered galleries as an alternative to using HTML tables to display your images? Galleries are a good way to organise multiple images that display well across all devices:

https://en.support.wordpress.com/gallery/

As an extra note: Your site is hosted over at WordPress.com while these forums are intended for folks who are hosting their site elsewhere and running on the free software available here at www.ads-software.com.

(If you’re unsure on the differences between WordPress.com and www.ads-software.com then this guide gives a good overview.)

If you have any further questions, please post to the Themes forum on WordPress.com:

https://en.forums.wordpress.com/forum/themes

We’ll be happy to help from there!

Hi,

Thanks for the suggestion. I checked the sizes; I see that all of the images are 300px by 300px. Can you tell me which image that is 236 by 236px on the third column?

I created a new page called Committee-test using Gallery. I chose to use the grid, but I am not able to make the caption be shown all the time. The captions will appear if I move the mouse to the images. Is there a way that I can make the captions show on the bottom rather in the image like https://gally92.wordpress.com/25th-reunion/committee?

I also would like to know if I could center the grid itself for aligning. Right now, it is showing the left align. You can check it out at https://gally92.wordpress.com/25th-reunion/committee-test/.

If there is no solution, I probably would have to resize all of the images to 150px by 150px instead.

I know the difference between WordPress.com and www.ads-software.com. We don’t have any funds to pay for a web hosting at this point. I do know that there are limitations on WordPress.com.

Thanks again!

Hi there,

Thanks for the suggestion. I checked the sizes; I see that all of the images are 300px by 300px. Can you tell me which image that is 236 by 236px on the third column

Hm. Apologies. I got a little confused by the code surrounding the images in my browser’s inspector tool.

I asked one of the developers on the Theme team here at Automattic to take a look and they found that you can workaround the issue by following these steps:

• Navigate to the editor of your page and then switch to the Text/HTML editor.
• Replace <table> with <table style="table-layout: fixed;">.
• Replace each instance of <td style="text-align:center;"> with <td style="text-align:center;width:25%;">.

It’s worth noting that both the use of inline CSS and tables for layout are consider bad practices on the web, which may account towards the issues coming up here.

As I touched on before, I recommend the use of galleries over tables.

Another option is to make use of Sela’s Grid Page template. Pages assigned to this template will display any child pages in nicely organised rows that link to more information. You can see an example on the demo site here:

https://selademo.wordpress.com/page-templates/grid-page/

I created a new page called Committee-test using Gallery. I chose to use the grid, but I am not able to make the caption be shown all the time. The captions will appear if I move the mouse to the images.

Sela includes that hover effect for gallery captions as part of its design and there isn’t a built in option to change it. If you upgraded to WordPress.com Premium or Business then you would have the option of adding custom CSS to override design choices, such as that.

I also would like to know if I could center the grid itself for aligning. Right now, it is showing the left align. You can check it out at https://gally92.wordpress.com/25th-reunion/committee-test/.

You could wrap a div around your gallery’s shortcode and centre align it. The following worked on my test site, for example:

<div style="text-align:center;">
[gallery type="square" ids="4512,4513,4511,655,652,584,583"]
</div>

I know the difference between WordPress.com and www.ads-software.com. We don’t have any funds to pay for a web hosting at this point. I do know that there are limitations on WordPress.com.

As these forums are intended for folk who are hosting their own site and running on the free software available at www.ads-software.com, they aren’t the best place for you to get help.

Answers to questions on the two different types of WordPress vary and it reduces confusion if they’re kept to separate forums.

In addition, your site is currently set to private and only WordPress.com staff (such as myself) can view its content.

I’ll close this thread for now but please post to the correct forum on WordPress.com with any extra questions:

https://en.forums.wordpress.com/forum/themes#postform

We’ll be happy to help from there!