Notice of live files: In production Prelude and even in staging Prelude WE ARE WORKING WITH LIVE FILES. IF YOU DELETE THEM (by clicking the Empty Trash button) FROM THE PRELUDE PICTURES Production or Staging interfaces YOU ARE DELETING THEM FROM THE ONLY S3 THAT WE HAVE. See the Prelude – Trash article for quick details.
Notice of NOT live data: When clicking Save & Publish in staging Prelude that DATA IS ONLY SENT TO STAGING SITES. So saving and publishing in staging Prelude WILL NOT PUBLISH TO ANY PRODUCTION SITE OR APP. As you can see in the video below we are working with staging Prelude and staging villadirect.com.
Download Prelude Pictures instructional video.
Prelude – Pictures: Overview and Usage
Learn more than you wanted to know about Pictures in Prelude
Prelude Pictures is used to add picture files and data that is then used by many applications, websites, and mobile apps. It is important to understand the system.
Overview
This video will provide an in depth look at Prelude Pictures. It will include an overview of the components that constitute the system. It will include an overview of the processes of the system both behind the scenes in the program and the user interface. Along with the explanation of the process we will demonstrate usage of the system.
Understanding the many components of Prelude Pictures will help understand how the system is architected and what happens when and where. We will cover the items in this list.
Let’s start with the data.
The picture data is the definition or metadata for each picture. That data is entered by way of the “Edit media data” popup screen within the Prelude Pictures application.
The data
The data is stored in the Prelude database. This same data is used by the many consumers such as the various websites, mobile apps, and Prelude itself. The data is not the actual picture file. The data includes a reference to the picture files by name. The name of the picture file is stored in the database in the data record for the specific image file along with all the other meta data. When the data is published using the Save & Publish button, that data is copied to the location that live websites and apps use to know what images to show for the property and what descriptions to use, etc.
The files
The data is the information about the pictures which includes a reference to an actual picture file. The files are the picture files themselves. These are the items, the files, that are located in AWS S3.
The producers
The producers are the applications that are used to produce the data and/or upload the image files. In the past we have used S3 directly to add the photos. That is no longer necessary. The files can now be uploaded into S3 from right within Prelude. More on that later.
VDM supports the banner image for locations. The banner image file itself can be uploaded from within Prelude or directly to S3 when needed. This location/community banner image will be added to Prelude Pictures in the future at which point it will no longer be necessary to use VDM for this purpose.
The consumers
The consumers are the sites, applications, and mobile apps that use the data and files provided by Prelude Pictures. These include the items on this list as well as others. Basically any site, application, or mobile app that displays property photos or property photo data will use the data from Prelude Pictures.
The database data, the records about the property’s images, is provided to these consumers usually via our API called maestro or maestro web services (maestroWS).
Often the property data utilized by these sites is cached locally for quicker response times. That does have some bearing on how Prelude Pictures might be used by the Prelude user. This caching and data concern is addressed fully later in this presentation.
Amazon Web Services (AWS)
- S3 is used for storage and for triggering certain functions such as optimization and life-cycle events. S3 is where the assets files live. It can be thought of as a hard drive in the cloud.
- Lambda is used for optimization, on-demand image sizing and branding, etc. Lambda is a platform for serverless functions.
- Cloudfront is used for delivery of certain assets. Cloudfront is a caching system with many world wide regions making asset delivery quicker and more efficient than self-hosting.
- Prelude Pictures uses all of these AWS assets together within the system. In addition to S3, cloudfront, and Lambda we also use AWS’ EC2 service which provides virtual servers. Prelude is served from an EC2 instance.
How it all works
Now that we have covered the various components of the system, we can shift gears and get down to how the process all works. We will cover the items on this list. (Read items).
Uploading
In order to have files to work with we need to upload them. Prelude Pictures provides three options for uploading.
Upload options
We click the add images link and come to the image upload page. We can select from three options currently. They include single file, zip file, and multi file.
Once the upload is completed the processing begins.
Processing files to S3
When a file, or files, are uploaded to Prelude Pictures they are first added to the Prelude server. They are processed there as necessary. For example, a zip file cannot be unzipped in S3 so it is unzipped on the Prelude server. Then the files are transferred to S3. This is all done automatically as the images are uploaded. As the files land in S3 they are processed much further.
Processing files on S3
When a file is uploaded to S3 many things happen with it. We have triggers set up that when a new object is added to the bucket certain processes will fire off in a certain order. Using the tools we have created for our image server, the files are first backed up, then the files are optimized via the third party tool called TinyPNG and TinyJPG. These optimized files replace the originals that were uploaded with optimized versions of the same image files. In order to convey this notion to the Prelude end user, we offer messages as the files are uploaded.
It is important to note that this processes of copying, optimizing, and sizing can take a bit of time and they are done asynchronously. We do not wait for them to complete before we reload the Pictures page. Often that will mean that the files will appear as broken when the Pictures page returns after upload. The reason that these files appear broken is because they are broken until the multiple processes complete. To see the files once they are complete the page can be reloaded by placing your cursor in the address bar and hitting enter on your keyboard. If you hit reload you may be prompted to resubmit the upload form. You probably do not want to do that, though it won’t hurt anything if you do.