Creating your first metapage
Once you’ve entered the metapage.io site and created an account you are now ready to create your first metapage. Let’s start with a simple example to upload and display an image.
Step 1: Create a new metapage by clicking on the “+ New” button at the top right of the metaframes homepage.
Step 2: Give your new metapage a name. This can be whatever you want. We will call it “My first metapage”
Step 3: After you first create the new metapage it will look like this.
Step 4: In order to upload and view files we will use the “Files” metaframe. To add this, first click on the “+ Add” button, then select “Files” from the dropdown.
Step 5: The files metaframe should now appear in your metapage. You can resize the metaframe by dragging the bottom right corner. There is also a menu that appears if you hover over the top left side of the metaframe. You can use this to reposition the metaframe by dragging and to access other options. Try resizing and repositioning the metaframe using these features now.
Step 6: Next, we will add the “Show Image” metaframe to view the image that we will upload. To do this, type “show image” into the search bar. Now click the “+ Add” button on the bottom right corner of the “Show Image” metaframe result, and it will be added to your metapage.
Step 7: We have now added all the metaframes we wanted to add to our metapage. Please to resize and reposition the metaframes so they are side-by-side in the metapage.
Step 8: Let’s now upload an image to view using the “Files” metaframe. Click the upload button to upload your image of choice. If you would like, you can download the image example we use here by clicking on the link below.
Step 9: You should now see you image displayed in the “Files” metaframe, but it’s not yet displayed in the “Show Image” metaframe because we haven’t yet created a data connection. To do this, Click on the “Data Flow” button in the Files metaframe hover menu to open the data connections editor. Make sure “files” is in green and “Show Image” is orange in the boxes on the top. If not, click on “Show Image” to turn it orange.
Step 10: Let’s connect our metaframes! To do this just click on “Connect All”. This will send all outputs of files to the inputs of Show Image. (Note: The ** you see is a bash wildcard which specifies which files to pass. In this case, all of them. For more information about creating connections, see the page linked below.)
Click “Save” to save the changes and exit the connections editor.
Step 11: At this point you may already see the image displayed. However, to ensure the correct file is sent we will change the display mode to Selector. To do this, click on the gear icon at the top right of the files metaframe then select “Selector” under the Display mode.
Step 12: Now use the “Select file” dropdown to select your image file.
Step 13: Your selected image will now appear in the “Show Image” metaframe. Congratulations on creating your first functional metapage!!
We’ve covered important features of metapages here including how to create a new metapage, how to add metaframes and create data connections between them. In the next walkthrough we will run our first code in a metapage by running python with pyodide.