vectyr

Hey, thanks, looks like that was it. A server migration was just done and for some reason it set my php for the site to a really old version. I wasn’t expecting that to change so I was puzzled by it, but hopefully your response will help anyone else who happens to have the same issue.

Yeah, you definitely don’t want to be running old versions of PHP.

@dartiss Yeah, never figured that out.

Bump. Any ideas?

Ah, yeah, the gallery works, those are uploaded to the site. I’m looking at the first three images on the page. There is a .jpg extension on the files and the links. Haven’t found a solution yet and the images are not appearing on mobile either which is unfortunate.

It looks like this is SharePoint causing issues here, I appreciate your help though. I’ll keep looking for another solution, we may just have to have the images on the site, the client was hoping that we could keep all the images within SharePoint because they like them organized there.

@awelzel I think I may have found the problem. I’m linking to images from Microsoft Sharepoint, and I have the image settings to allow public viewing of the images and that’s obvious because you can see them on the page and view the larger one because the block is linked to the file.

When I link to other images from other URLs it seems that the “data-lbwps-” attributes are being added but not to images where the URLs point to images hosted on SharePoint.

Any ideas? It doesn’t seem like that should matter. It should see a linked image with the same markup and apply those attributes right? Does the source matter?

I added a random linked image down below, it’s blueish city scape and you can see that it works. All the other images don’t though.

• This reply was modified 2 years, 10 months ago by vectyr.

@awelzel Sure thing. Insert a new image block, select “Insert from URL” and paste the URL. Click the curved “Apply” arrow button. The image will be inserted into the page. Click the insert link button and choose “Link to Media file.”

When you click on the image on the frontend, it will not open in the lightbox but it will open the image itself and that image will take over the page.

Here’s a link to the page I’m working on: https://nv.vmockup.com/overview/

• This reply was modified 2 years, 10 months ago by vectyr.

@dartiss Here’s where I’m testing things: https://nv.vmockup.com/implementation/

Yeah, I had found those, but even if I change the styles in tooltip.css, I don’t see those styles reflected on the site. I’ve tried changing several of the existing styles in tooltips.css and tooltips.min.css but I don’t see any changes at all.

Is it “.footnote-tooltip” that controls the styling for the tooltips?

That’s not a bad idea, however, with the new update to WordPress where the blocks appear in a sidebar, this doesn’t look like it is going to work because the block editor title is separate from the content. If they were in the same div, it would be easy to sort. But now you’d have to sort the titles and the content individually.

Oh, duh, the phone number field had to be added manually, I thought that was a default field for some reason like website.

But when I add meta fields like phone or website, those don’t show up on the profile page for the user to edit. How exactly do you make more options available on the profile page?

Ok, this is a little embarrassing but I found the issue. The carousel block settings in Advanced Custom Fields was set to “Show this Field Group if > Block > Is equal to > ALL” and that was the cause. I didn’t notice it before because that was the first block I created so it looks like after I created the other ones that one got set to “ALL” by default without me realizing it.

Wow, really? I’d totally take advantage of that. Thanks again for your contribution to the community and for taking the time to help.

You did it! THANK YOU! You are truly a “ninja-man” (I’ll bet you never hear that one). It worked and I knew it would be something simple like that. I updated the function as well, it worked the other way too but probably best to match their documentation.

My original question was not nearly detailed enough but that’s because I didn’t understand the problem entirely at the time. It ended up being a late night and so here’s the solution I came up with.

What I have here is an Advanced Custom Fields repeater with a custom carousel solution via https://responsiveslides.com/. I ended up adding a counter that adds a unique class to each carousel on the page. Some pages have many carousels.

          <div class="sections">
            <?php if( have_rows('sections') ) : $counter = 2; while( have_rows('sections') ): the_row(); $counter++ ?>
              <div class="sections__carousel">
                <?php 
                $images = get_sub_field('section_gallery'); if( $images ): ?>
                  <ul class="section-page__slider slider slider<?php echo $counter; ?>">
                    <?php foreach( $images as $image ): ?>
                      <li>
                        <a class="lightbox-trigger" href="<?php echo esc_url($image['url']); ?>"><span class="iconify" data-icon="ic:baseline-fullscreen" data-inline="true"></span><img src="<?php echo esc_url($image['sizes']['large']); ?>"></a>
                        <div class="bg-fill">
                          <div class="bg-fill__img" style="background-image: url('<?php echo esc_url($image['sizes']['large']); ?>');"></div>
                        </div>
                      </li>
                    <?php endforeach; ?>
                  </ul>
                <?php endif; ?>
              </div>
              <div class="sections__content">
                <?php if( $title = get_sub_field('section_title') ): ?><h2 class="sections__title"><?php echo $title; ?></h2><?php endif; ?>
                <?php if( $description = get_sub_field('section_description') ): ?><div class="sections__description"><?php echo $description; ?></div><?php endif; ?>
              </div>
            <?php endwhile; endif; ?>

Then, ungh, here’s the ugly part. I am definitely not a pro at this but I have some javascript that targets each slider and adds the attribute that I need.

    $(".slider0 .lightbox-trigger").attr("data-gallery-id", "0");
    $(".slider1 .lightbox-trigger").attr("data-gallery-id", "1");
    $(".slider2 .lightbox-trigger").attr("data-gallery-id", "2");
    $(".slider3 .lightbox-trigger").attr("data-gallery-id", "3");
    $(".slider4 .lightbox-trigger").attr("data-gallery-id", "4");
    $(".slider5 .lightbox-trigger").attr("data-gallery-id", "5");
    $(".slider6 .lightbox-trigger").attr("data-gallery-id", "6");
    $(".slider7 .lightbox-trigger").attr("data-gallery-id", "7");
    $(".slider8 .lightbox-trigger").attr("data-gallery-id", "8");
    $(".slider9 .lightbox-trigger").attr("data-gallery-id", "9");
    $(".slider10 .lightbox-trigger").attr("data-gallery-id", "10");

This allows the lightbox solution I’m using: “Lightbox with PhotoSwipe” to only show the images for that specific gallery without just showing every gallery image in a single lightbox.

This is not an elegant solution but it WORKS.

Ok, I figured it out. Turned out to be a more complex problem and complex solution.