[SOLVED] Image front editing in a gallery

[David Koplin]

Hello dear community

I have a problem with a front edit possibility inside a OWL gallery.
The thing is, normally you do a double click to edit something directly on a page.
In my case a single click opens up a picture inside a gallery, so I can't "hit" the editing.

   

                     <div class="demo-gallery">
                            <ul id="lightgallery2" class="list-unstyled row">
                                <li class="img-md-12 mb-12 mb-sm-12 mb-md-12 mb-lg-12 mb-xl-12 col-12 col-md-12 img-fluid full-height" data-responsive="" data-src="<? echo $page->page_home_owl_00_img->url; ?>" data-sub-html="<h4><? echo $page->page_home_owl_00_h4; ?></h4><p><? echo $page->page_home_owl_00_p; ?></p>">
                                    <a href="">
                                        <img class="img-responsive" src="<? echo $page->page_home_owl_00_img->url; ?>">
                                    </a>
                                </li>
                                
                                <? foreach($page->children('template=9dk-owl-home') as $item): ?>
                                <li class="img-md-6 mb-3 mb-sm-3 mb-md-3 mb-lg-3 mb-xl-3 col-12 col-md-6 img-fluid" data-responsive="" data-src="<? echo $config->urls->templates ;?><? echo $item->page_home_owl_01_img; ?>" data-sub-html="<h4><? echo $item->page_home_owl_01_h4; ?></h4><p><? echo $item->page_home_owl_01_p; ?></p>">
                                    <a href="">
                                        <img class="img-responsive" src="<? echo $config->urls->templates ;?><? echo $item->page_home_owl_01_img; ?>">
                                    </a>
                                </li>
                                <? endforeach; ?>

                           
                            </ul>
                        </div>

 

I tried any variants of options C and D from this page:
https://processwire.com/api/modules/front-end-editing/

Are there any hints for me, what I can do?
Any help is highly appreciated!

Best from Munich in Germany

[flydev]

16 hours ago, David Koplin said:

Are there any hints for me, what I can do?

Just a fast idea because maybe it can't work and I never used it, but worth a try, you could do something like you can see in the admin page while editing an image field.

If an editor is logged in then add an "overlay icon" where editor can click on to edit.

What I mean :

 

[David Koplin]

Thank you very much flydev!

It is my fault. What I mean is, I want to replace images in a a gallery by front end editing.
The problem is, the default method (double-click) does not work, because a single click provokes the modal for the gallery view.

The gallery can be found here:
http://sachinchoolur.github.io/lightGallery/

My question is do I have a chance in replacing the images by front end editing, and by which method?
Or is the user forced to use the backend?

Thanks again for supporting me : )
David

[dragan]

I don't think PW frontend-editing will work like that.

If the images were placed in a WYSIWYG field, FEE would work. But files used like that in a PW template are another matter.

[David Koplin]

Ok : (

Thank you very much for your time : )

Right now, i've detected a conflict between the jQuery brought by the lightgallery and the CKeditor in PW.
The modal window of CK is destroyed and nothing can be saved ... but that is probably an other story.

[David Koplin]

17 minutes ago, David Koplin said:

Right now, i've detected a conflict between the jQuery brought by the lightgallery and the CKeditor in PW.
The modal window of CK is destroyed and nothing can be saved ... but that is probably an other story.

Solved by using (in my footer) the same jQuery version (1.11.1 used by PW).
Mentioned here:

 

[David Koplin]

Ok, the solution with two identical jQuery versions is stable.

And I give up the image front editing in this gallery.

I cannot find the 'close' or 'solved' button.
Can somebody do this for me, please?
Thank you all!

[SamC]

I tried this with an (unlimited) images field just to see how it would work.

<?php namespace ProcessWire; ?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title><?php echo $page->title; ?></title>
    <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>

  <div class="row">

    <?php
      foreach($page->images as $image): 
    ?>

    <div class="col-4">
      <edit images>
        <img src="<?= $image->url; ?>" />
      </edit>
    </div>
  
    <?php endforeach; ?>

    </div>
  </body>
</html>

(used Option C)

I made a very rough video of it:

You could just do what @flydev suggested with an overlay icon. They click on that, then can change images. It's not as user friendly as being able to just change one image at a time though, clicking on any of them brings up the entire field (as expected). Still pretty cool though!

(this isn't a live site, nor do I use '/login/' on any live ones)

[David Koplin]

Wow, thank you so much for your efforts : )
And please excuse the late reply, no WIFI in holiday : (

The problem is still the transition on hover.
But I'll keep an eye on your suggestions.

Thanks!!