Hi,
1) The reason for the black background is because there’s no more height of the image to fit a 1:1 (as it takes the 100% of width) but you can invert that, so instead of taking the 100% of width it takes the 100% of height, just add this peace of CSS:

.media-box [data-width][data-height] img{
    top: 0 !important; 
    left: -100% !important; 
    right: -100% !important; 
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 100%;
}

.media-boxes-no-more-entries{
    display: none;
}

.media-boxes-load-more-button{
    border: 1px solid #e5e5e5;
    background: transparent !important;
    color: #999 !important;
    border-radius: 4px;
    font-weight: 600 !important;
    width: 90px !important;
}
.media-boxes-load-more-button:hover{
    background-color: #fff !important;
    border-color: #bbb !important;
    color: #333 !important;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.13) !important;
}

.media-box-container{
    overflow: visible !important;
}
.media-box-image{
    border: 2px solid #e2e2e2;
}
.media-box-image div[data-width][data-height]{
  border: 10px solid white;
}

Are these for one particular gallery? I am wondering if these can be universal for all the galleries. Thank you very much.

I put those codes in the CSS in http://moderni.co/interior-design/interior-products/FLOOR-CARPET-BROADLOOM/ATLAS/ They are not quite working. I would really appreciate your effort. Thank you very much.

I see the issue, don’t include the “pre” tags and “br” tags, only the CSS I provided

Thank you. It is working.

Question 1; I am going to have hundreds of galleries like these. Now these are for one particular gallery. I am wondering if there is a way for these codes to be universal for all the galleries.

Question 2; There are only two options; ‘Edit’ and ‘Delete’. It could be nice to have ‘Copy’ option so that I can duplicate the previous gallery for the new one.

Thank you very much.

awesome
1) the only way would be to open this file: wp_auto_grid/plugin_extra/extra_style.css and at the top place that CSS, so it affects all galleries always

2) totally agree, I’ll keep it in mind for the next update

Best, David

Thank you very much. I just have two more questions.

1. When the image is hovered with mouse, it shows the translucent red color. I am wondering if I can change the translucency and the color globally.

2. If you look at http://moderni.co/interior-design/interior-products/CEILING/USG/, there are 3 empty white rectangles with grey lines in the last 2nd low to fill the columns. I am also wondering if any last row can fill the empty columns with white rectangles automatically whenever there are empty columns at the end.

Thank you very much again.

.thumbnail-overlay{
    background: rgba(0,0,0,.5) !important;
}
.thumbnail-overlay .media-box-title{
    color: #fff !important;
}

It is working. Awesome program! Thank you.

There are still black background around images. Please see – http://moderni.co/interior-design/interior-products/FLOOR-CARPET-BROADLOOM/PATCRAFT/ Thank you.

Hi,
that’s because those images got different aspect ratio, they have more height than width, for those galleries you need to remove the CSS I provided above in the answer 1)

I am using your codes globally for all the galleries. If I remove that, some galleries will have the same problem. I am wondering if there is a solution for that. If not, Can I have the background white instead of black background? Thank you.

.media-box-image div[data-width][data-height]{
    background: #fff;
}

Thank you. I am still wondering if you can fix them globally without adding CSS in problematic galleries. I am going to have hundreds of galleries. I do not think that is practical solution for me. Other grid program I have does not have such problem. Can they be zoomed in to fill the square? Thank you.

Hi,
in the future I may add something for this

Thank you! I appreciate it. As I mentioned, I have to create hundreds of galleries and now have to change the settings individually for all the galleries.

1. I am wondering if I can set the following settings globally.

Number of images to load at the beginning;12 Number of images to load;12 Minimum of images per filter;12 Columns-6 columns per row Horizontal space; 18 Vertical Space; 18 Desktop Large; 6 columns Desktop Medium; 6 columns Desktop Small; 6 columns Tablet landscape; 6 columns Thumbnail ratio; 1:1 Search; no Filter; no

2. As per your codes, background is now white, but initially it shows black background and then changes it to the white. I am wondering if the black background does not show in the beginning.

3. When it is hovered, texts are all lower characters. Can they be all upper characters?

Thank you very much.

Hi,
1) currently no, but I will release an update in which you can create the a gallery and then just change the directory right in the shortcode, for example:

[auto_grid directory="gallery1"]
[auto_grid directory="gallery2"]

