PREVIEW: The new Assets Manager Panel (experimental)

[George]

As you probably noticed in the last update we have introduced a great new feature for managing and using all your project assets visually - the Assets Manager

Here is a global overview of how it works. Please evaluate it and post your feedback in this topic, so we can improve it in the final release.

Enable experimental options

As the new Assets Manager is available currently only under experimental options, you need to enable them first:

Where to find the new Assets Manager?

You can local the new Assets Manager in two places - as panel or as picker when you need to pick an image.

Choose your main Assets folder

In your project settings you can choose which is your main assets folder

Assets Manager Panel

You can find the Assets Manager as a side panel on the left side of Wappler:

There you have all the tools you need to create your assets folder structure and see all the available images.

View size

You can switch view if you want to be able to see bigger or smaller thumbnails

Creating folders

You can easily create a new folder by clicking on the [ + ] icon in the toolbar, or choosing it from the context menu:

Adding new images in a folder

You can simply drag any images from you Windows Explorer or Mac OSX Finder, to the images pane of the Assets Manager and those images will be copied to the selected folder automatically.

Assets Picker

Of course you want to use all those great images directly in your pages, so a handy assets picker is available!

Picking image in the new Design View

Each image in the new Design View has an image icon in the middle, click on it and the Assets Picker will popup!

From there you can directly select the image you want and it will be used on the image in your page.

Picking image in the App Structure properties inspectors

All image inspectors, where you need to choose an image source will have a new “image pick” icon that will also open the Assets Picker and allow you to choose the desired image directly:

Conclusion

So that’s about it! Now you can see the great power of the new Assets Manager that we are preparing for the official Wappler 2.0 release.

So check it out and let us know what you think.

[brad]

Just curious … if you have say three different sizes of the same image, is there a way to tell them apart? A tooltip with size or file name on hover perhaps?

[George]

Good question! Currently the Assets panel show all the images.

However we are thinking to implement also settings per folder, so you can specify what you want to see and even have images auto resized!

So like specify that a folder has images and that their are sized like:

• originals
• 2x - 800 x 600 (are what every size you enter)
• 3x - 1600 x 1200
• thumbs - 100 x 100

and the 2x, 3x and thumbs are sub folders of the original folder and those are auto generated when you drop new images.

Then on insert you can choose the image size you want or when we have a responsive picture component later on - it will auto serve the right size!

[brad]

Ok, I have a site that actually has some assets so I gave this a look. First impressions are very good. I can see this feature being very useful. I have one comment and one question:

Question: If i drag some images to the assets panel do they automatically get uploaded or do I still have to locate them in the files panel and upload them?

Comment: I like to keep a folder of original .psd files for example. Now I don’t expect thumbnails to be shown for .psd files but I think there should be a default ‘unsupported image’ icon/thumbnail instead of the broken image file icon or whatever that is that is displayed.

Looks really good though. Nice work.

[brad]

Ok, I found a bug as well.

Bug: The assets panel needs a refresh button or better synchronization. I was able create folders and add images no problem in the assets panel. But when you delete the folders or images using the files panel they still remain in the assets panel. Also if you add a file manually the old way or add a new folder in the files panel it doesn’t update in the assets panel.

Have to quit and restart Wappler to update/synchronize the assets panel.

[brad]

Minor cosmetic issue … no divider on the top part of the Assets Panel.

[TomD]

and the 2x, 3x and thumbs are sub folders of the original folder and those are auto generated when you drop new images

I think the could be useful, as long as the folder name and structure can be chosen, and that sharpening can be applied to the resized images for example. However, with the excellent tools which already exist in Server Connect, I’m not sure if it would be that useful. Features to resize individual or selected images might be useful (ie less automation and more control).

I hope there will be an option to display filenames and sizes - to avoid the need to switch to the OS file manager.

It would be useful to be able to click/right-click an image and have options to open it in the default OS image-editing program - or, ideally, an option to choose programs to open the file in (like in DW). Again, this would save trips to the OS file manager.

[TomD]

A minor issue: it doesn’t seem to be possible to resize the panels - ie show more of the folder list. The top border doesn’t offer a resizing option:

Assuming this can be fixed, it would also be useful if the resized panels could retain their sizes after refreshes and closing Wappler etc… (I would like this most of all in server actions panels where I frequently have to resize the panel - and grabbing the border is slightly fiddly for something which has to be done a lot).

[TomD]

I’ve just had an opportunity to make use of the new assets panel. I was adding a series of cards with images and captions in a masonry grid (static). The combination of the new panel and the new image links in the experimental design view works very well.

Having said that, I still needed to have File Explorer open so I could see the file names (in order to add the captions). I mentioned before that another view with filenames and sizes would be very useful. It would also be useful to have this information appear as tooltips, appearing when you hover over the images.

(Edit: I tried to add another reply but wasn’t allowed (too many consecutive replies) - so I’ll add it below.)

Another thing which would be useful: if you are selecting images from a subfolder within your assets folder, you have to reopen that folder each time you select an image - ie the last accessed folder is not ‘remembered’. It would be useful if it were.

(This is a general issuesin Wappler: the last accessed folder/subfolders are not remembered.)

[Freddy_Blockchain]

good idea! I really think we shouldnt invent the complete asset image gallery wheel from scratch. Maybe we should also compare some features with already exisiting folder views from our OS like Windows etc. Means, Filtering/Hide Option could be needed, also Sorting or even Grouping, refresh

[Teodor]

Bug: The assets panel needs a refresh button or better synchronization. I was able create folders and add images no problem in the assets panel. But when you delete the folders or images using the files panel they still remain in the assets panel. Also if you add a file manually the old way or add a new folder in the files panel it doesn’t update in the assets panel.

A minor issue: it doesn’t seem to be possible to resize the panels - ie show more of the folder list. The top border doesn’t offer a resizing option:

These issues are now fixed in Wappler 1.9.9

Having said that, I still needed to have File Explorer open so I could see the file names (in order to add the captions). I mentioned before that another view with filenames and sizes would be very useful. It would also be useful to have this information appear as tooltips, appearing when you hover over the images.

We added a list view which shows the names now. Also names are displayed on hover in thumbnails view.

[vdweyer]

I have different images and foto folders in my root but i can assign only 1 folder into the assets folder. Am I missing something ?

[patrick]

Your not missing something, you can indeed only select a single folder. Perhaps a good idea for you next project to organize them differently. You can have sub folders under the asset folder.

[vdweyer]

I have 24 projects in Wappler. I don’t like to remake them all

[Teodor]

It’s always a better idea to group your assets in one directory in your site root.

As Patrick suggests you can do this for your future projects. For the current ones, you can just use the file manager instead.

[vdweyer]

We can not change the folder structure of current websites in the File Manager. How do I reorganise my folders to put them in 1 Assets folder.

I remember in DW changing the folder structure was no problem: DW changed all the links in the pages to the new foldername if you wanted.

[TomD]

I can move and rename files without any problem. Perhaps restarting Wappler might help.

Wappler doesn’t update links if you move folders. You could use the global search/replace feature to do this.