tslarkin

You have my concerns just about right. I rarely need manually grouping by rel attribute; usually automatically grouping of all images works, but this seems to mean that rel based grouping is activated automatically.

My technique works through a shortcode that carries a list of the attachment ids of the images. The shortcode triggers PHP code that constructs the HTML for the page based on metadata from Advanced Custom Fields. You are probably right that not many of your users are creating pages using the classic text editor and relying on PHP to construct the HTML.

I’m not allowed to provide a link, but if you were to use your imagination on “soagithaca dot org slash jul-2024”, you might get a better idea of what I’m doing. I’ve been using FancyBox in this way for four years. Easy FancyBox allows me outstanding, maybe even unique, control over the presentation of the images.

Did that. I think. Don’t use FB Messenger, so I may have gotten something wrong.

Sure. How to do this securely?

Using Elementor 3.13.3, Elementor Pro 3.13.2, SFG 4.0.6.

The steps required to produce the problem are to have an Elementor Pro Image Carousel on a page when the SFG plugin is active. In this case, the page’s swiper.min.css file is from SFG. If SFG is not active, then the swiper.min.css file is from Elementor.

If you have a page with the Elementor Image Carousel included and SFG active, how many files named swiper.min.css are loaded? If only one, is it your file or Elementor’s?

If you go to https://soagithaca.org and scroll to the section May 2023 Salon, you will see that the ‘<‘ and ‘>’ controls are misplaced. (I have activated the SFG plugin for your benefit and will leave it this way until 1PM EST so you have a chance to look.) If you look at the HTML for that control you will see it is embedded in a div of class .elementor-swiper-button, which has a generic display type of block. It should be Flex from the Elementor CSS. If you look then at swiper.min.css in Sources, you will see your CSS file. If SFG is not active, then you will see Elementor’s version of that file.

If this doesn’t help, I can send you a temporary administrative login and you can see for yourself the effect of activating or deactivating your plugin.

I had hoped that the new release which states “Fix Instagram feed carousel layout” would fix the Elementor conflict. It didn’t.

To continue from my previous comment, if I add the code below to the end of your swiper.min.css, the problem with the previous and next buttons goes away. The pagination swiper (dots) are still incorrectly placed. This is probably due to another Elementor class that has been removed by your css file.

.elementor-swiper-button {
    position: absolute;
    display: inline-flex;
    z-index: 1;
    cursor: pointer;
    font-size: 25px;
    color: hsla(0, 0%, 93.3%, .9);
    top: 50%;
    transform:translateY(-50%)
}

.elementor-swiper-button-prev {
    left:10px
}

.elementor-swiper-button-next {
    right:10px
}

I think I figured out the problem.

Without SFG, the previous widget, ‘<‘, in the image carousel has the class .elementor-swiper-button and CSS

.elementor-swiper-button {
    position: absolute;
    display: inline-flex;
    z-index: 1;
    cursor: pointer;
    font-size: 25px;
    color: hsla(0, 0%, 93.3%, .9);
    top: 50%;
    transform:translateY(-50%)
}

With SFG, the class is not found, and no CSS is applied except the default

display: block;

This happens because both Elementor and SFG load a CSS file named “swiper.min.css”. Your CSS file replaces Elementor’s, so the desired class is not defined.

If you renamed your CSS file, I think the problem would go away.

• This reply was modified 1 year, 9 months ago by tslarkin.

It happens whether Pro is enabled or not.

I use the Elementor Hello theme. Also I didn’t make clear that I use Elementor Pro.

I can confirm this problem and that it is due to your plugin. Not only are the next/previous controls misplaced, but the space between the title and the dots is incorrect.

Bruce, the new version fixed the problem for my site. Thanks.

https://drive.google.com/file/d/165wYpS8SHRluY9vjrc9xj6RFbA0bgwAS/view?usp=sharing

P.S.

Forgot to mention: The problem doesn’t happen if I disable ACF.

Bruce,

I’ve made a short screencast. How do I share it? There’s no obvious way to do that through this interface. Do I host it somewhere and send you the link?

Tim

I have the same problem. A screenshot is hardly necessary. If I make any edit to a media item from the list or thumbnail library view, the FileBird category reverts to Uncategorized. This problem started after a recent update of FileBird. It always happens now with any image and any change.

One possible complicating factor: I have modified the standard media item window with Advanced Custom Fields.