Magento Adobe Stock Integration, 11 Aug 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Adobe Stock Integration Pulbic Meeting, 11th August 2020

Description

Demo of the 2.1.0 scope functionality

A

Okay, so we'll start our demo and yeah I'll share my screen first and just show you the what what exactly we are going to show today. So this is uh our stories. That's adobe stock integration, uh repository issues, milestone, 210 uh story label.

A

Basically, will will display stories in bulks because some of them are related together, like user deletes images in bulk and user sees warning when deleting an image when it's used on storefront that will be displayed together.

A

uh I guess I will go through all stories and then we'll switch to non-stop demonstration.

A

Then we are going to show the metadata the ability to extract the metadata when image is uploaded or downloaded from adobe stock and add the information from metadata to image details as well as save the metadata to the image when the details are edited. In addition to saving this information database, then we are going to show the feature of actually editing the image details that are stored in the in both database and image file as a metadata and finally, uh we're going to show the filters that have been added. That's.

A

The first of all they used in information that is displayed on view, details panel of the image and the filters that allow to filter the images in the media gallery grid based on where the image is used.

A

A

And yeah the separate story ability to filter the images that are not used anywhere.

A

That's all for overview and I think we'll start with the demo by nazar, who is the, I would say, the biggest contributor to the domestic integration project and as well a main person to demo stories today, because he'll just show three bulks of the stories. Nazar.

B

Oh yeah, hello, everyone again, so let me share my screen.

B

uh Are you able.

A

B

Yes, so I will start with story with magento extract images metadata from file. So now, when we upload image the magento trying to extract the image metadata and they go over all available metadata extractors for now it supports xmp and iptc metadata standard. So it's like trying to to first extract the xmp metadata. Is the xmp metadata not available it's trying to go over next uh extractor of, in our case it's iptc?

B

So if the aptc data will be available, so magento will show this when we upload images. For example, we have uh images that we are using for mftfts to cover this behavior. We are supporting uh all available formats where we can store the metadata as uh png, jpg and gif. For example, uh that's the png image and it's contained like metadata in xmp and iptc. So when we are uploading this image for now it's displaying already title extracted from metadata and when we click the view details, we can observe the metadata.

B

This is description that was parsing parsed from the metadata. Also keywords: it's called stacks. There is two magento media gallery metadata and basically the title of the image. So the same behavior will be to for a gif format as well. It also contains a metadata, so we also can see that title is available for metadata.

B

For example, when we upload an image that does not contain metadata, for example, this one machine to jpeg so yeah, that's uh just file name without metadata, because this image completely empty and does not contain any metadata, and when we go to the view details, there is also only file name and this uh details. That's available for all images like this hey size and data date, modification and stuff like that.

B

So this is for the magento extract metadata, so basically we're just trying to extract all available metadata such as image contain and the second one is related to that user. Can edit image metadata and write new metadata if the image does not contain like any metadata, for example like this one, um let's try to edit in edit metadata from png file.

B

That's already we have the metadata, so we are click edit. uh We can edit uh title this uh title description and text as uh metadata can contain like a lot of information like copyright and other stuff, but we are supporting only the the three one title, description and keyword.

B

So we can add some new description.

B

And change the title, for example, and, let's add some new keyword.

B

So yeah this uh uh the favorite form uh implemented by the ui select. So we can like remove or add some new cables and when we click, save magento will save all this data to the database and choose and write the same data to the uh image file, and it will be right into the all supported formats like xmp, iptc and other available formats.

B

So we can click save and for now it shows a new title. If we click with details, it will be the same like we have added new keyboard which engines changes the title of the image and adds a new description uh so for for magento sites. It's all information displayed in from database, so how we can check if the metadata was written, we can upload the same image from the pub media and then magento will extract the new the new metadata. So we can click upload, go to the pub media and select the same png.

B

It will adjust the prefix png. One.

B

