Alex Tonetti Photography | Alex Tonetti
  • Twitter
  • Facebook
  • Google+
  • GitHub
  • Instagram
  • LinkedIn
  • RedBubble
  • Society6

Saturday, February 13, 2016

Alex Tonetti Photography



Alex Tonetti Photography was my first venture onto the web. In the years prior, I had picked up photography as a hobby, starting out slowly just taking photos with my iPhone and then eventually graduating to a full-fledged DSLR. Ever since I got that first DSLR, I have been trying to photograph everything I could find around DC, Maryland, and Virginia. I had amassed quite a large collection but had no place to share them with friends and family. I decided a blog would be a great place to do just that.
I had very little experience with blogging previously so I needed to start learning everything I could get my hands on. I searched Google for a quick start guide to creating a blog and the first one I found mentioned Blogger as a good starting platform. It recommended Blogger because it had a graphical user interface for beginners but more advanced features that could be exposed to really customize your site. After choosing a platform, I purchased my domain name through Google Domains and started to set up my blog. I shopped around for a pre-built template and selected the Blend template by Bthemez. It was a very photo-centric theme that was perfect for what I was looking for.
As I started to customize my new blog, more on exactly what that entailed later, I stumbled upon Smart Passive Income—a podcast by Pat Flynn. I immediately fell in love with the podcast and became inspired by the idea of building a successful Internet business that can be run from anywhere and generate income independent of your time. After listening to my first episode, it was decided, I would try to turn my passion for photography into a source of income. That day I binge listened to probably 8 hours of the Smart Passive Income podcast. I was obsessed, I found other podcasts and listened to as much as I could get my ears around; writing down tips and tricks for being successful in the online space. I learned best practices for building an audience, building an email list, effective use of social media, search engine Optimization (SEO), and other important online business success factors. As I started my journey, I kept my notes handy and implemented as many of the tricks as I could. Now onto how and what I did to customize my blog.

Customizing the Blog

I started out slow with my customizations, tackling some quick wins within the template first. I began by updating social media links to point to my own profiles, creating a navigation menu, and activating the featured post slider element on the main page. The next update I made to the template was merging the three widget footer into a single full-frame widget. I couldn't use the user interface to do this because of how my template integrated back into Blogger after I applied it, so I needed to learn a little bit about the syntax of coding Blogger templates. I wanted to merge the footer content in order to incorporate the Instagram widget by LightWidget. I customized the widget so that it would display six of the most recent Instagrams from my @atonetti account. An example of my Instagram widget can be seen below:

Instagram Widget

After making all of my updates to the template, I moved on to the layout. While the layout cannot be seen from the homepage, it can be seen when opening up each post. I added several different components to the sidebar of the layout. The first widget I added was the popular post section which I then configured a bit to display the top 5 most popular posts. Next, I created two ads in the sidebar using Adobe Illustrator for both my RedBubble and Society6 stores (Check out the examples below). I created the ads in Adobe Illustrator by combining stock photos of beautifully decorated, slightly modern looking living rooms; some of my favorite framed art prints on my Society6 store; and some overlay text. And viola, I had custom ads that used my affiliate links for each company to direct traffic to my store pages.
The last two items I added to the sidebar were related to my newly created MailChimp email list. I added a single HTML/Javascript widget which houses the code for a signup form as well as the code for a custom, time-delayed pop-up to entice users to join my list. After configuring my email marketing, I made one final change to the posts layout. I edited the About the Author section at the bottom of each post with a quick blurb about me and a photo. Making that change, finished all of the changes that I made to the blog's layout.

Affiliate Links

I created both of the graphics as advertisements for my Society6 and RedBubble stores using Adobe Lightroom. I combined stock photos of living rooms with several of the framed art prints from my stores and then overlaid some text. For the links, I used my affiliate links from each company in order to earn commissions from purchases even if the purchaser doesn't buy my products.
After customizing the template and the layout the next step was to customize how each post would appear to the user. Several of the podcasts I listened to recommended that the posts should have a similar look and feel ton not confuse readers. In order to do this, I created a post template that serves as a framework for each post. The first element of the template is the barebones outline for a Fotorama gallery which displays 4-5 featured images for each post. Two comments instruct the post writer where the images must be placed and what metadata must be added to each image tag. An example of the Fotorama gallery can be seen below. The second element of the template is the post text. The post text is a very simple, empty DIV associated to a CSS class for the initial indent.
The third element of the template is an empty DIV where the picture gallery goes. For the gallery, I choose to use the Pinterest-like gallery from Cincopa. I really like Cincopa's offerings, they make creating galleries very simple while allowing for advanced features like domain locking, custom right-click protection, password security, advanced SEO options, etc. Cincopa has truly been a lifesaver in displaying my images on the site. The fourth and final element of the template is two headings; one to offer my photography services and the second to remind people to leave me a comment or repost my photos.
The proud American flag waving in the wind at the base of the Washington Monument in Washington, DC. The hauntingly endless stars reminding us of the thousands of lives lost in the second world war at the WWII Memorial in Washington, DC. A man walking down the stairs at the National Gallery of Art in Washington, DC. A peeling alien mural outside of a coffee shop down in Blagden Alley in Washington, DC.
Fotorama Gallery Example with Code
On the left, is an example of a Fotorama gallery that I created with several photos from the Discovering DC - Part 1 post. Below, is the HTML code that creates it.
        
