Front Page › D5 Creation Forum › General Support › BUG: Searchlight Theme
D5 Creation.
Brian SparksI 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 SparksMy 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 CreationWe find the Gallery Thumbnail Images 150pxX150px in your site
Brian SparksThat 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 SparksI put up a new demo site to show you the issue…
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:
|
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:
|
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 CreationThank you for your Finding. We shall check this issue in our Next Update
AnonymousGreat information shared by you.
D5 Creation🙂