Skip to content

Instantly share code, notes, and snippets.

@staycreativedesign

staycreativedesign/readme.md

Created September 2, 2017 15:24
Show Gist options
  • Save staycreativedesign/4cb60853069866046f2194fde762998b to your computer and use it in GitHub Desktop.
Save staycreativedesign/4cb60853069866046f2194fde762998b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
readme.md

Mandatory Regular Maintenance

  1. You must perform monthly security updates of your cloud66 AWS servers in order to avoid being hacked:
  2. The webserver and database server are both managed via cloud66 and hosted on AWS EC2. I have enabled daily automatic backups via cloud66, but you will need to manually verify that the backups are working and useable on a regular basis (every 3 months, for example.)
    • (2hr/3mo)
  3. Your photos are being saved on Amazon S3; the "production" bucket is the important one. I've enabled versioning on it to avoid a disaster if things are accidentally deleted, but the entire bucket should be manually backed up every 3 months as well.
    • (1hr/3mo)
  4. It's a very good idea to copy the S3 (photo) and Cloud66 (Postgres Database) backups to your home computer every month, so that if Cloud66 or Amazon have trouble you still have a recent copy of your site.
    • (1hr/mo)
  5. Basic website uptime monitoring is recommended (to get alerts if the site goes completely offline)
    • ($10/mo)

Todo & Scope

See TODO.rdoc

Dependencies

  • Ruby 2.2.4 (see .versions.conf and rvm)
  • Gems from gemfile (see bundler)
  • Perl (for mini_exiftool_vendored)
  • Ubuntu Packages:
    • sudo apt-get install libgmp3-dev postgresql-contrib imagemagick

Environment Variables

Copy env.dist to .env and edit as desired, for development/testing. Input into cloud66's Environment Variables GUI for staging/production. Stored in Will Bradley's LastPass under "DHPA Cloud66" for easy copy-pasting.

  • Production/staging only
    • SECRET_KEY_BASE
      • Long random string for encryption purposes
    • SMTP_HOSTNAME=www.dhpa.com
      • Needed to install an smtp server locally (see .cloud66/smtpinstall.sh)
  • All Environments
    • RAILS_SERVE_STATIC_FILES
      • 0 for dev/test, 1 for staging/prod
    • AWS_ACCESS_KEY
      • Access Key of an AWS user with S3 Full Access
    • AWS_SECRET_ACCESS_KEY
      • Secret Key of an AWS user with S3 Full Access
    • AWS_REFILE_BUCKET
      • S3 bucket name for image uploads (i.e. dhpa-photos-development for dev, dhpa-photos-staging for staging, dhpa-photos-production for production)
    • STRIPE_PUBLISHABLE_KEY
      • Public Stripe key (either test keys for test/dev/staging, or live keys for production)
    • STRIPE_SECRET_KEY
      • Secret Stripe key (either test keys for test/dev/staging, or live keys for production)

Configuration

  • Ensure there are recent and usable S3 and Postgres backups/snapshots/recovery before running any of these commands on production!
  • Use postgres for all environments. Create the database names according to database.yml
  • Use AWS S3 for image uploads
    • Create an IAM user and credentials, with normal "S3 Full Access" permissions.
    • In the us-east-1 region (Virginia), create test, dev, staging, and production buckets according to the AWS_REFILE_BUCKET environment variable. Do not use production buckets outside of the production webserver.

In Test/Dev

  • To clear the database and run the create/migrate/seed commands, run rake db:setup, OR each of the below steps manually:
    • rake db:create && rake db:migrate for database initialization.
    • See db/seeds.rb for default usernames and rake db:seed to insert these defaults into the db.

In Staging/Production

  • Use cloud66 for staging/production deployment (in the us-east-1 region; use t2.medium for production server size and t2.small for staging.)
    • The scripts in the .cloud66 folder should take care of most stuff.
  • Manually ensure that large file uploads are enabled:
    1. Go to your cloud66 stack, click the web server group page (eg. Rails servers) and click CONFIGURE NGINX at the top right.
    2. Edit the Nginx configuration to: client_max_body_size 300m; IN BOTH THE HTTP AND SERVER SECTIONS OF THE CONFIG FILE.
  • TODO: CDN for faster image serving

