Link to Website: https://dry-inlet-06134.herokuapp.com/gallery.php

DESCRIPTION

My photo gallery will feature images from various tourist locations around the world featuring places that Cornell students could visit during their spring, winter, February, or fall breaks.

TARGET AUDIENCE

My target audience will be Cornell students seeking to make travel plans for one of their breaks. Thus, the image gallery will feature images from various locations Cornell students would want to visit. Assuming they are travelling from Ithaca for breaks (like spring break) that are 10 days, the places featured on my website will be relatively close to the East Coast. Furthermore, they will be places that people within the ages of 18–22 would enjoy visiting, and likely exclude places that are better for family vacations (like amusement parks).

SKETCHES & DESIGN PROCESS

DESIGN PATTERNS

My site will leverage existing design patterns through the symbols/words used to indicate certain actions. For example, to add an image, users can click the “+” button, which is used by platforms such as Instagram and VSCO to add an image. Furthermore, I made the “add an image” function very accessible to users to encourage them to continue using the website. Likewise, I followed the design patterns used by Instagram by making the “delete” feature less prominent (to discourage people from deleting content to use the platform less). For example, users will first need to click on a photo and then on the three dots in the bottom corner of the photo, in order to see the “delete” photo option, in addition to other functions that are not as popular to use (such as edit and copy). While these functions are more hidden because users need to click on several buttons to find such options, they are still very accessible to users, as the three-dot ellipse to open a dropdown menu is a design pattern used by several image gallery platforms such as Instagram and Google Photos. I later decided to display 2 separate options on the web page (add and delete a tag, and delete an image) because the three-dot ellipses did was not clearly a button in my websites design, as it is on Google Photos or Instagram. This is because normally the three dot button appears alongside several other buttons in an icons bar which indicates to users that the three dots are a button they can press to reveal more options. However, on my website, the three-dots icon would have been the only button, and thus, it was not clear that this icon would reveal more options. Consequently, I decided to explicitly display the two options that were in this menu on the image-details page. I also decided to us a trash can icon for the “delete” function on the image details page, to keep with traditional design patterns on sites such as Google Photos. Furthermore, the “filter by tag” dropdown menu mirrors that of standard design patterns for databases (such as Amazon) in which users can choose a general category (or tag) they would like to see the images/results for.

GALLERY STEP-BY-STEP INSTRUCTIONS:

Viewing all images in your gallery:

1. Click on the “Gallery” link in the navigation bar (underneath the heading of every web page — “The Cornell Wanderer”)

2. The page will open directly to the image gallery, where users can see all images in my gallery (seed data and uploaded files)

View all images for a tag:

1. Click on the “Gallery” link in the nav bar to reach gallery.php where all the images will display.

2. Hover over the “filter by tag” icon directly next to the all images heading. Below will reveal a list of all the tags an image can have (Seed data tags). Click on the tag that you would like to see the images for, and then press the “filter” button

3. A “results” heading will appear with the results from your search.

View a single image and all the tags for that image:

1. Click on the “Gallery” web page in the nav bar, the page will open to the image gallery with all images displayed

2. Click on any image to view the image individually, the image will open on a new web page (image-details.php)

3. On image-details.php scroll to the bottom of the page to see the “image tags” header; the tags that apply to the image that the user clicked on will be under the “image tags” heading

How to upload a new image:

1. Click on the “Gallery” web page in the nav bar; the page will open to the image gallery where all images are displayed

2. Next to the all images heading and the “filter by tag” icon there will be a “+” icon; click this icon and a modal will appear.

3. Press the “Browse…” button on this modal. Select a file that you would like to upload from your computer and press “open”

4. Once the file is added such the file name appears next to the “browse” button, press upload file.

5. If the file meets the requirements, the file will be added to the image gallery (it should be the last image on the gallery.php web page), and a successful feedback message will appear.

How to delete an image:

1. From index.php, click on the “Gallery” web page to view all images in the image gallery

2. Click on the image you want to delete; this will take you to image-details.php where you can see a larger version of the image

3. Click on the trash can icon next to the “image details” heading on the page.

4. A modal will open confirming that you want to delete the image you clicked on. Click “delete,” and a feedback message will indicate that the image was successfully deleted.

How to view all tags at once:

1. From index.php, click on the “Gallery” web page in the nav bar where all images in the image gallery will display.

2. Hover over the black “filter by tag” button directly under the nav bar. The radio buttons below will reveal a list of all the tags.

How to add a tag to an existing image:

1. From index.php, click on the “Gallery” web page to view the full photo gallery with all the images displayed.

2. Click on the image you would like to add a tag to. The image will open on a new web page (image-details.php) where the existing tags and a larger picture of the image will be displayed.

3. Click on the “add & delete tags” button to the right of the “image details” heading.

4. A modal will appear with a text box where you can type in the tag you want to add (it can be an existing tag that isn’t already applied to that image or a new tag).

5. Click the button that says “add,” and you will see the new tag appear under the “image tags” heading at the bottom of image-details.php. A feedback message will also indicate that the tag has successfully been added.

How to remove a tag from an existing image:

1. From index.php, click on “gallery” in the nav bar to be taken to the image gallery where all the images are displayed.

2. Click on the image that you would like to add the tag to; this will take you to image-details.php where you can see a larger version of the image you clicked on, as well as the tags that apply to it.

3. Click on the “add & delete tags” button to the left of the “image details heading.” This will reveal a modal with several options.

4. There will be a form element that says delete a tag; select the tag you would like to delete from the dropdown menu, and then press the “delete button.” The tag will no longer appear on image-details under the “image tags” heading, and a successfully feedback message will display.

REFLECTION

I really enjoyed the new skills I learned while creating The Cornell Wanderer because it taught me many skills necessary for creating a practical website that engages users. I was especially glad to have learned how to allow users to upload files in this project, because that allows me to create many new types of websites (social media platforms, image galleries, educational websites like Canvas or Blackboard, etc.). I also was really excited about figuring out how to sort information in a database based on categories (or the image tags, in this case) because that is something necessary for all large databases (like amazon and other online shopping sites). Lastly, I think this experience working with an image gallery/making an image gallery out of images in a database is really helpful because image galleries are necessary/useful in most websites (blogs, college websites, hotel websites, shopping catalogs, ticket sellers, etc.). Image galleries can enhance any website by providing users with multiple visual manifestations of the actual content of the website.

This project also really revealed to me how much I’ve learned since starting this course. Before this course, I had minimal programming experience. And before the start of this school year, I had never coded before. During this project I really noticed how I started thinking like a programmer and using my “programmer’s toolbox” to write and debug my code. I feel like this project really helped me understand the connections between different parts of the code and how to use html, php, and sql queries to create dynamic websites that users can interact with. I really enjoyed being able to see the final product of this website, and realize how much I’ve improved my coding capabilities since the start of this school year. It also built my confidence for writing code and creating websites because of how I was problem-solving more on my own. I am really excited to use this confidence and the skills I learned to create more dynamic website which engage users and serve their needs.