[WIP] "Image view" in the Item list

Greetings.
At my company we are designing and manufacturing handbags. Therefore, for our designers’ team it’s very important to keep track on the items and review design iterations in a visual manner as a primary kind.

Here is a preliminary draft of the proposed “Image view” feature:
image view mockup

I guess all elements here are pretty common for ERPNext users, but there is an addition in a top right corner of the cells: it’s a date when the item with current design was submitted for the first time.
One more important feature would be zoomed view, invoked by single click on the image, which will let user ability to have a closer look and see all the details of appearance.

Please express your opinions and ideas on improving the mock-up. Thanks.

There is also the post in a Jobs section: https://community.erpnext.com/jobs/development-of-image-view-in-item-list

https://github.com/frappe/erpnext/issues/5089

3 Likes

Writing to inform community that the feature is WIP now, so stay tuned and share your suggestions!

Also wanted to clarify are the icons used in ERPNext from Font Awesome? For example, edit icon (the pencil) seemes to be quite similar to Awesome’s pencil. The question is because of the need to keep look consistent and because I think that Awesome’s list and large thumbnail icons suit fine List view and Image view respectively.

Yes indeed! We use Font Awesome 3.2.1 icons and Octicons

1 Like

Great, @vjFaLk! So then we’ll go with those icons if there is consensus.

Go for it, consistency is good.

1 Like

but as some of the users dont have a fast internet connection, the image loading time will be big for them, so i think its a good behavior of you make this as an option instead of making it as a mandatory view…

2 Likes

Thanks for feedback, @ramielian!
We didn’t have idea to make it mandatory — it has to be an optional view (as you might guess from my previous post about icons) and obviously List view has to be default one. What would be great, is ability to make Image view default as per each user. Either through user settings or making ERPNext remember which view was the last chosen and keep it as is.

A bit of news on the topic. The development was halted for a while, but since today is expected to be underway, performed by New Indictrans Tech. We hope to accomplish the goal by the end of the month.
I’ll post updated feature specifications soon, but nevertheless, everybody is welcome to suggestions.

@Deven_Shah, I recall you were interested in the image view, do you still need it?

h1. Item Master View

Introduce a alternative way to item list as tile view with images. This is specially for the business dealing with or selling designer stuffs. So, all the items are visible as part of list. Function of the item list will follow.

h2. Item Tiles

This should show following details per item tile

  • Item Image
  • date when the Item with current design was submitted for the first time

User can click on the item to go to item detail page.
While by clicking on the Image, user is getting into pop up Image Zoom view. The zoomed view can be similar to the one used by Highslide JS (http://highslide.com/) with necessary features being:

  • view of the main Image (the one, that is shown in Standard view);
  • ability to magnify main Image up to 100%;
  • small thumbnails of another images, associated to this Item;
  • button to get to Item details page;
  • magnification of the main Image with mouse, keyboard and touchscreen gestures;
  • navigation across images with mouse, keyboard and touchscreen gestures.

h2. Misc…

  • Image navigation to retain the filtered items by item group and should help navigate through the items filtered.
  • Possibility to check to navigation through next image of same item in horizontal, while navigation through next item image through vertical.

Approach 1

  • Add separate page design for item tiles.
  • It will be linked with the item master.
  • So, user can easily navigate between item list and item tile as convenient.

Approach 2

  • Modifying the item master core and adding the item tile view like currently list and report.
  • User can shift between item list and item tile view.
  • By default Legacy option of Item list will be intact but user can change it to Tile View and it will follow a tile view post that session.

Please, suggest if anything.

1 Like

@gupteshwar how about a generic list view with images?

Now that there is an image_field property in DocType?

@rmehta, Okay. Will evaluate this idea our end and Slava.

We’d like to have proportions of images as close to those in mock-up, as possible. With either of approaches.
Do you think it can be achieved by generic list view?

@rmehta, any suggestion. How to balance between requirement and generic listing.
As generic listing may have restrictions to keep image size small to match with other content size of listing. Otherwise it will look disproportionate.

@gupteshwar keep image size square, see the CSS for user image.

We can help with fine-tuning if you can set it up.

@rmehta, thank you for all the input.

Do you mean actual images or you mean thumbnails should be squared? It’s highly preferable for images to be with typical proportions straight from the camera, while thumbnails of course can be squared and in the initial mock-up they are squared as well.

In general, which amount of items (images) per row you would consider acceptable design-wise?

In v7 I can see following popup on Add Items.


Item Image Popup is rendered from item_selector.html template, but I can’t find anyway to render custom html in listview js to generate custom ui.

From where listview js is rendered?

@rmehta, any suggestion please.

In https://github.com/frappe/frappe/blob/develop/frappe/public/js/frappe/list/listview.js#L194 you will have to set a flag (which can be set via UI) to render alternate template.

2 Likes

@rmehta

Is image in list view work for this feature as per below image?

Or
You need POS like view in list view.

@kolate_sambhaji, I really hope that POS-like view from v7 would suit Frappé team fine. For our case there is barely any use of tiny pics as in your image.

1 Like