Options

Wordpress and Smugmug

vintagekeysvintagekeys Registered Users Posts: 7 Big grins
edited April 13, 2017 in SmugMug Support
I consider myself well versed with smugmug, but the time has finally come for me to move to a word press website for blogging. While I am a wedding and corporate photographer, I have a decade of galleries and links to galleries on my domain. I must keep these links alive and pointing to the galleries.

My question is this, as someone techie but new to wordpress, will I need to have a separate domain or subdomain to use wordpress but still have smugmug linked to my current website?

I would prefer to have the wordpress as my main site, but still have links given to old clients still link to their galleries. I rank pretty good on google. Will this destroy my ranks to migrate off smugmug server and then use a plugin to link to the galleries for blogs and such? I thought about starting a subdomain blog.robbmccormick.com, but really would like to have to all under www.robbmccormick.com. I plan on using smugmug to house my client galleries in the future for ecommerce and such. I've seen guys who do something like galleries.robbmccormick.com, but I imagine that would remove all my existing links. My gut says start a subdomain blog.robbmccormick.com and try to match my smugmug page to be similar. However, that doesn't seem optimal.

Currently, there is not a ton of content on the surface of my website, but underneath there are a ton of links and keywords indexed by google. In the long run, having a blog that is updated regularly will be better for seo.

Any advice on how to approach this?