Testing

No tests created yet. Please create tests, tests are good.

Documentation

Run rake doc:app to generate HTML documentation from classes.

Running

Run rails s for development. Cloud66 scripts are already present for staging/production.

Contributors

Raw
todo.rdoc

Goal ↑

  • A photography website similar to bfa.com, having photographs available for purchase as well as other informational (static) pages.

TODO List ↑

  1. (4hr) When a photo has names which are missing (indicated by “No ID”), visitors should be able to click a “Whats my Name” link under a photo to provide the Admin the missing name - like www.patrickmcmullan.com/whoami/index.aspx

    • Would Admin be able to edit the name right there and have the system auto-update the corresponding photo?

      • Unknown, depends on how the implementation goes.

  2. (1hr) Admin should be able to change the Price for all photos in each event

    • Quote is for a simple batch update, not an override; the pricing would still be per-image, but all images in an event would get set to the same price. An actual event-level override of the pricing would take more time.

  3. Assistant Photographers, Editors, Staff, etc. should only be able to:

    • Access the Events Tab (not Orders, Users, Settings)

    • Add or Delete an Event.

    • View and Edit the last 3-5 Events.

    • (1hr) for this section

    1. Admin can overwrite everything that the Assistant Photographers, Editors, Staff, do on the Website. (Unlock Passwords, adjust prices back to Default, etc.)

      • (0.5hr) for this section

      • Optional: when admin overwrites something, optionally allow the Admin to lock it so others can’t change it back.

        • (3hr) for this optional part

  4. (0.5hr) The Logo on the Upper Left Corner has to be replaced (attached), or add this text manually “David Heischrek Photo Agency” below DHPA.com in the font: Dosis, medium, sharp.

    • Files in doc/design

  5. (0.75hr) Add the Name to the Events that are rotating on the Top Feature Slide (same as BFA.com). Then take out the Welcome to DHPA.com.

  6. (4hr) Re-add physical print options to checkout: selecting Sizes, Paper, and custom/default pricing of Prints, etc. Size options: 5x7, 8x10, 11x14, 16x20. Paper options: Luster & Deep Matte.

    • Pricing matrix:

