Unable to add image to a menu


I want to add an image to the menu, but when i follow the documentation, the menu page doesn’t function normaly.

If i add a text field or another field, the documentaiton is ok.

So this is the code, i have added to my boot function :

Event::listen('backend.form.extendFields', function ($widget) {
      // Only apply this listener when the Page controller is being used
      if (!$widget->getController() instanceof \RainLab\Pages\Controllers\Index) {

      // Only apply this listener when the MenuItem model is being modified
      if (!$widget->model instanceof \RainLab\Pages\Classes\MenuItem) {

      // Only apply this listener when the Form widget in question is a root-level
      // Form widget (not a repeater, nestedform, etc)
      if ($widget->isNested) {

      // Add an extra birthday field
        'viewBag[menuImage]' => [
          'label' => 'Menu Image',
          'commentAbove' => 'Selectionnez l image du menu',
          'field' => 'viewBag[menuImage]',
          'type' => 'mediafinder',
          'mode' => 'image',
          'tab' => 'Media'

And the result :

In the menu page, the apply and Cancel Button are on the bottom of the page and doesn’t function. (They should be the in the modal window.)

I also test with the Small Extension Plugin, but the result is the same.

Is there a solution to fix this bug ?


This is indeed a bug. Since October 2.x the mediafinder component has been redesigned to use <script type="text/template"> tags for rendering selected images. But the menu editor uses them too to render popup content. As a result templates become nested, which is not a valid syntax.

You can try opening an issue here: GitHub - rainlab/pages-plugin: Adds static pages and menus

1 Like

Thanks for your answer.

I have just open an issue on the github page of the plugin.

Possible related issue: Media Finder widget fails in modal forms

This issue should be fixed by updating to RainLab Pages v1.5.5. Huge props to @acasar for fixing this for everyone. Thank you!

The RainLab Pages Plugin’s update fix the problem.