Comments

  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,458 Major grins
    edited April 13, 2017

    If you are already ranking then I would suggest create a sub-domain for your WordPress blog ONLY (blog.robbmccormick.com). If you want to use your WordPress for your main website you are going to have to use a bunch of 301 redirect from your SmugMug site to your new WordPress site. Then you need to create a sub-domain for only your SmugMug (gallery.robbmccormick.com).

    In my case my main website is WordPress and I use SmugMug ONLY for the galleries. I set up a sub-domain (gallery.imagesinthebackcountry.com) and point that to SmugMug. To match the two, I liked the theme I created on my WordPress site and since I know how to use HTML/CSS, I matched my SM to my WP site.

    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,458 Major grins

    Also, you are NOT going to have both your SmugMug and your WordPress site "under" your domain, www.robbmccormick.com. You are going to have to make a sub-domain for one of them, no way around that.

    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Options
    vintagekeysvintagekeys Registered Users Posts: 7 Big grins
    Thanks Mike. I will set it up as a sub domain and do my best to match the wordpress site. Any advice on where to start as far as matching smugmug to wordpress?
  • Options
    leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    I've done something similar with my own SM site (www.aaronmphotography.com) and my Wordpress blog (http://blog.aaronmphotography.com). I picked a WordPress theme that sorta matched my SmugMug site, and then used WordPress's CSS tweaks to make it a little bit closer to matching.

    One of the benefits of doing this is that it can greatly benefit your SEO. If you take the links to the images from SmugMug and use that to embed the photos into wordpress, you'll be creating a link between SmugMug and WordPress that strengths the SEO ranking of each. What I mean by this is: don't upload the photos to wordpress. Instead grab the share link to the photo that's on SmugMug, and use that on WordPress.

    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,458 Major grins
    edited April 14, 2017

    I started with a free WordPress parent theme that I modified by creating a child theme. Once I was done, I made my SM site the same. For me, it was easier to make my SM site look like the WP site then they other way around.

    I still upload my blog entry photos to my WordPress.

    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Options
    vintagekeysvintagekeys Registered Users Posts: 7 Big grins
    So I have created a subdomain and have my new blog up and running at blog.robbmccormick.com. I really love the feel of the page, especially the typography. I don't think it will be hard to match the look of the blog to my smugmug page, but I'm not very knowledgeable when it comes to coding.

    What I am trying to do is change the fonts on smugmug to match the fonts on the blog page. The main header font is Cormorant Height (Italic font size is 40 and 48 line height). The menu text I would love to match the blog menu text which is open sans 600 12 size 22 line size. The normal text is open sans 300. I found an article here: http://www.aaronmphotography.com/Customizations/Fonts-Links/Google-Fonts. I am very confused on how to set this up and also set for different things like headers, menu etc..

    I would also like to move the menu under the logo and move the logo to the center to match the blog. Again, no idea where to start.

    Whew. This is a challenge. CSS is totally new to me.

    I GREATLY appreciate any help!!!
  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,458 Major grins
    edited April 14, 2017

    Looks like your WordPress headers are using the italic version of Cormorant. While SmugMug uses Google Fonts, they haven't loaded it. So we'll loaded it manually.
    Add this to your theme's CSS:

    /**
* Loads Google Fonts
****************************************/
@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 400;
  src:  local('Cormorant Italic'), 
        local('Cormorant-Italic'), 
        url(https://fonts.gstatic.com/s/cormorant/v3/X0EhxUCrSK0o-Ai-a9zFbmfQcKutQXcIrRfyR5jdjY8.eot),
        url(https://fonts.gstatic.com/s/cormorant/v3/X0EhxUCrSK0o-Ai-a9zFbmfQcKutQXcIrRfyR5jdjY8.eot?#iefix') format('embedded-opentype'),
        url(https://fonts.gstatic.com/s/cormorant/v3/X0EhxUCrSK0o-Ai-a9zFbiwlidHJgAgmTjOEEzwu1L8.ttf) format('truetype'),
        url(https://fonts.gstatic.com/s/cormorant/v3/X0EhxUCrSK0o-Ai-a9zFbrrIa-7acMAeDBVuclsi6Gc.woff) format('woff'),
        url(https://fonts.gstatic.com/s/cormorant/v3/X0EhxUCrSK0o-Ai-a9zFbo4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/**
* Header Fonts
****************************************/
.sm-user-ui h1, 
.sm-user-ui h2, 
.sm-user-ui h3, 
.sm-user-ui h4, 
.sm-user-ui h5, 
.sm-user-ui .sm-title-xl, 
.sm-user-ui .sm-h1, 
.sm-user-ui .sm-h2, 
.sm-user-ui .sm-h3, 
.sm-user-ui .sm-h4, 
.sm-user-ui .sm-h5, 
.sm-user-ui .sm-heading {
    font-family: Cormorant;
    }

    Once you have that loaded and working, post back for round 2...

    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Options
    vintagekeysvintagekeys Registered Users Posts: 7 Big grins
    edited April 15, 2017
    Mike,
    You rock first of all and I appreciate you help. So I added this to under theme>wrench icon>css and though it changed the header fonts, they aren't italic but I think they are cormorant. I also added a CSS block to the top of my homepage and it did the same thing....changed the header font to a sort of a squashed version of cormorant.

    Here is the link to the google version if that helps at all: https://fonts.google.com/specimen/Cormorant

    Thank you again for your help!
  • Options
    vintagekeysvintagekeys Registered Users Posts: 7 Big grins
    Aha! If I open the text editor I can make it Italic! It definitely looks close to the wordpress font (thank you so much!), but it is definitely a bit different. On the blog it is Size 40px Line Height 48px if that makes any difference. Seriously, you rock for getting me this far. This is way outside my comfort zone.
  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,458 Major grins

    @vintagekeys said:
    Aha! If I open the text editor I can make it Italic! It definitely looks close to the wordpress font (thank you so much!), but it is definitely a bit different. On the blog it is Size 40px Line Height 48px if that makes any difference. Seriously, you rock for getting me this far. This is way outside my comfort zone.

    I didn't think you would need to add the italic since I only uploaded the italic font (and I didn't verify it). Glad it worked out.

    You should be able to move your logo on top of the navigation stuff in the customization section.

    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Options
    vintagekeysvintagekeys Registered Users Posts: 7 Big grins

    Any idea how we can change the menu font to match the blog?

  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,458 Major grins

    @vintagekeys said:
    Any idea how we can change the menu font to match the blog?

    Looks like your blog is using 'Open Sans' with the body font at 300 and the navigation at 600, Add this to your theme's CSS:

    /**
* Body Font
***************************************************/
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src:  local('Open Sans Light'), 
        local('OpenSans-Light'), 
        url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTZS3E-kSBmtLoNJPDtbj2Pk.ttf) format('truetype'),
        url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff'),
        url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}


.sm-user-ui body, 
.sm-user-ui select, 
.sm-user-ui input, 
.sm-user-ui button, 
.sm-user-ui textarea, 
.sm-user-ui .yui3-g [class*="yui3-u"], 
.sm-user-ui .yui3-g-r [class*="yui3-u"], 
.sm-nui {
    font-family: Open Sans;
    font-weight: 300;
    }

/**
* Navigation Font
***************************************************/
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src:  local('Open Sans Semibold'), 
        local('OpenSans-Semibold'), 
        url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSpS3E-kSBmtLoNJPDtbj2Pk.ttf) format('truetype'),
        url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff'),
        url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

.sm-user-ui .sm-page-widget-nav {
    font-family: "Open Sans";
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.24rem;
    line-height: 1.8;
    }
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Options
    BeautifulWorldBeautifulWorld Registered Users Posts: 64 Big grins

    @vintagekeys I tried doing something like this too. Here is my blog https://karthikraja.blog/ which is on Wordpress and my photo galleries are on smugmug. I tried to keep themes and color the same with visual ties between the two. I do have two domains though, both www.karthiraja.blog and www.beautifulworld.photography. Hope it helps.

    http://www.beautifulworld.photography/
    http://www.karthikraja.blog

Sign In or Register to comment.