[WIP] "Image view" in the Item list

Frappe Framework
4

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

5

Go for it, consistency is good.

1 Like
6

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
7

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.

8

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?

9

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
10

@gupteshwar how about a generic list view with images?

Now that there is an image_field property in DocType?

11

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

12

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?

13

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

14

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

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

15

@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?

16

In v7 I can see following popup on Add Items.

erpnext.png1201×668 60.7 KB

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?

17

@rmehta, any suggestion please.

18

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
19

@rmehta

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

erpnext5.png1300×671 74.9 KB

Or
You need POS like view in list view.

20

@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
21

@rmehta, Looking at current discussion status I would like to understand your view.
How about proceeding with Approach 1 in this scenario?

22

@gupteshwar You are almost there with Approach 2 - are you facing any problem? Its just about the HTML template

Edit: With Apporach 1, you will have to re-create filters, deletion and other features too.

23

@rmehta, agreed and we are confident but image size is the only concern. I
think we may not be able to achieve beyond this size as overall look
disproportionate.

Thanks and Regards,
Gupteshwar Joshi
Cell: +91 997 016 0421 | Off. : (20) 657 0800 | Skype : gupteshwar.joshi