Discussion on Auto Grid Responsive Gallery - Wordpress

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,
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%;
}

2) Just add this peace of CSS:

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

3) Add this CSS:

.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;
}

4) the only way of doing something similar would be by adding this peace CSS:

.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;
}

Best, David

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.

1) yes you can change it with CSS as well, as follows:

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

2) unfortunately this would not be possible, the plugin don’t have that feature

Best

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.

you could add that CSS of question 1) only for the galleries that you want, and yes you can change the background to white, with the following CSS:

.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"]

that may help you out

2) try adding this peace of CSS:

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

3) add this css:

.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"]

does it makes sense?

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.

Ohh sorry, this was the CSS I meant for that:

.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!

try with this one instead:

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

for the font size use this:

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