“‘ 4x6 = $ TBD 5x7 = $ TBD 8x10 = $ TBD 11x14 = $ TBD 16x20 = $ TBD “`

  1. Add a Blog page (if html is provided)

    • Question: Unless you have a ~$2500 creation and ~$1000/year maintenance budget, I suggest hiring someone to create a custom Wordpress or Squarespace or Wix theme and simply linking back and forth between that site (i.e. blog.dhpa.com) and your main site. A blog engine is a totally different piece of software and a nearly-infinite amount of work.

  2. (2hr) After 1-5 minutes of visiting the website, a Pop-Up Box should appear asking visitors for their Email address

  3. (0.5hr) Fix the Favicon. The way it looks now nobody can read what is says. Take out the .com in DHPA, and just put DHPA. And if DHPA is still not readable, then just make the Favicon a Photo Camera as a Logo (white camera, black background), or something that fits the look of my Website.

  4. (0.75hr) When searching for photos (for example a person’s Name), and the photos that are then found pop up, the Horizontal photos display the correct way, but the Vertical photos don’t, and the heads are usually cut off.

  • CDN for faster image serving

  • Waiting on client

    1. Images to add to About page

    2. (1hr) Add Text about myself on the About page. In the middle, between the 4 photos (Studio, Video, Weddings, Social Media), and Have an Upcoming Event?

  • Out of scope

    1. people / clients can pay with their credit card AND paypal accounts.

Scope/Specs ↑

  • Frontend shall match provided HTML/CSS/JS files as closely as possible

    • Home

      • “Latest Events” needs a “View More” button & page

      • Slideshow at top of homepage should have multiple images (selectable, like featured content)

      • TODO There’s no photos/events/refine control on the home search form

      • Need social URLs for links

      • Featured content area

    • About

    • Book Now (contact form)

    • Search

      • Partial exact match based on image tags and fields

      • No autocomplete, autocorrect, or partial match of queries needed

    • Inside Album

      • TODO People/Event/Location/Date/Photographer filtering/sorting doesn’t work

    • Picture Detail

      • Adjust display of picture detail to match the design from “04 Open Images” – shouldn’t be a popup. Note: no need for S/M/L/XL sizes, just put the image size information underneath the explanatory text (Copyright, Date, Image Size)

      • There should be no nationality options from the detail page – make those properties blank across the GUI as well (i.e. during checkout)

      • There should be a commercial vs personal license option.

      • TODO When a photo has names which are missing, visitors should be able to click a “Whats my Name” link under a photo to email the client the missing name - like www.patrickmcmullan.com/whoami/index.aspx

    • Shopping Cart

    • Checkout

      • Global pricing

      • No shipping prices necessary

      • Stripe should work and have correct pricing

      • Before checkout there will be a popup disclaimer (client’s attorney is working on it)

    • Admin Dashboard

    • Registered User Dashboard

    • Wishlist (lightbox)

      • For registered users only

    • Register/Log in

  • Admin:

    • Ability to create albums (events)

    • Ability to mark albums as public or private

      • Only accessible via a password (unique password per event)

    • Able to bulk-upload hundreds of images at once (thousands per week)

      • Image uploads are stored in AWS S3.

    • Thumbnails and watermarks are automatically generated upon upload

      • Watermark is similar to BFA.com: a semitransparent gray square with image ID and the website name overlaid over about a quarter of the image.

      • There are two “full resolution” sizes, one largest and more-expensive “commercial” size, and a smaller cheaper “personal use” size. (Four total image types: original full-res (commercial use); smaller res (personal use); watermark; thumbnail)

        • Pricing for commercial and personal sizes is editable in admin settings, as well as the personal image size.

        • Customer can purchase either commercial or personal use sizes and receive only that size on checkout.

      • No watermark is applied to full-resolution images or thumbnail

    • Tags from EXIF should be automatically parsed and saved in the database for each image:

      • People

      • Copyright

    • Admin should be able to edit these “EXIF” tags manually as well, however editing will be on a per-image or per-event basis. No batch-image-editing of tags will be programmed into the website at this time.

    • Other tags should be auto-generated:

      • Image ID (plain database ID, starting at 1)

    • “Other Keywords” should be available at the event and image level.

    • Search should make use of all event and image tags.

    • Admin can edit the commercial/personal default prices for images in one place, and also override the default commercial/personal pricing on a per-image basis.

  • Unregistered User:

    • Ability to view all public albums

    • Ability to freely search for public images

    • Doesn’t have the ability to view purchases after the current session expires

  • Registered User:

    • Purchased images are viewable afterwards

    • Ability to create a “wish list” of images

  • Photographers:

    • TODO: Assistant Photographers, Editors, Staff, etc. should only be able to:

      • Access the Events Tab (not Orders, Users, Settings)

      • Add or Delete an Event.

      • See the last 3-5 Events.

  • All users:

    • Only able to view private albums via password

    • Able to send an email via the Contact Us form

      • Email sent to an address the client specifies (hardcoded, not editable)

    • Able to purchase and download digital full-resolution copies of images

    • TODO Able to purchase physical prints [see original code]: selecting Sizes, Paper, and custom/default pricing of Prints, etc. Size options: 5x7, 8x10, 11x14, 16x20. Paper options: Luster & Deep Matte.

    • Not able to view or download full-resolution images unless they have purchased them

      • Image URLs cannot be guessed: each file has a random ID.

      • Will NOT be able to “right click > save” any unpurchased photos

      • Will NOT be able to “drag and drop” any unpurchased photos

  • No CMS feature will be programmed at this time – text and style changes will require a Rails programmer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment