David Koplin

[SOLVED] Image front editing in a gallery

Recommended Posts

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

Share this post


Link to post
Share on other sites
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 :

iconimg.png.141ec2e0bede11a555adba39bb346d00.png

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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:

 

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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)

  • Like 3

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By gregory
      Hi guys.
      I would like to show only the first image as a preview of a slideshow. The code below shows the first image but is repeated. Do you know a solution? Thank you
      //Call image foreach($story->galleria as $img) { echo "<img src='{$story->galleria->first()->url}' alt='{$story->galleria->first()->description}'>"; }  
    • By awebcreature
      Hello there
      I need a field with realtime percent calculation (without page save)  with values from other fields in admin template. I think about jQuery with onChange methods on corresponding fields but this is not clear for me how to do this in module. Any help with some advice or example will be highly appreciated! 
      Thanks in advance! 
       
    • By Marcel
      Hey, 
      I am very new to processwire and bootstrap. I have a field (text area) and there I want to be able to insert an image which is responsive. I tryed it with Source but in the end the page doesn't seem to like it when I insert in Source the following code
      <img src="<?php echo $homepage->content_img->url; ?>" class="img-fluid" alt="Responsive image"> What can I do to make it possible to insert reponsive images in a text area?
      Thank you in advance.
      Marcel
    • By gonzz
      I'm doing an artist site and they want to be able to upload a large .tiff to their portfolio. I need to keep to a copy of the original file in the server for the art distributers, and of course serve jpg in the web front end.
      I had the idea of extending the file or image upload input so that if the image is tiff, keep it, and also convert it to jpg, so I could access through something like $image->originalUrl or $image->size(100, 100)->url 
      I was wondering if you thought this a good idea, or if i'm over-engineering something that could be done simply. Also, I've never extended an input, so any examples are welcome.
      Thanks!
    • By Markus Breitinger
      I want to use Particle.js as background of my page. What modules do i need and where must i put the code?
      The usage of particle.js in plain HTML is in the attached files.
      index.css
      index.html