I am trying to create a mega menu that works with the static pages plugin. I can get a basic dynamic menu going but not sure how to approach the images. I would like to somehow tie the images with the static page. Not all pages will have an image. Is this possible to create?

Example image here

I am trying to achieve the same thing. Did you manage to create a solution?

same here, i've tried creating a plugin to add image in menu but it did not work

public function boot()
    {
// Menu
        Event::listen('backend.form.extendFields', function ($widget) {

            if (
                !$widget->getController() instanceof \RainLab\Pages\Controllers\Index ||
                !$widget->model instanceof \RainLab\Pages\Classes\MenuItem
            ) {
                return;
            }

            $widget->addTabFields([
                'viewBag[menu_item_image]' => [
                    'tab' => 'Menu Image',
                    'label' => 'Menu Item Image',
                    'comment' => 'Menu item image will be shown with title',
                    'type'=> 'mediafinder',
                    'mode' => 'image'
                ],

            ]);
        });
}

Any suggestions ..

Actually it works, but mediafinder widget do not show image preview.

If you select images, apply changes and save menu, image/file path is saved - you can check it by changing mediafinder field type to text.

And you can use image in Twig with menuitem.viewBag.menu_item_image.

So the only problem is how to show saved images preview.

I have this in my todo list for a long time so I will try to find a solution and implement it in my Small Extensions plugin.

Any solutions?

For being able to display preview images in front of a Static Pages Menu in OctoberCMS, do this

• Download the "Small extension Plugin" of Jan Vince and install
• allow preview for Static Pages Menus in settings
• the plugins documentation is not updated: it doesnt need a fix anymore for the images and value for the image is item.viewBag.image

• use this code

  <ul class="list-unstyled"> {% for item in videosMenu.menuItems %} <li> <a title="{{ item.title }}" href="{{ item.url }}" class=""> <img src="{{ item.viewBag.image}} //use code of your resize plugin here//"> {{ item.title }} </a> </li> {% endfor %} </ul>

Last updated 4 years ago