Photo 1 Photo 2 Photo 3 Photo 4

Creating Pages

Several different pages needed to be created over the course of standing up my blog. The first page I created was the Coming Soon page, a placeholder for pages that were in development. Afterwards, I added two more pages the Contact page and the About page. The Contact page features a custom email contact form as well as several social media links where I can be reached. The About page contains a short bio about myself as well as a photos of myself and some of my photography equipment. The next page I created came to fruition while I was creating my first Cincopa gallery for my first post. I needed a landing page for the right-click protection, a place where the user would be redirected if they attempted to save one of my images, and that was how the Sorry About That... page was born.
The rest of the pages I created all came about once I decided to convert my blog into an online business. I created the Stores landing page which contains links to my Lightroom Presets store, my Prints store, and my Equipment Amazon affiliate store page. Within the Lightroom Presets store, I created pages for each Lightroom preset pack that I sell—the Color Splash Preset Pack, the Black & White Preset Pack, the True Grit Preset Pack, and the Elegant Fade Preset Pack. For more detail about the stores I created, both the print stores and the Lightroom preset store, continue reading to the Online Stores section.

Social Media

The first profile I created on social media for Alex Tonetti Photography was the Facebook page. I use the Facebook page to share recent blog content and the featured photos from each post in order to drive traffic to my site. As a result, I receive hundreds of impressions each week. Next, I created a new Alex Tonetti Photography board on Pinterest for pinning all of my photos from each post. This has allowed people who wouldn't normally view my pictures the opportunity to see and share them. That was the extent of my social media creation. When it came to Instagram, Twitter, and Google+, I used my personal accounts which had already been created. By far, out of all of my social media accounts, Instagram is my favorite and most successful.

Online Stores

In an effort to create some passive income from my hobby, I created some online stores. The first two I created were for selling my photos. I did some research and found that Society6 and Redbubble were the best options for me and what I wanted. I wanted a site where I could upload my work and then have the company take care of the rest. I am very busy already and I didn't want to have to spend the majority of my time going to a print shop and the post office to fulfill orders.

Society6

The first online store I created was my Society6 store. I had used Society6 in the past to purchase other artist's work so I was familiar with their site and what they offered. While building the store, I created several different Adobe Illustrator template files for cropping and resizing my photos for the various product offerings. I also created a post description template that included social media links, a hashtag campaign for people who purchase my work, and various metadata that relate to my work. With these improvements, I was able to quickly upload my work and get the store up and running. The day I made my first sale was truly an exciting one!

RedBubble

The second online store I created was my RedBubble store, it was much easier to create then on Society6. RedBubble seems to be much more technologically savvy with an improved user experience over Society6. To name a few of their better features, RedBubble allows for analytics tracking with Google Analytics and has a unified upload process—that automatically crops your images to fit all of their products instead of having to create different templates. Like my Society6 store, I created a similar post template including all of the same information just in a different format. With the template completed, I was able to get my store operational.

Adobe Lightroom Preset Store

The third store I created was my Adobe Lightroom preset store. I created this store last because there was a lot of pieces I needed to figure out before launching. Creation of the presets was step number one. Once that was finished, I needed to find a service, preferably a free one, that would allow purchasers to pay for an item and then auto delivery that item to their inbox. After testing out a few different options, I landed on FetchApp. FetchApp uses PayPal for the checkout experience and then delivers the presets directly to the purchaser's email. Best of all, FetchApp offers a free plan with 5 MB of space and lucky enough for me, the Lightroom Preset files are very small in KB range. Following landing on a payment platform, I needed to create demonstrations of my filters on real photos. I went through my archives and selected some of my favorite photos to create before-and-after photos. I used Adobe Photoshop to create horizontal split-screen examples of the filters and displayed them in Fotorama galleries for each filter pack. I also wanted another way for users to test the filters, something more dynamic than a static photo. I search the web for a JavaScript library that would allow a user to slide the filter over the photo—I found TwentyTwenty by ZURB. There is an example of the Live testing of filters below. You can also check out my Lightroom Presets here; Color Splash, Black & White, True Grit, & Elegant Fade.
Live User Test for Adobe Lightroom Presets Example with Code
An abandoned farmhouse on the side of the road outside of Reykjavik, Iceland An abandoned farmhouse on the side of the road outside of Reykjavik, Iceland with the Color True Grit Lightroom Preset applied
On the right, is an example of the live user test of my True Grit Lightroom preset that I created. The TwentyTwenty library overlaps the two images and creates a jQuery slider to unveil the second photo underneath. Below, is the HTML code underneath it.
        
Before: Image After: Image with Filter Applied


Check out my RedBubble Store   |   Check out my Society6 Store   |   Check out my Lightroom Presets Store



Check out AlexTonettiPhotography.com



Connect with Alex Tonetti Photography


                   

Contact

Get in touch with me


Location

Washington, DC