image gallery with border frames

This support ticket is created 4 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	-
-	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	-

Supporter timezone: Europe/London (GMT+01:00)

Tagged: Toolset Blocks

This topic contains 15 replies, has 2 voices.

Last updated by chienN-3 4 years ago.

Assisted by: Nigel.

1 2 →

Author

Posts

April 5, 2020 at 8:31 am #1574483

chienN-3

Tell us what you are trying to do?image gallery

Is there any documentation that you are following? yes but it is not what I am trying to do

Is there a similar example that we can see? yes

What is the link to your site?hidden link

April 6, 2020 at 7:29 am #1575189

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

That image you shared is the kind of thing you want to reproduce from another site?

And you have a custom post type (e.g. cars) and a custom image field that accepts multiple values (multiple pictures of the same car), and when viewing a single car post you want to output a gallery of those images, is that correct?

You need to edit the template for displaying cars (if you haven't already, create one at Toolset > Content Templates) and where you want the gallery to appear insert a "Repeating Field / Gallery" block.

You can choose to display a grid of images with the settings as shown in the screenshot.

Note that the border settings for that block apply to the entire gallery rather than the individual images, but if you expand the Field Settings options you can apply additional classes with styling to the images (or add an inline style) which you can use to set a custom image border.

April 6, 2020 at 7:40 am #1575201

chienN-3

where do I apply the classes and what are the codes.

April 6, 2020 at 7:42 am #1575203

chienN-3

here is the link of the image that I am trying to apply the frame to. as you can see there is no frame and I dont see where I can add that.

hidden link

April 6, 2020 at 7:59 am #1575231

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

It looks like you added a grey background to the block.

To add borders to the individual images you could add an inline style (in the section "Image tag inline style"), e.g.

border: 2px solid red;

You can of course add whatever CSS for the border you like there.

(Or add classes to use any existing styles for image borders available.)

April 6, 2020 at 8:00 am #1575233

chienN-3

can you send me a screen shot to where I add those codes?

April 6, 2020 at 8:08 am #1575245

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

Sure, here you go...

April 6, 2020 at 8:37 am #1575263

chienN-3

thanks for the help, another request though. how do i get the gallery image to stay the same size on the slider display option. attach is the example of the image

April 6, 2020 at 10:25 am #1575363

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

The crop option ensures they are all the same size.

April 6, 2020 at 11:16 am #1575471

chienN-3

thank you again Nigel, sorry to bother you again but I notice I cant get my gallery image to open on light box, when I click on the image it goes dark and no image pop out , how do I fix that.

April 6, 2020 at 11:45 am #1575495

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

It looks like interference from a plugin "Car demon template builder".

Can you disable that plugin and then test again?

Is that the source of the problem?

April 6, 2020 at 12:09 pm #1575545

chienN-3

thank you man, youre the best!!! now the only thing I need is to have a full background image on the inventory page as you can see its all white and I dont know which plugin or how to create a background image. I know I can do it with divi but this is not divi.

April 7, 2020 at 11:52 am #1576995

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

What do you mean when you say this is not Divi?

If I look at the source for the inventory page here's how the body tag looks.

[php]
<body class="page-template-default page page-id-559 custom-background _masterslider _msp_version_3.2.14 et_pb_button_helper_class et_fixed_nav et_show_nav et_hide_primary_logo et_hide_fixed_logo et_primary_nav_dropdown_animation_fade et_secondary_nav_dropdown_animation_fade et_header_style_centered et_pb_footer_columns4 et_cover_background et_pb_gutter osx et_pb_gutters3 et_full_width_page et_divi_theme et-db et_minified_js et_minified_css gecko">
</class>

Note those classes, the et_ classes generally come from Divi and the et_divi_theme class is a bit of a giveaway that this is Divi.

Sorry, can you explain what you mean?

April 7, 2020 at 12:11 pm #1577045

chienN-3

yes divi is the page builder I have currently installed but I am not using divi to edit this page, so I cant use the full back ground image on it and I would like to.

April 8, 2020 at 12:03 pm #1578451

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

I looked at the markup on the page.

The background image is there on the inventory pages, but they include a div id="main-content" that has a white background and which obscures the background image on the body.

So you need to add a CSS style rule for that page which sets the main-content div to have a transparent background.

If you are not creating the page using Divi I'm not sure how you would add the CSS to just that page, but if you are designing the page with the block editor a simple way to do that would be to add a Custom HTML block to the page (anywhere) and then add the CSS inside a style tag, like so:

<style>
#main-content {
  background-color: transparent;
}
</style>

Does that work for you?

1 2 →

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.