Gap between images in tiled gallery.

• 

  casagan · Member · Jan 13, 2014 at 10:30 am

  • Copy link
  • Add topic to favorites

  Hi all,

  I was wondering if it is possible to adjust the gap between the images in a tiled gallery. For example, in this post:

  http://wp.me/p3eS60-3t

  Right now it is just a few pixels, and I would like to increase that, say into 10px. I would like to have that increased gap to all the tiled galleries in my photoblog. I’m using anthem theme with custom css design.

  Thanks in advance.

  The blog I need help with is: (visible only to logged in users)

• 

  kaniamea · Member · Jan 13, 2014 at 2:18 pm

  • Copy link

  You can try this code:

  .tiled-gallery .gallery-row {
      margin-bottom: 10px;
  }
  
  .tiled-gallery .tiled-gallery-item {
      padding-right: 10px;
  }

  Add this to your Custom Design => CSS

• 

  casagan · Member · Jan 13, 2014 at 9:48 pm

  • Copy link

  Thanks kaniamea, this seems to work well for the gap between rows, but not the individual images in each row. Maybe it is something related to the theme itself?

• 

  justpi · Member · Jan 14, 2014 at 12:35 am

  • Copy link

  No, it’s because the first part of kaniamea’s suggestion is correct by the second part isn’t. Try this instead:

  .tiled-gallery .gallery-row {
  margin-bottom: 10px;
  width: 111% !important;
  }
  .tiled-gallery .gallery-group {
  margin-right: 10px;
  }

• 

  casagan · Member · Jan 14, 2014 at 9:26 am

  • Copy link

  Thanks justpi. That seems to work perfect, I only needed to add !important to the margin-bottom part in the gallery row.

• 

  casagan · Member · Jan 14, 2014 at 12:55 pm

  • Copy link

  Now I’ve noticed that what this can make is cropping the pictures on the right of the gallery display. Might I need to increase the content width? Or reduce the images (gallery items?) on each row?

  Cheers.

• 

  thesacredpath · Member · Jan 14, 2014 at 3:59 pm

  • Copy link

  The images are sized to fit into the mosaic grid and align properly and since there can be different numbers of images in each row, the amount of space added to the effective length of a row is different with the change in spacing between images. You can increase the width of the overall container, but when you do that you will see the difference in length of each row due to the different number of images in each row. Add this to your CSS and you can see what I mean. The original max width was 1240px and I increased it to 1270px, which allows the right image in the row of 4 to be fully seen.

  #container {
  max-width: 1270px;
  }

• 

  casagan · Member · Jan 15, 2014 at 11:08 am

  • Copy link

  Thanks thesacredpath. I’ll try this also. I wouldn’t want to increase the with of the post area, I want all the posts content to have the same max width (900px is the usual image width I use). What about scaling (reducing proportionally a bit) the actual images contained in each tile? Would that work?

• 

  thesacredpath · Member · Jan 15, 2014 at 6:35 pm

  • Copy link

  @casagan, I’ve looked at the HTML and the CSS, and don’t see a way to do this since the image sizes are set by in the theme PHP script files. I’ve tried several things and have not had any luck. If each basic image size in the tiled gallery had a separate unique CSS class, then you could probably resize the images so that they were not cropped on the right, but there isn’t. Also, you would be asking the browser to resize the images, which would result in a degraded image quality.

• 

  casagan · Member · Jan 15, 2014 at 6:46 pm

  • Copy link

  Thanks again @thesacredpath. What I’m considering now is using the gallery post format in anthem. That slider looks nice. I’m finding an issue though. I explain it here: https://en.forums.wordpress.com/topic/featured-image-not-shown-in-gallery-posts?replies=1