[Resolved] image gallery with border frames

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.

This topic contains 15 replies, has 2 voices.

Last updated by chienN-3 2 months, 3 weeks ago.

Assigned support staff: Nigel.

Author
Posts
#1574483

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

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

#1575201

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.

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

#1575203

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

#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.)

#1575233

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

#1575245

Nigel
Supporter

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

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

#1575263

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

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

#1575471

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.

#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?

#1575545

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.

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


<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?

#1577045

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.

#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?