Jump to content

Front-end edit of single image field on multilingual profile


Recommended Posts

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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="">

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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; ?>">

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.

Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

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 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
  • Like 1
Link to comment
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 flydev 👊🏻
      I would like to present you a new module which aim to facilitate the productivity of your editors/publishers when working on ProcessWire.
      The idea begun when my co-worker told me that when typing in ProcessWire CkEditor field he was feeling "loosing motivation" when writing big wall of text and/or inspiration. So he opened his web-browser and show me a site looking to Wordpress - feel free to put your preferred emoji here - then he opened Gutenberg... typed some text and moving some "blocks".
      I understood immediately why he got this feeling with CkEditor. If you or your client feel like this guy, then you will love this module !
      What is currently supported ?
      Auto-save Medias upload support HannaCode support Blocks Implemented
      Heading Image Paragraph Embed Quote Code Link Table (beta) Block Delimiter Raw HTML Note (custom block markup) Feature Request
      Frontend Edition   
      And there you go for the preview - sorry I am to lazy and bad at typing text so I had a copy/pasta moment :

      Module featured in the ProcessWire Weekly #317 - Thanks @teppo
    • By DV-JF
      Hey girls and guys,
      I'll want to open this thread in order to discuss a main problem I've run into with following setup:
      I'm maintaining a site where different URLs are directed to the same folder. In site/ready.php the $user->language is set based on the $config->httpHost
      <?php /* Set language based on the domain and user is not logged in */ /* Slovenian */ if( $config->httpHost == "www.domain.si" || $config->httpHost == "domain.si" || $config->httpHost == "domain.si.local") { if (!($user->isSuperuser())) $user->language = $languages->get('si'); } /* German */ elseif( $config->httpHost == "www.domain.at" || $config->httpHost == "domain.at" || $config->httpHost == "domain.at.local" || $config->httpHost == "domain.ch" || $config->httpHost == "www.domain.ch" || $config->httpHost == "domain.de" || $config->httpHost == "www.domain.de") { if (!($user->isSuperuser())) $user->language = $languages->get('default'); } /* Croatian */ elseif( $config->httpHost == "www.domain.hr" || $config->httpHost == "domain.hr" || $config->httpHost == "domain.hr.local") { if (!($user->isSuperuser())) $user->language = $languages->get('hr'); } /* English */ elseif( $config->httpHost == "www.domain.eu" || $config->httpHost == "domain.eu" || $config->httpHost == "domain.eu.local") { if (!($user->isSuperuser())) $user->language = $languages->get('en'); } /* Italian */ elseif( $config->httpHost == "www.domain.it" || $config->httpHost == "domain.it" || $config->httpHost == "domain.it.local") { if (!($user->isSuperuser())) $user->language = $languages->get('it'); } The homepage (id=1) has following settings:

      As you can see German (Deutsch) is set as default language. Everything is working nice and fine and I'm really happy with this kind of setup but now there are some new requirements, which causes me quite a headache :
      I've to add some pages only in one or two languages (they should not be present in German) I've to create some editor roles that are allowed to only edit (can be done with https://processwire.com/docs/user-access/permissions/#multi-language-page-edit-permissions) & add pages to their specific language. What I've found out so far:
      The default language can't be disabled and must always be present (though this would be in my eyes the easiest solution) Creating my own "language select field" - example here: won't work in this case because I've to rely on the native languages in order to setup the right permissions for editors. There seems to be some solutionsbut I think these won't match for me because I've to think about handling editors and permissions, too. After searching and searching, scratching my head and searching and searching again, the only possibility that comes to my mind is to add another language for German and assign this language to the specific URL's instead of the default language.
      The advantages with this solution for me:
      I could activate or deactivate any language on any page Editors which are allowed to add pages can get the permission page-edit-lang-default without affecting the German pages. The disadvantages:
      All multi-language-fields will have an empty tab for the default language - this may irritate editors a lot Seems to me like a lot of work to do because I've to copy the language field nearly for 1000 pages/repeaters (maybe I'll find an SQL query) My questions:
      How would you handle this task? Could my setup be optimized in a completely different way? If I go for my solution (adding another language for German) would it be possible to hide the language tab for default language in any way?  If some points aren't clear enough please don't hesitate to ask.
      Many greets...
    • By Mustafa-Online
      Did any one tried to integrate "WordPress New Editor" into ProcessWire ??
      I did some searches and I found this Repo on Github: https://github.com/front/drupal-gutenberg Which allows Drupal Users to use Gutenberg.
      Any Thoughts ?

    • By celfred
      I can't find my way out of this. I'm trying to use the front-end editing capabilities of PW. It works quite well so far, except if the user sets an empty value. Indeed, in such a case my field just disappears until I reload my page.
      Here's my code :

                $out .= '<edit informations>';           if ($page->informations != '') {             $out .= '<p>'.$page->informations.'</p>';           } else {             $out .= '<p>No infos.</p>';           }           $out .= '</edit>';
      The idea is to have a paragraph showing 'No infos' if field is empty so the user can double-click on it. He/She then gets the inline editor which works perfectly well as lon as he/she sets a value. But let's say he/she decides (or by mistake) to set an empty value and save, then my paragraph disappears completely and the user must reload the page if he/she wants to edit the field again.
      I wish I could add some kind of default value if field is empty. Maybe I'm misunderstanding something ?
      If you have an advice, I'd appreciate
      PS : I've tried all A/B/C/D front-end possibilities and read and re-read docs, but still the same issue...
    • By DxJR
      So is there anyway to get Inputfield Dependencies to work with front-end editing? the field is there, but it isn't showing the results I need based on the field selection it's dependent on. 
  • Create New...