Gallery with four thumbnails above and one big image below

Hi Guenni007,

Thanks for your efforts.

I’ve added the code from your testpage https://webers-testseite.de/4on1-flexbox-model/ to Enfold Child > General Styling > Quick CSS and made some adjustments:

.flex4on1  {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding-top: 10px
}

.flex4on1 .avia-image-container {
  flex: 0 1 calc(50% - 4px);
  margin: 0 0 4px;
}

.flex4on1 .avia-image-container:nth-of-type(5n) {
  flex: 1 1 100%
}

@media only screen and (max-width: 989px) {
  .flex4on1 .avia-image-container {
    flex: 0 1 calc(50% - 2px);
    margin: 0 0 4px;
  }
}

Then I’ve created a new page and added a color-section with two columns in it. The left 3/5 column has only five image elements in it. The right 2/5 column has only text elements in it.

To the left column, I’ve added the custom css class flex4on1 (Edit Cell > Advanced > Developper Settings > Custom CSS Class).

Now, the layout looks like this (unwanted outcomes marked red and green):

But it should look like this:

Again, I couldn’t figure out how to correct this. Do you see a solution?

Best regards

zizibe1

(Photo credits: DapurMelodi/pexels.com, Andrea Piacquadio/pexels.com, Manzil Joshi/pexels.com, Weir ESCO/pexels.com, Jannis Knorr/pexels.com)

• This reply was modified 4 years, 5 months ago by zizibe1. Reason: Correction of the code

Hi Guenni007,

Thanks for your efforts. I really appreciate them.

Unfortunately, for reasons of anonymity, I’ve posted the link to the website only in the private content are which is only visible to moderators. My apologies for not mentioning this earlier to you.

All five images are exactly the same size (1196 × 798). All landscape format images of the website are this size.

On your testpage https://webers-testseite.de/4on1-flexbox-model/, you have four thumbnails in a row. But on my page, I only want to have two thumbnails in a row.

So, I’ve added your code snippet to the code and made two adjustments (see yellow markings):

Now, the layout looks like this:

All images are aligned now. But the vertical white space is too big (see red marking).

I hope you can recreate my situation on your testpage and find a way to correct the vertical white space.

Many thanks,

zizibe1

PS: On your testpage, I’ve seen the code to have the container on responsive case under the text. Thank you very much.

In this case, I don’t need this code. Put I’ve posted it here for future reference:

Color Section custom class: section_with4on1
(Note: No other element than the two columns in the Color Section.)

@media only screen and (max-width: 767px) {
	#section_with4on1 .entry-content-wrapper {
		display: flex;
		flex-flow: row wrap-reverse;
		justify-content: flex-start;
	}
}

(Photo credits: DapurMelodi/pexels.com, Andrea Piacquadio/pexels.com, Manzil Joshi/pexels.com, Weir ESCO/pexels.com, Jannis Knorr/pexels.com)

Hi Guenni007,

Thanks for your reply. I’m sorry for the misunderstanding.

In my previous post, I’d mentioned that the vertical white space between the images was too big. But now I’ve realized that the two horizontal white spaces were too thin actually.

Thanks to your explanation, I could adjust the code like this:

.flex4on1  {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	padding-top: 0px
}

.flex4on1::before,
.flex4on1::after {
	margin: 0 !important;
    display: none !important;
}
.flex4on1 .avia-image-container {
	flex: 0 1 calc(50% - 3px);
	margin: 0 0 6px;
}

.flex4on1 .avia-image-container:nth-of-type(5n) {
	flex: 1 1 100%
}

The layout looks like this now:

Now, the white spaces between the images are alright.

I have another two questions:

1.
The corners of the images should be sharp. How do I get rid of the rounded corners?*

2.
Currently, the lightbox displays a smaller version of the images (1030 × 687). But the lightbox should display the images in their original size (1196 × 798). How do I achieve this?

Many thanks,

zizibe1

* I’ve just realized that the white spaces between the images are a little bit bigger when the corners of the images are sharp. That’s how it’s supposed to be. So, how can I achieve the following layout which has images with sharp corners?

(Photo credits: DapurMelodi/pexels.com, Andrea Piacquadio/pexels.com, Manzil Joshi/pexels.com, Weir ESCO/pexels.com, Jannis Knorr/pexels.com)

• This reply was modified 4 years, 5 months ago by zizibe1. Reason: * addendum

Hi Guenni007,

Thanks for your reply.

1.
The code looks like this now (adjustments are highlighted in green):

Now on desktop, the white spaces between the images of the flexbox layout look the same as the white spaces between the images of the gallery layout.

But as you see on the screenshot below, the flexbox layout is a little bit too big.

Also on mobile, the flexbox layout is a little bit too big:

How can I correct this?

2.
I’ve added the following code to Appearance > Theme Editor > Enfold Child: Theme functions (functions.php):

function change_lightbox_size() {
    return "full";
}
add_filter('avf_avia_builder_helper_lightbox_size','change_lightbox_size', 10);

It has worked fine. Now the lightbox of the flexbox layout displays the images in their original size.

3.
I’ve added the following code to Appearance > Theme Editor > Enfold Child: Theme functions (functions.php):

function avia_change_gallery_thumbnail_link($link, $attachment, $atts, $meta){
    $link = wp_get_attachment_image_src($attachment->ID, "full");
    return $link;
}
add_filter('avf_avia_builder_gallery_image_link', 'avia_change_gallery_thumbnail_link', 10, 4);

This code should make the lightbox of the gallery display the images in their original size. Correct? If so, I can see no difference, because the lightbox of the gallery has already displayed the images in in their original size before. But thanks for the code anyway.

Best regards,

zizibe1

Hi Guenni007,

Thanks for your reply.

For me, it’s very important that the flexbox layout and the gallery layout are exactly the same size. I would very much like to know how to fine-tune that. But I understand if you don’t want to invest any more time in this topic.

I’ve posted a link to the page with the flexbox layout and a link to the page with the gallery layout in the private content are. I would appreciate it very much if a moderator could help me.

Best regards,

zizibe1

Hi Yigit,

Thanks for your reply.

I recreated your layout using single Gallery element below your existing section in page in private content field.

Great! That’s the layout I was asking about in the first post of this thread!

I’ve tried to recreate this layout on a new testpage. Unfortunately, I didn’t succeed.

Please have a look at the private content area. What did I wrong?

Best regards,

zizibe1

Hi Yigit,

Awesome! Thank you very much for your support.

For the sake of completeness, it should be mentioned that the custom CSS code related to that customization is:

#flex-gallery-alt .avia-gallery-thumb a:last-of-type { 
width: 100% !important; 
} 

Thanks again. You can close this topic now.

Best regards,

zizibe1