So, as you can see, the newly added metadata now displayed for the new image and if you play click view details, we can see that it's a brand new image with prefix one and it contains like our added metadata from the magento site.

B

So the same behavior will be for jpeg images as well, gif and png and for our supported formats as a xmp iptc.

B

Yeah, basically, that will be how or the user can edit metadata in media gallery and the next one uh cool story is that for now a new media gallery, user user can delete images in bulk and that's very cool feature. So uh we have the button house delete images.

B

So, basically, for now, uh new media gallery have chose two states. This one is the foul state. So we can. We have a lot of action like see, dots view, details edit and delete images and uh all other stuff like upload, create folder, but when we click the delete images button, it switch to the mass action mode view. So for now we no longer have ability to click, three dots and other buttons to upload to create folder functionality.

B

We have only checkboxes and we can select images that we want to delete so it by clicking the image. What you want, you can click and there is you have the account of selected images that will be deleted so uh yeah. When we press the, then we have the two buttons, that's related to the mass action mode. The sensor console uh by clicking on the this button.

B

We will terminate my section mode like disable and by clicking the delete selected, we're just going to delete all the selected images and we will have the confirmation uh by the way. Yes, that that's another story, that users see learning when the latin images uh use a use it on stock front.

B

So it says that selected assets are used in the content like in one categories, one products, one blocks and one categories, and it's a are you sure you want to delete these images and when we pre press to delete it say that how much assets was deleted and it immediately switched to the default mode, as there is no selected images.

B

So here by the way that that was the second story. When we is farming message for deleting images that were very using and if, for example, we will switch to the mass action mode and there is no any image of style like that many person selected. It says you need to select at least one image, oh yeah, and when we please uh cancel it switch to the default mod of the media gallery and you can navigate or discover any other actions. In the media gallery and yeah, that's it yeah.

C

Thank you this. This is like really amazing uh addition to the media gallery, um I'm so pleased to see that we eventually can manage images in bulk, at least deleting them, and it should work very smoothly with like filtering images, finding some images by filtering and then deleting those that are not needed. You know in combination.

C

uh This is gonna, be a really powerful feature. There was a bug with uh like entering this mode of deleting images like I try to like select images, delete them and then cancel uh the deletion. There was no possibility to kind of start over.

C

Is it still there.

B

No, it was fixed, I have completely refactors. We have a component mass action view which responsible to uh our view stuff that we are seeing when we switched and yeah the first behavior. It was that I uh just uh changed the behavior for this button delete images I just cloned and then attached another oven, but for now it's uh completely different buttons and this button just remove it and the mass action mode inserts the new buttons. So this bug will work.

C

B

In the future, yeah.

C

Awesome yeah the only thing that I noticed, that kind of not quite aligned with the mock-ups is the use case of adding new keywords so like in the edit mode. I understand that by design there should be a field where you can like in a tag tags field, you should be able to type new new keyword, and, after, like um after pressing after the like comma separate separating with comma, there will be a chip.

C

At least this is. uh There is no separate field for new keywords on the mockups, so I just wonder if it wasn't possible to implement everything in one field like what was the reason that we have separate field for new keywords.

C

B

C

It it's kind of it's a bit ambiguous because we have the main field called tags and like the filled under suggested new keywords, so we need to. We need to stick to one terminology. At least this is like the minimum. We can do well.

A

uh Yeah actually on the mock-ups, we had the tax field and add new tag button and that I suppose meant that when you click on the attack button, the field appears where you can add the stack, because otherwise I don't know why we need the button. But.

A

Yeah, so to avoid additional step, uh I decided to display the field uh right next to the button straight away, so you don't need to perform correction field.

C

Is not editable? Why why I can't type directly into that field, because I assume that was. That was the intention that you kind of.

B

um I think that.

A

Yes, that's something that still.

A

uh Maybe that that would be a good improvement. We used the existing ui select component for displaying keywords, so we didn't introduce a new component to magento, for that gives ability to type directly into the field.

