#231 AVO Directory. Attachments. Screenshot automation

Hello. So let's continue building a directory with Ava. Now, previously we created the listings and to a listing. The only thing you can manually add is A URL, but we have this, uh, action. So I will select all the listings and action to update metadata from A URL. So I'm going to click this, uh, action. I'm going to run it, and they're going to actually visit all these URLs and, uh, extract the metadata from the HTML. So now if I refresh it, wow, we have the titles, the descriptions, the logos, and if we open some of them, we even have, uh, uh, images, uh, like the open graph images. So the social preview images attached looks really nice. But let's have a look at some other listings here. For example, we tried posting this website. We found the title and description, but we did not find the favicon for some reason, and we didn't find the, an attached open graph image. So let's say we are going to allow, allow the admin of our directory to manually upload the, the cover image. For example, here we have another directory that I was taken inspiration from. And you see when you go to any listing inside this direct directory, it has, uh, a screenshot or an image, uh, uh, like a visual of, uh, this, uh, listing. So, uh, let's add the attachments. We're going to add active storage attachments. So let's add the image pro in gem. I will enable it and I will run this commands active storage install and, uh, rails to be migrate. Okay. And now we are going to say that our listing will have one attached to, uh, cover image. So listing rb, uh, has one attached cover image. Let's put it next to the other associations. Okay. And I think net bundle of the Theron bundle after adding, uh, the gem, uh, image processing. Okay, so a listen has one attached to cover image. And, uh, inside VO we need the possibility to attach an image. Now, AWA has this, uh, file field. So let's, uh, add this kind of field to our listing resource. Going to, uh, app, uh, vo resources listing here will have field, uh, cover image as file is image through. And, uh, let's refresh. 'cause we, we have this cover image field. I will go to edit and we have this, uh, input for the cover image. Okay, let's try uploading an image. Uh, we can now actually select any file. Maybe there is an option. Yeah, accept image. So I will say accept image. Let's refresh and try again. You see now only the images are selectable. Let's select one of these, uh, images. Save. Okay, you see we have the image attached. Now we have the, uh, title of the image also displayed maybe for our users if we don't need to display the titles. So I will also add the display file name as false. Okay. Now we can manually attach an image, but you see at the moment, uh, for this listing, uh, we don't have, uh, this image displayed as the cover image. We have, uh, a red circle. Now we have it in the logic for self cover photo. This is the cover photo, and we have either the open draft image or this placeholder icon. So we will say, uh, if record dot cover image attached, we'll have, uh, record, cover image. Uh, else we'll have that other logic plane. Let's refresh. Okay, now we have the cover image. Let's, uh, have the same kind of logic here on the grid view cover, URL. 'cause now if you go to the listings, you see here we have, uh, the newly uploaded file, but here we don't have it. And again, they'll have the same logic here and here. So let's move it to our model. I will, uh, go with this all and go to our listing model. And I will say, uh, dev cover image for display. I'll put in this logic. Uh, let's beautify it. I will have, uh, return cover image if it is attached. Otherwise, play the other logic. Now we don't have record defined here. It is kind of self cover image and the self payload. And now going back to avo, I can just, uh, replace all this it cover image for display here and in the grid view. So yeah, it is record dot. Okay, refreshing and wonderful. So see we have three different conditions, either the attached file, uh, this logic or the, uh, open graph file, this logic. Or if we don't have the open graph file or the image attached, we have the red circle. Looks good. Now let's save our changes. So, um, attach cover image, uh, to list them. Okay. Now, uh, we have two different conditions, but what if, uh, if we don't want to force our admins to manually upload the images, let's make it more programmatic. Here. You see this tool, they take a screenshot. I don't think that the admin manually took a screenshot and, uh, uploaded, uploaded it. Uh, I think it was done programmatically. Now we can do it with, uh, uh, rum. So I think in, uh, episode 162, I talked about the rum headless browser where we can visit a UR L and take a screenshot and attach it to, uh, record. Now going to the blog post to see how I actually did it. Let's add the G therum to our, uh, application. Now I will create a job rails generated job, uh, uh, URL screenshot for a source or, uh, yeah, resource screenshot. Resource your l screenshot or record your L screenshot. Okay, let's open our new created job. It is going to be performed based on a record. And, uh, let's see how I did it here. So it'll have u lals record, u rl, uh, then have, have browser with a few d different options to have some timeout. Uh, we're going to visit the URL sleep a bit to make sure that everything renders. Uh, and now we're not going to browse pdf DF, we're going to, to browse screenshot. Uh, we need to have TMP filed defined. So we will have, uh, uh, TMP equals them. File new. Uh, okay. And finally, we're going to attach, uh, this, uh, screenshot to our, uh, record. Record. Do, uh, cover image attach io TMP path file name. Uh, let's make it Modena record. Uh, ID screenshot and let's save it in JPG. So it phase less and quote will be 40. And, uh, we are going to make it, uh, we're going to resize the browser. I think there is an option here. No, I don't see it. But here we can do browse ultra size And we will resize it to the standard open graph size with uh, thousand 200 high 630. We will visit the UL. Take a screenshot. Uh, let's see if, uh, this works. This might actually work. Yeah, also, I need to add the insurer browser fit. Okay, now let's take a record code or a listing. Okay, here we have a listing. Let's, uh, run the job on this listing. So record url, screenshot, job, perform now on the listing. Okay, undefined method. R re, yeah, ize. Let's reload. Try again. Okay, now it's say listing. Do cover image attached. Yeah, we have attached to cover image. Let's have a look at this listing in our application. I think it was need draw kit. Okay, so here we have attached the screenshot of the whole website. Now we don't need the screenshot of the full website. So going back to our job, I will not say full through. Okay, so now we can create screenshots programmatically. We need to add an action, I think, as we did for passing the website. So let's create a new other action. Uh, it'll have the same name as here, record url, screenshot, um, rails generate vo action record URL screenshot. Uh, let's open vo vo actions. And here we will, uh, run this job for all the selected records. And finally, we need to enable this action on our listing resource. So going back to our AVO resources, here we have our listings action, avo actions record your L screenshot. Okay, let's refresh. So now we have two action. Let's now try running this action. Okay, look, there is an attachment happening, so I will refresh. And Wonderful. We have, uh, a screenshot of the website. Looks great.