Red Dot Visuals, a photo and video studio in Atlanta. 2023
A photo and video studio’s site, run from its own CMS
Red Dot Visuals covers photography, videography and editing. Its site’s look comes from a ready-made HTML agency template. I turned that template into a Laravel 10 app and built a custom CMS behind it, so the studio’s team can publish photos, videos, before and after edits and project write-ups without touching code.
- Before and after edits, on a slider
- Drag to compare
- YouTube thumbnails, taken from the link
- Paste a link
- On every project page
- Crew credits
What the site and CMS offer
Who it’s for
A studio that wanted to run its own site
Red Dot Visuals is a photo and video studio in Atlanta. Its site started from a ready-made HTML agency template, where every photo and video is written into the page, so adding new work would mean editing code.
I kept the template’s look, turned it into a Laravel 10 app, and built a CMS behind a sign-in with a section for each part of the site, so the studio’s team can publish its own work.
Photos
Tag a photo, and the site’s filters follow
The team adds a photo by pasting its image link, then ticks its categories in a side panel. The filter buttons above the site’s photo grid are built from those categories, so a new category becomes a new filter with no code changes.
Each category opens for editing beside the list and is deleted without reloading the page, and every save ends with a short confirmation.
Edits
Before and after, on a drag slider
The editing section pairs a raw shot with its finished edit, and visitors drag a handle across the image to compare the two. In the CMS a pair is two image links, previewed with the same slider the site uses, so the team sees each pair the way visitors will.
Low-light work has a gallery of its own, with each shot opening in a popup.
Videos
Paste a YouTube link, get the thumbnail
To add a video, the team pastes its YouTube link. The app pulls the video’s ID out of the link and stores the address of its full-size thumbnail, so nobody has to find or upload an image.
Videos have their own categories, separate from the photo ones, which drive the filters on the video page. Each thumbnail opens the video on YouTube.
Projects
A page for every project, with crew credits
Each past project gets its own page at its own address. The team gives it a title, an address and a cover image, then fills in the crew, with each person’s name, role and photo, plus the project’s photos and YouTube videos, all from one editor.
A link in the editor opens the published page, and the portfolio lists every project with its cover.
What it offers
Photos
On the site
- A photo grid with filter buttons built from the studio’s own categories
- A low-light gallery that opens each shot in a popup
- Before and after edits as drag-to-compare sliders
In the CMS
- Photo categories, edited beside the list and deleted without a reload
- Photos added by image link and tagged in a side panel
- Low-light shots and before and after pairs, previewed with the site’s slider
Videos
On the site
- A video grid with its own category filters
- Each thumbnail opens the video on YouTube
In the CMS
- Video categories, kept apart from the photo ones
- Videos added by pasting a YouTube link, with the thumbnail taken from the link
Projects
On the site
- A portfolio of past projects, each with its cover image
- A page per project with crew credits, photos and videos
In the CMS
- A project editor with a title, an address and a cover image
- Sections for the project’s people, photos and videos, and a link to the published page
About and Join us
On the site
- A scrolling carousel of client logos
- Team members, client testimonials and open roles
In the CMS
- Client logos, team members and testimonials, each added, edited and removed
- Job posts written in a rich-text editor
Across the CMS
In the CMS
- A signed-in area with a sidebar group for every part of the site
- Images and videos added as links, so there is nothing to upload
- A confirmation toast after every save
- Buttons that switch to a spinner while a request runs
What the client said
He did exactly what the job entailed and delivered in a timely manner. He was also very patient with me and helped me to deploy the project on my end which wasn't in the original job description so I appreciate how he went above and beyond.
Endorsed by the client for
- Reliable
- Accountable for Outcomes
The work
Laravel
PHP- Blade
Bootstrap
jQuery
JavaScript- Axios
- Vite
- SweetAlert2
- CKEditor
