Front-end edit of single image field on multilingual profile

[MilenKo]

Hello guys.

I've decided to get brave and start my first delayed output profile for a remake of my knowledge sharing profile. It went all.good so far but I decided to make it multilingual as to fit the users needs.

For starters, added a field named: image_single and limited the input to one image as this would be used for the logo. Added.the markup to allow the front end editing (method D or direct edit tag to the <img>. After double clicking on the image, I see the pop-up showing up for a second and then closes. As far as there are no errors in the logs, I am a bit stuck to find the reason. I've read earlier that some users had issues with multilingual fields but could not find anything to point me to the right direction. Any ideas or suggestions?

[dragan]

I don't think it's a multi-lang issue, since images or files can't be multi-language per se.

Did you check your browser JS console for any hints or try it in another browser?

[MilenKo]

Well I did check but there are no indications of something missing. Btw, I have the description of the image multilingual so thought it might be related to that one. Even Tracy does not show anything strange as a hint...

[wbmnfktr]

Just tried it with a direct output/alternate template strategy and it works without almost any problems.
Problems are that the editor-view stays in place after saving. Reloading the page afterwards does the trick and everything is fine.

In the template I use:

<div edit="image">
  <img src="<?php echo $page->image->url; ?>" alt="">
</div>

Could you paste your template code or parts of it. Maybe there is something wrong.

[MilenKo]

Hey @wbmnfktr, to make sure it is not a glitch of the system, I decided to test the functionality on the default multilingual profile. To simulate a similar scenario, I grabbed the title and placed it in /includes/header.php. Added to the file a simple image and inserted the edit tags from the other profile. To simulate the location of the logo, I also created a settings template and assigned it to Settings page. Adding an image_single to Settings page and attaching a test image allowed me to edit it on the frontend by double clicking.

As it appears, it is not the issue with my server nor with Processwire (in the default setup). I will try to rebuild my profile step by step hoping to figure out where is the glitch as to make sure to avoid it from happening in the future. 

[MilenKo]

Well the saga continues. I did setup a clean multilingual profile, removed the delayed output logic (_main.php is not appended in config.php) and also cleaned any unused templates. Decided to add my html markup for the home page only and added a single image field called: image_single

Frontend editing module has been installed and I submitted the default settings.

To call the image on the spot of the logo space, I used the following code:

<!-- Website Logo -->
<a href="index.html"  title="Knowledge Sharing Profile">
  <div edit="1021.image_single">
    <img src="<?php echo $pages->get(1021)->image_single->httpUrl; ?>" alt="<?php echo $pages->get(1021)->image_single->description; ?>">
  </div>
</a>

where 1021 id is the one of my Settings page that has the image_single assigned.

Browsing the page shows every bit of the markup correctly, however as soon as I doulble click on the logo - it shows the modal window again for a blink and closes up. When I tried to insert the logo in the default profile withoug changing the home.php file - it all worked fine, but as soon as I put my markup and it fails to keep it open until I close it up.

To try the functionality of non-image field, I added a simple text field and assigned it again to Settings page. As far as it is a text field, I got more options to pick from (A-D) in the input tab. Tried with A : 

<?php echo $pages->get(1021)->edit('text_box'); ?>

And it worked like a charm allowing me to change the text inline. 

Enabled all the errors in Tracy to be logged and I do not see any reported issue neither in the java console nor in the assets/logs/tracy/ folder. Any other hints to try? I know it is silly that I am stubborn with the logo where one would not be tempted to change the logo from the frontend, however it is just to find the issue and avoid having it in the next projects.

[wbmnfktr]

On 5/6/2018 at 1:30 AM, MilenKo said:

.. but as soon as I put my markup and it fails to keep it open until I close it up.

Are you using something like Bootstrap, Foundation or UIKIT in your markup?

Is there any JS magic happening that interferes with the modal (same classes, IDs)?

Try your markup without any of your CSS and JS please.

Right now I have no further ideas what may cause this behaviour.

[MilenKo]

Well I do use Bootstrap and I thought that JS could cause the issue and removed all calls from the code but still am experiencing the issue. WIll try with the CSS as I did not realize it could cause some issues as well if some styles overlap.

Anyway I decided that changing the logo from the frontend is too much to provide considering the fact that the profile is not meant to be fully operated within the frontend, however let me remove the css and js calls and test it without them at leasr for the sake of the knowledge.

Thanks @wbmnfktr for sharing thoughts

 

Edited May 7, 2018 by MilenKo
Funny enough, clearing all css and js calls in the markup did not help with the logo and I still see the modal flashing for a second or two and dissappearing. Well as far as in the defolt multilingual profile it works fine, I am also leaning towards an ov