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 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
    • By rst
      I am having problems uploading svg images in the the latest pw 3.0.98. It shows the preview and has the spinner on top of it, and just gets stuck on that.
      Worked fine in the previous version of PW
    • By Noel Boss
      Hi, I'm stuck since hours and don't know what to do. Here is my Problem:
      I try to generate Previews of PDF using imagick. I have 4 PDF, I generate a preview of the first page of the pdf, save it to a temporary file and want to import it using the api into an image field. It works for the later 3 pdf but not the first. I add it to the image field and save it. Inside the function that saves it, the image is stored in 'data' as well as in 'itemsAdded' but as soon as i leave the function, its nowhere to be found.
      Process:
      1. create previewimage using imagick and create Pageimage > works
      2. add image to filed 'filepreviews', returns Pageimages array with image added > okay
      3. save page > returns true
      4. Outside renderPreview method, image is not anymore in 'filepreviews'
      // mymodule // … // foreach($files as $file){ $preview = wire('page')->filepreviews->get('name*='.$file->basename(false)); // if there is no preview image… if (!$preview instanceof Pageimage) { $this->renderPreview($file) // we create one using $this->renderPreview > should return true on successful save dump(wire('page')->filepreviews); // my Image is nowhere to be found $preview = wire('page')->filepreviews->get('name*='.$file->basename(false)); } // end for each // render a preview of an otherwhise not supported file format // return true if sucessfull save private function renderPreview($file) { $page = wire('page'); // get path to temporary image $tempFile = $path.$file->basename(false).'-preview.jpg'; // … some imagick code // … and save it: $imagick->writeImage($tempFile); $img = new Pageimage($page->filepreviews, $tempFile); $img->description = $file->basename(false); // destroy temp image unlink($tempFile); // this is my Pageimage, all good… dump($img); // save image, my Pageimage can be found in data and itemsAdded – all good dump($page->filepreviews->add($img)); $page->of(false); $success = $page->save(); // sucess = true dump($success); return $success; }
       
      Second question:
      Would there a generally better approach? Like using pageFiles somehow. Goal is to be able to use the image api like scale etc – I don't generally need the images to be stored in an image field.