Jump to content
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 olafgleba
      Hi,
      maybe kind of related to https://processwire.com/talk/topic/13286-image-description-not-saving/ but with other environment bits.
      While adding a new page/edit a existing page containing a image field, the image itself gets stored into the database but strangely the entered description does not. More strangely this only happens on my staging server. Within my local dev environment all is fine. And beside of this particular problem, all parts of the PW instance works fine. On both environments (s. below).
      First suspicion was the varying PHP/mysl versions of the local <-> staging environment. But, there are many working projects with the identical setting (s. below).  And i never encounter this problem so far.
      No error/log/console output. It just fails to get stored.
      Local Environment: PHP  7.4.6, mysql 5.7.29, PW 3.0.148
      Staging Environment*: PHP 7.0.33, maria DB 10.1.46, PW 3.0.148
      Maybe someone has a hint what to try?  Thanks in advance.
      *) I cannot change the staging server php/mysql settings because its part of a shared hosting account.
    • By arnd
      Hi,
      I have a repeater with some images in it.
      As Superuser I can work with the Actions (rotate...). But my Users with lower Rights can't use this Actions.
      The same User can use the Actions on images outsite a Repeter-Field. So I think it's not a Problem of Rights-Management but from Images in Repeater Fields.
      ProcessWire 3.0.164.  Bug? Or can I manage this in the settings?
      Thanks in advance
    • By Mats
      BETA: SplashAndGrab
      https://github.com/madebymats/InputfieldSplashAndGrab
      This module attaches a search input to selected image fields that lets you search and download images from Unsplash.
      (Unsplash is a stock photo service where you can download images for free and use as you wish. No strings attached.)   
      You can search by string, colors, orientation/crop and order by relevance or time published
      I find Unsplash useful both for placeholder images when building sites but also as a time saver for editors if they don’t have any images at hand, just search, download and publish.

      Thanks to @apeisa for building the  FlickrInputField Module and @Robin S for AddImageUrls,  took a lot ideas and code from those modules.
    • By markus_blue_tomato
      We have created a module to create BlurHash strings for images while uploading in ProcessWire. This blurry images will be saved in the database because they are very small (20-30 characters) and can be used for Data-URL's  as placeholders for image-lazy loading.
      https://github.com/blue-tomato/ImageBlurhash
      E.g. where we use this in production:
      https://www.blue-tomato.com/en-INT/blue-world/ https://www.blue-tomato.com/en-INT/blue-world/products/girls-are-awesome/ https://www.blue-tomato.com/en-INT/buyers-guides/skateboard/skateboard-decks/ https://www.blue-tomato.com/en-INT/team/anna-gasser/
    • By EyeDentify
      Hello dear PW gurus.

      I have stumbled over a strange error that i all of sudden got when trying to upload an image to a images field on a page.
      There where images allready stored in the field that i wanted to keep, but during the upload the error apear and after that all images are gone from the field and i can´t upload any, i just get the error every time.
      I am running ProcessWire 3.0.153 dev.
      Update:
      After looking in the assets folder i find the folder for the page and the image files seems to be there including the ones i tried to upload when the error occured.
      But they don´t show up in the images field in the page editor.
       
      The error reported:
       
      SQLSTATE[01000]: Warning: 1265 Data truncated for column 'ratio' at row 1 And here is a screenshot of the event:

      The TracyDebugger Error reporting:

      I hope you fine folks could point me in a direction.
      But it seems our old pal set_time_limit() is back.

      Regards, EyeDentify
×
×
  • Create New...