.image-with-dimensions{
    background-color: black;
    background-image: url('icons/loading-image.gif');
  }

.thumbnail-overlay .media-box-title{
    text-transform: uppercase;
}

Thank you. I am not sure about your answer to Question 1. Could you explain it in more understandable way? When is going for update? Also it is easier to have copy function of a previous gallery for the next one? When is your timeline for that function? I have to create hundreds of galleries as soon as possible. Thank you.

Hi,
alright, imagine you want 5 galleries, and they all will have the exact same configuration, the only thing changing is the “directory”, so currently you need to create 5 galleries in the admin page.

But with the new update you can create only 1 gallery in the admin page and then in different pages/posts you can specify different directories using that one gallery, for example:

[auto_grid id="masonry_gallery" directory="galleries/gallery1"]
[auto_grid id="masonry_gallery" directory="galleries/gallery2"]
[auto_grid id="masonry_gallery" directory="galleries/gallery3"]
[auto_grid id="masonry_gallery" directory="galleries/gallery4"]
[auto_grid id="masonry_gallery" directory="galleries/gallery5"]

You just sent the update of your program. Does that have the function to do that? Thank you.

yes, that’s the new update

I downloaded the file. There are two folders; wp_auto_grid and __MACOSX. Which file am I supposed to copy into the old folder? I never updated a pluggin. Thanks for your help.

Hi,
in order to avoid losing your information that you already got, just unzip the wp_auto_grid file and find a file name “class_auto_grid_shortcode.php” then just replace that only file with the one in your WP installation

I am still having problem with black background showing up before images appear. Thank you.

.image-with-dimensions{
    background-color: #fff !important;  
}

It still shows black background. Also I am wondering how I can change the text size on hovered images. Thanks!

.media-box .image-with-dimensions{
    background-color: #fff !important;  
}

.thumbnail-overlay .media-box-title{
    font-size: 11px !important;
}

Hi,
indeed in the new version the directory parameter right in the shortcode is not possible since you can configure the directory and all other configuration per shortcode in the admin section

but maybe I’ll include this in an update, just as a quick directory change

Best, David

Hi,
you can do this with CSS, just add it in the CSS section under the template tab
for example use this CSS:

.media-boxes-filter>li a{
    background: blue;
}

hi David, thanks for your response, actually i cannot find out how to change background color of selected (active) filter, i tried .selected but doesn’t worked

Hi,
can you show me a living example online so I can take a look and see what’s going on?
Best, David

sure. you can click the link. http://fcsphotography.co.za/wp/weddings/

Hi,
it seems that your theme is adding the shortcode inside “pre” tags (unless you manually did), those “pre” tags are not from the plugin, and your theme has all “pre” elements in black background
you can see them here: https://imgur.com/a/fn4Iv

try using the “text” option, instead of the “visual” in your WP post/page, as shown here: http://cdn3.wpbeginner.com/wp-content/uploads/2014/07/wp-text-editor.png

Best, David

Ohhhh gosh. You have no idea how you just saved a life! it worked. Thanks a lot David. the short code was indeed inside pretags on the text side.

glad to hear that

Hi David. sorry to bother (again). So now the gallery seems to load only 2 items per row at the beginning and then after lazy load then it corrects I cant tell were it went wrong. additionally, my inline category setting is only showing 2/3 inline and category 3 under “all”. What might be the issue? (http://fcsphotography.co.za/wp/weddings/)

Im m not sure but i’m thinking its picking my pc as if its a mobile device at first (just a wild guess)

Hi,
try adding this CSS:

.media-boxes-filter{
  width: 100% !important;
}
body{
   overflow-y: scroll; 
}

Thank you very much, the rows have been fixed. Was the css also supposed to fix the filters inline?

Hi Hari,
Can you show me a living example online? so I can see what’s going on?

Best, David

Hi,
I see that you have fancybox already installed in your WP (as another plugin maybe), can you try deactivating it for a moment? and see if it works?

I’ve deactivated it…do you guys have any video tutorial on this…the documentation isn’t clear on this topic.

Hi,
yes, you can. You can add a .txt file in which you can configure if you want an image to link to some page, a .txt. file with something like this:

image => Category 1/Autumn.jpg
link        => http://www.google.com

image => Category 3/Morning.jpg
link        => http://www.facebook.com

image => Category 2/Far Away.jpg
link        => http://www.gmail.com