BUG: Searchlight Theme

[Brian Sparks]

I have confirmed this bug by creating galleries and activating and deactivating the theme with no other plugins. Previous versions did not have this bug.

If you build a gallery and have 150px thumbnails, it looks right in the editor. But in preview or live, the images resize themselves depending on how many columns you have. If yu only chose a couple columns, you will get MUCH larger thumbnails than 150 x 150, but it will use the thumbnail files. Add more rows, the size goes back down. Really messes uo galleries. Can it please be fixed?

[Brian Sparks]

My Site is nelsoncreekoutdoors.com

Check the hunting pictures and fishing pictures pages. Both have standard WP galleries with images set to thumbnails at 150px x 150px. You can tell it is using the 150px pics as they are fuzzy, but they are showing much larger. And as each gallery is set to a different number of rows, the thumbnails show up as different sizes.

[D5 Creation]

We find the Gallery Thumbnail Images 150pxX150px in your site

[Brian Sparks]

That is because I already modified the code. In your style.css, I removed the width = 100% to make the images appear the right size and then added !important to your calculations for the width to stop the columns from wrapping prematurely.

Your theme still has the bug.

[Brian Sparks]

I put up a new demo site to show you the issue…

Sample Page

You will see here the images are too large and wrap a column too early. I made changes, but may not be the best, I am an amateur.

You have:

/*Gallery Post ----------------------------*/ .gallery { margin: 0 -10px; text-align: center; } .gallery-item { margin: 20px 10px; display: inline-block; vertical-align: top; float: none;} .gallery-item img { border: none !important; padding: 0 !important; width: 100%; } .gallery-caption{ clear:both;display:inline-block;margin:0 auto;padding:5px 1px; position:relative; width:100% } .gallery-columns-1 .gallery-item {width: calc(100% - 20px);} .gallery-columns-2 .gallery-item {width: calc(50% - 20px);} .gallery-columns-3 .gallery-item {width: calc(33.333% - 20px);} .gallery-columns-4 .gallery-item {width: calc(25% - 20px);} .gallery-columns-5 .gallery-item {width: calc(20% - 20px);} .gallery-columns-6 .gallery-item {width: calc(16.666% - 20px);} .gallery-columns-7 .gallery-item {width: calc(14.285% - 20px);} .gallery-columns-8 .gallery-item {width: calc(12.5% - 20px);} .gallery-columns-9 .gallery-item {width: calc(11.111% - 20px);} #content .gallery .attachment-cat-page{margin:0 auto;float:none}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/*Gallery Post ----------------------------*/ .gallery { margin: 0 -10px; text-align: center; } .gallery-item { margin: 20px 10px; display:  inline-block; vertical-align: top; float: none;} .gallery-item img { border:  none !important; padding: 0 !important; width: 100%; } .gallery-caption{ clear:both;display:inline-block;margin:0 auto;padding:5px  1px; position:relative; width:100% } .gallery-columns-1 .gallery-item {width: calc(100% - 20px);} .gallery-columns-2 .gallery-item {width: calc(50% - 20px);} .gallery-columns-3 .gallery-item {width: calc(33.333% - 20px);} .gallery-columns-4 .gallery-item {width: calc(25% - 20px);} .gallery-columns-5 .gallery-item {width: calc(20% - 20px);} .gallery-columns-6 .gallery-item {width: calc(16.666% - 20px);} .gallery-columns-7 .gallery-item {width: calc(14.285% - 20px);} .gallery-columns-8 .gallery-item {width: calc(12.5% - 20px);} .gallery-columns-9 .gallery-item {width: calc(11.111% - 20px);} #content .gallery .attachment-cat-page{margin:0 auto;float:none}

MY changes:

/*Gallery Post ----------------------------*/ .gallery { margin: 0 -10px; text-align: center; } .gallery-item { margin: 20px 10px; display: inline-block; vertical-align: top; float: none;} .gallery-item img { border: 0 !important; padding: 0 !important; } .gallery-caption{ clear:both;display:inline-block;margin:0 auto;padding:5px 1px; position:relative; width:100% } .gallery-columns-1 .gallery-item {width: calc(100% - 20px) !important;} .gallery-columns-2 .gallery-item {width: calc(47% - 20px) !important;} .gallery-columns-3 .gallery-item {width: calc(33.33% - 20px) !important;} .gallery-columns-4 .gallery-item {width: calc(25% - 20px) !important;} .gallery-columns-5 .gallery-item {width: calc(20% - 20px) !important;} .gallery-columns-6 .gallery-item {width: calc(16.666% - 20px) !important;} .gallery-columns-7 .gallery-item {width: calc(14.285% - 20px) !important;} .gallery-columns-8 .gallery-item {width: calc(12.5% - 20px) !important;} .gallery-columns-9 .gallery-item {width: calc(11.111% - 20px) !important;} #content .gallery .attachment-cat-page{margin:0 auto;float:none}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/*Gallery Post ----------------------------*/ .gallery { margin: 0 -10px; text-align: center; } .gallery-item { margin: 20px 10px; display:  inline-block; vertical-align: top; float: none;} .gallery-item img { border:  0 !important; padding: 0 !important; } .gallery-caption{ clear:both;display:inline-block;margin:0 auto;padding:5px  1px; position:relative; width:100% } .gallery-columns-1 .gallery-item {width: calc(100% - 20px) !important;} .gallery-columns-2 .gallery-item {width: calc(47% - 20px) !important;} .gallery-columns-3 .gallery-item {width: calc(33.33% - 20px) !important;} .gallery-columns-4 .gallery-item {width: calc(25% - 20px) !important;} .gallery-columns-5 .gallery-item {width: calc(20% - 20px) !important;} .gallery-columns-6 .gallery-item {width: calc(16.666% - 20px) !important;} .gallery-columns-7 .gallery-item {width: calc(14.285% - 20px) !important;} .gallery-columns-8 .gallery-item {width: calc(12.5% - 20px) !important;} .gallery-columns-9 .gallery-item {width: calc(11.111% - 20px) !important;} #content .gallery .attachment-cat-page{margin:0 auto;float:none}

[D5 Creation]

Thank you for your Finding. We shall check this issue in our Next Update

[Anonymous]

Great information shared by you.

[D5 Creation]

🙂

[Author]

Posts