A

C

Can you add a new tag now yeah.

B

B

And it will appear there and you can.

D

B

Clicking through there, it's only my issue with small icons, so it's too much.

C

Yeah I mean it's functional, it's not a big deal just a bit unusual.

B

The main reason is that ui solid component just not have this ability to add the new likes directly. Okay,.

C

Yeah yeah, that's not a big deal uh just can we update the placeholder in the input, so it's tags add new tag, new tag, not green.

B

Keyword and yeah, if someone have any questions, so feel free to ask.

C

No, I mean this is this is awesome, it's just like so nice to see media gallery uh turning into some really functional functional tools.

A

Okay, great thank you nazar and the next. uh The next function functionality we are going to display to demo is used in.

A

Is the information where the images is used in and related filters? uh Elena.

E

Yes, well, I will start, um I will not go through stories. I just want to show the kind of whole experience that we are going to achieve by implementing this functionality.

E

Let's assume I'm a merchant and I have different categories and I'm selling cars. I have root category cars and some child categories like white red green.

E

Let's see how I can manage my media gallery assets and use them, filter them and use for.

E

For my content management, let's just find yellow car and create new category.

E

Let's choose something not so fancy: I will save the preview okay, um I just saved this yellow car and let's go and create a category category for for yellow cars, because, let's add this image on the media gallery too, um to my category: let's save this: uh let's go and create page for the yellow color as well.

E

I will create a new page.

E

I will add the same image to this page.

E

And I will save this page now. I want to keep my media gallery up to date. I want to be able to manage my my assets and, if I'll go to this image details, I will see that my yellow car is used in one category and one page. I can even follow this link and see the filters grid where this asset is being used.

E

I can see that this category grid is just filtered by this asset and I can like quickly navigate go to edit page and do like whatever I want with this category. At the same.

C

Time, if, if you remove that filter, what will happen.

E

C

E

C

Page no on a category page: this is what I'm curious. It's.

E

The same it works like the same for pages. If I'll remove this filter, it will show just all of the categories that they have.

C

All of the images that are used in cave works. Yes, yes, yes,.

E

Actually, I love the computers that I have.

C

All of the categories, even those uh they don't use any images.

E

I don't have such categories, unfortunately to show it. You can double check that.

A

Yes, so they're, just a category grid the same principle as any other greeted magenta like products displays on all products, so in scope of media gallery we introduced the categories grid that wasn't present in magento before we know that we can filter categories on that grid.

C

And image, I'm just like uh trying to understand the structure of that grid, the image uh column, it's the basically not the image, it's a it's a content right. What is that? Oh? No! It's a category image, yeah, okay,.

A

Yeah, so the images filter not will not exactly match the image displayed on the degree. The image that is displayed on the grid is a category image, but the asset can be actually used in the description as well.

C

Exactly that's what I'm asking like what, if the asset is in the category content.

A

Yeah but yes, you can see the asset image in the filter in the asset filter. That's the only.

C

Part I'll see it anyway, I'm just trying to understand, if I add an image with the category description, uh will I still see that category in the filters out by that image.

A

E

Okay, I assume we can proceed.

C

Can you add, like new image that is not used anywhere, not used anywhere yeah.

E

I'm just transitioning: um I can go first and show this functionality how to filter and see images that are not used anywhere and then add such image to category uh description.

E

Okay, so in in addition to that, we added filtering to the media gallery. We can, we can filter assets by categories where there are used. For example, I can filter images that I used for yellow cars category I can.

E

I can show images that are not used anywhere and this one blue one. I can use this car in for the category description I'll do that and additional filter that was added is show image duplicates by applying it. We will see that.

E

Two images that have different names but are the same based on specific uh algorithm. We we are able to see that they are duplicated and we can like see their uh full description and I now find out. Maybe some of them can be deleted.

E

Okay, let's go back to our categories and try to add.

