[bellisgirlParticipant]

Hi,

can see whats happening here. My thumbnails aren’t square they have a rectangular box. Anda there are images that doesn’t have space between them.

You can go there and see.

Sorry to be so anoying but my website it’s 90% gallery and need this to work properly.

regards

[FriechModerator]

Hi There,

You can add this CSS code to force the thumbnail to be square.

.gallery-icon a img {
  width: 250px;
  height: 250px;
}

I’m not seeing the images that doesn’t have space between them, would you mind providing us screenshot of the issue? You can upload your screenshot here: http://prnt.sc/

Thanks!

[bellisgirlParticipant]

hi where do i paste that CSS code ?

[ZeshanMember]

Hi there,

You can insert the code under Custom > CSS in the Customizer.

Thanks!

[bellisgirlParticipant]

hi, with your code it looks like this http://prntscr.com/7vu6jr and without it looks like this http://prntscr.com/7vu76l. None of them looks like what i want. I don’t want a stretched image or compressed.

Also the lightbox isn’t working, when i click the image it opens in a new window.

regards

[Rue NelModerator]

Hello There,

Please increase the size of your thumbnail to 330 pixels. You can do it by going to Settings > Media > Thumbnail size and leave the cropped option so that you will have a perfect square thumbnails. You can also increase the medium size and after that, you need to regenerate the thumbnails using this plugin: https://wordpress.org/plugins/regenerate-thumbnails/ Having it this method, your images will not be stretch out and it will just be a perfect square.

Hope this helps. Kindly let us know.

[bellisgirlParticipant]

Not working i have a rectangular border anyway. i want want just the squre image.

best reagards

[ZeshanMember]

Hi there,

The images are now square at my end (see: http://prntscr.com/7w0k5t) and lightbox is working fine as well (see: http://prntscr.com/7w0ke3). Please confirm again. Perhaps it’s a caching issue, I’d advise clearing your browser’s cache or testing on a different browser.

If you want the border to adjust as per the image size (see: http://prntscr.com/7w0lnr), use following CSS code under Custom > CSS in the Customizer:

.gallery {
    text-align: center;
}

.gallery dl.gallery-item {
    display: inline-block;   
    width: auto;
}

Thanks!

[bellisgirlParticipant]

And what if i don’t whant any border at all.

Some images open in a big scale on the lightboxitem.

[bellisgirlParticipant]

They look like this – http://prntscr.com/7w8emr

[Rue NelModerator]

Hello There,

If you do not want to have borders, you can use this custom css in your customizer, Appearance > Customize > Custom > CSS

.gallery .gallery-item {
    border: none;
    box-shadow: none;
}

When you click on the item, it will display the full image in the light. And because you have uploaded a big image dimensions, it displays a very big scale image. For example, just like this image: http://bellisgirl.com/wp-content/uploads/2015/07/alex_kinova_neuza_15.jpg which has a dimension of 3744×5616. Please try to upload a smaller image size of at least not more than 1920 pixels in width.

Hope this explains it. Please let us know how it goes.

[bellisgirlParticipant]

Yes i was expecting that answer to image size problem, but i was hoping that was a way of doing this on the website, but it’s not possible as i think.

SO sorry, but another issue, how do i center the gallerie on mypage they are one the left side and leaving a big blank space on the right. Also i want to know if the thumbnail will be responsive, so, will it resiza itself when i’m on a smaller computer tablet or phone ?

Thanks you

[ZeshanMember]

Hi there,

Images look centered to be (see: http://prntscr.com/7wezs5). Would you mind confirming again?

As for the responsive, yes, the images should resize automatically on smaller devices. For example, on mobile devices, your images will appear similar to this: http://prntscr.com/7wezmc.

Thanks!

[bellisgirlParticipant]

Hi again,

I have one litle problem with the previous gallery and another question about a new gallery.

So firste, i want to know whats happening here and how am i able to prevent this from happening. Here’s a prrtscrn -http://prntscr.com/7xdrul you can see that the previous image it’s still there. Another thing, is it possible to remove de border when i open the lightbox content?

Second i have one gallery thats a slider, maybe it’s easier if you can check it. My problems, border, and make it square. here’s a prstscrn – http://prntscr.com/7xdt7u. i tryed to add some custom css but i was not succesefull, you can take a look to see what i’ve done I really need your help.

ANd if you have something that explain the unidque id’s and the the css codes i would be nice.

[Rue NelModerator]

Hello There,

To remove the border of the images inside the lightbox, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.ilightbox-holder.light{
    border: none;
    box-shadow: none;
}

The best way to display square images even in lightbox, please upload your original images as square. Even without using any css, images will always be displayed as square in your site.

Hope this helps. Kindly let us know.

[Author]

Posts