E

To add image that are not used image that is not used anywhere to the description.

E

I assume that that was this car selected, okay, save and now you want to see.

C

Let's go back to the media gallery and filter.

E

Okay, filter by this yellow, yellow pages go to this blue car.

C

Image details: okay, I see what you mean yeah.

E

Let's use the one categories: it's still uh image uh default default image from content, yeah right here, yeah, okay, because we're not, but we are filtering basically categories, not assets here us as we can filter.

C

What is in menu column,.

A

If the category is present in navigation menu,.

C

C

D

C

Have like anything there, it's just like it's not clear what it means like if it's, because it's.

E

Not there or if you yet.

C

ah So, like okay, yeah.

A

I guess we need to put no.

C

Explicit value yeah exactly yeah, because it's either yes or no right. It's.

C

There is no third option. So it's kind of ambiguous to see the empty.

E

Yeah, that's that's good point, um yeah. Just a few more words about filtering. We can filter by like categories products pages blogs we can filter by store views, uh show specific images that are used in only categories blocks were not used anywhere, enabled and disabled. Actually, everything is covered.

E

Through our merch docs and you can find more information over there can.

C

You send a link to the documentation section.

E

Sure I'll I'll send you actually pull requests because it's not released yet it will be published and released once magenta 2.4.1 will be released.

C

Yeah and if it's possible update uh the cloud instance with the recent changes, because I understand this is like the final changes right.

A

Well, we are still.

C

A

On bug fix on some bug, fixes and probably.

D

Will include those changes.

A

That you suggested today as well, but as for uh functionality, the main functionality features yes, uh yeah.

C

A

C

Yeah, that's why I just want to kind of go through, uh go through it and make sure like from from my side. It makes sense. Maybe there will be some additional comments, so I want to check before you have still have time to fix some of the issues. Okay. Okay.

C

A

C

It's awesome, I'm so happy that we managed to deliver such significant results. Well done.

C

A

Yeah thanks helena as well. Well nicely it even showed that show duplicates features. It wasn't included in this stories list that I showed but yeah, that's one more improvement.

C

C

E

That was pretty much it from me.

A

Any questions comments on the functionality from anybody.

F

No, but I want that surfboard in the background. I know it's a fake backpack, but I want that magento surfboard.

C

That room doesn't exist anymore. It's a history.

F

C

Yeah, it's a key of office.

F

Oh, was it oh, I I knew that. I knew that I knew a couple of the uh account managers out of that office. um Yeah.

C

Yeah, it's part of the history tergis has a travel machine. He travels into the past.

A

C

A

D

Yeah in 2015 what year it is.

F

Hey, I did want to tell you that the ui that you were kind of not complaining but wondering on that's actually native the you're there's no native way on a multi-select to enter directly. You always have to click on it, and then it usually pops up a modal. So the fact that it's below there uh with the input box is actually more convenient than having a modal pop-up.

F

C

For sure model pop-up, I think I think we have that input box uh on adding categories for product assignment uh like on top of there like drop down, so it's kind of embedded, but if it's right underneath it's also it it also works. I mean it's just a bit unusual to me.

F

Yeah, I just I agree.

C

F

With the uh the placeholder name needs to be changed, I I that was the first thing I noticed too so.

C

Yeah yeah, it's just misalignment, but other than that I mean it works. It's it's clear yeah. So this is the most important okay.

A

C

You guys it was yeah. Sorry.

A

Yes yeah. I just want to know that categories are using exactly the same component. The categories on product page.

C

But yeah so just update the cloud instance and send me a link where I can review the merchant documentation. uh I also um create a demo like, if shoot, a video out of this functionality. That's why I need also to need to go through their use cases myself. So I can record the demo.

C

So we can use that in release.

C

A

Okay, I will do.

C

Thank you guys have a good rest of your day. Then.

A

E

A

Everybody have a nice day nice day, bye-bye.