Supercharge WordPress using Lightroom Presets Exploring Photography with Mark Wallace

Show video

You, take great photos and, you want the world to see them, well, if you're like a lot of photographers, you have a blog and that blog is running on WordPress. In, this episode I want to show you how you can use Lightroom classic, CC to supercharge, WordPress, and I'm going to give you some SEO tips along the way so let's get started right now. Hi. Everybody welcome to another episode of exploring photography right, here on Adorama TV, I'm Mark Wallace and today I am, coming to you from my hotel room I'm on the road riding around the world on a motorcycle and it's time for me to update my blog I, want people to read my stories and see my images, and that's probably what you want as well it doesn't matter if you're traveling around the world over your wedding photographer maybe, you're an event shooter the point is you want to have a place where people can see your work get, to know you and give, you the job you want people to hire you and so WordPress is a platform. That allows you to create a blog and it is used by everybody. They, claim that 31%. Of everybody on the Internet is using WordPress I don't know if that's true or not but it's definitely very, popular, because it's easy to use and it's, almost free, so you have to pay for the hosting but other than that it's free software it's, really an incredible, deal well, if you have a blog the point is to get people to come and read that blog so you want it to be integrated, you want to make sure that when you post links, that they appear, on Facebook, with images, and they're really nice and easy to read you want to make sure that happens on Twitter you want to make sure that it's integrated with Instagram, and you want to make sure that search engines can find you, that's, what we're doing in this, episode, and so, if. You're not familiar with WordPress if it's a new thing to you zip over to wordpress.com. And you can read all about it but without further ado we're going to dive into a real live, blog, using WordPress, I want to show you how, I've done all of this for myself and you can do it too we, have a lot to cover in today's tutorial so, I broken this down into five steps. The, first is an overview of the end result, we want to see where we're going to end up in the last step, the second, thing is we're going to need to understand, the plugins, that are needed to make this work on your WordPress site the good news is they are all free, then. We need to understand, our image, sizes, and aspect ratios. So we can automate everything in step, 4 which, is setting up our export presets in Lightroom, once, that's all done we're going to put this into practice in a real life blog, post and show, you how it all works let's, get an overview of where we want to end up in step, 5 notice. That there are images that are going to show up over and over on a wordpress site the, banner images, that show up on these carousels that, most themes have, and then, on everything, there is a featured, image that, shows up that's a little teaser of what's to come for that, post so we want to know how to add those and make sure that they're nice and sharp in the correct size notice, also that, I have Instagram, integrated, onto my WordPress, site so it's always over here on the right hand side if you click on one of those little thumbnails it pops, you right into Instagram so, people can see the image and also follow, me on Instagram, it's really cool the same is true of Twitter, and so on the right anything I tweet or retweet is going to show up here on the, right-hand side which is a really nice little feature the. Other thing that we want to look here at is, inside. Of an actual post so I'm going to go into this reviving, the blog post. Here notice we've got videos we also have images. These, images here, notice they have captions. On top.

Of Those those are inside, of a galleries, when I click on that that, expands, to a larger. Image if I click away that, shrinks. Down to a smaller image we've, got a standalone, image so here's one of these. Mountains outside of Mongolia. Notice. It's a standalone, image but it has the, caption. At the bottom, what, we want to do is we want to be able to add these captions in Lightroom, and bring, them over into our WordPress site, so, to do all of this we need some specific, WordPress. Plugins, so let's look at those next, I'm currently, using WordPress. 49.8. And I'm using the Olson theme from CSS, igniter I've added links to that theme in the description, of this video one. Thing I need to point out is that I'm using the Gutenberg, editor. Which is not standard, yet it will be standard in WordPress 5.0, but, it's stable enough for me to use right now and because it's going to be standard I decided to adopt it for this video and I think it's spectacular, all. Right let's take a look at the plugins, that we're going to need to do exactly, the. Things that I'm doing in this video the nice thing is these, are all free, plugins. And so they're available to everyone the three that are important. The, first one is Twitter that's, how I've integrated my, Twitter feed as a widget on my. WordPress. Site the second is WordPress, Instagram. Widget by Scott Evans that's, how I'm putting the, Instagram. Feed on all of my pages and then, last something. That's really important, search engine optimization I'm, using Yoast, SEO. I'm. Using the premium version but, the free version works, just fine for everything, we're going to be doing today if SEO. Is important, to you and it should be Yoast, is really really an amazing, product, they're not paying me to say that but, I've been using them for a few years and it's really really a wonderful thing okay.

These, I have added links to in the description of, this video so you can add those to your WordPress, site if you choose the, next thing we need to do is look at image sizes and aspect ratios, because that is a really, important, deal so let's take a look at that right now, when. You upload images, to WordPress. Some of those images have to be a very specific aspect. Ratio some, of them have to be a very specific pixel, dimension, height and width and then others it doesn't really matter the, ones that are specific, are mandated, to us by the theme, that we are using so, for example. And this, theme this is the Olson theme this, main slider, here has, images. That are 16. By 9 aspect ratio. 9. Aspect ratio and so they're widescreen, like in HD, television, and so, if I upload something that's the wrong aspect. Ratio, it's, going to be cropped in a weird way or, if I upload something that is let's, say a square instead, of a horizontal widescreen, I can have some either white or black space on the size of this it's going to look not very professional, and also. A lot of themes will mandate, the aspect. Ratio used. For the featured, images some some of them want widescreen landscape, images, some of them want square images, some want vertical, images and so it really is up to your theme, to, determine, which images, are very specific. And which don't matter so in this theme all the gallery images that I'm using it doesn't really I can upload, them any, size or aspect ratio I want how, do you know for your specific, theme well, this one reason that I highly, recommend that you get a premium theme, that, has documentation, so in this theme, specifically. In, the documentation, I just go to image sizes and it tells me what their recommended, minimum, sizes, are for, each one of the different thumbnails. And images, and front page images etc and so I know if you get a free theme a lot of that is just guesswork. And so you don't want that there are two other image, images. That are very specific that, we have to know about and that is for, integrating, with Facebook and Twitter. So for example, when, I have this image right here so this is from the USA tour we've got this nice mountain from the Pacific Northwest if I, zip over to Facebook. I've already copied if I paste the link to that post, I'll, just paste this into Facebook, BAM oh look that image shows up and it's exactly right with the description and everything so. I'm going to show you how that works a little bit later, but, the point is the image that I upload, that Facebook, is going to use has to be in a very specific, size, the, same thing is true of Twitter, you'll, notice that I have these little thumbnail images here next, to these tweets, that I've done previously a few days ago and those, match the.

Featured. Images that, I have on my blog so we're gonna get to what, those are but right now we have to know exactly, what the image aspect ratio and size, is, and so, I've done all of the homework for, you so let me show you what I'm using for my theme and what Facebook, and Twitter require, these, are the theme based images, the aspect ratios and pixel, sizes that I use for my theme remember, they're, not going to be the exact same for your theme make sure you check the documentation, but for the demo today this is what we'll be using and, you might want to write this down because we're going to be using these numbers in Lightroom. When we set up our export, presets, a little bit later but, in my theme on the featured image and the banner i'm using a 1200, pixel wide, image on, the long edge using, a 16 by 9 aspect ratio, 1200. Pixels isn't very large but, it loads really quickly and that's really important, for a website. For. The gallery, and the stand, images, I used 1800. Pixels on the long edge and, I just make sure that my ratios, are consistent, so if I have a gallery where. I have a 16, by 9 aspect ratio, for one image and make sure all of them are sixteen, by nine or if, they're four by three and make sure all of them are four by three one, of them is square make sure all of them are square so it looks consistent, but it doesn't really matter and you, can have images, that are larger than 1,800 pixels or smaller it's, up to you based on how fast you want your images to load and what. Your viewers out with the screen size is for your viewers the social. Images these are the images that we're going to be using for Facebook, and Twitter these. Have. To be exactly, this Facebook, and Twitter mandate, this so, for Facebook, you have to have a 1200. By 630. Pixel. Image that's, a twelve by, six point three aspect. Ratio it's, really bonk monkey and. Then Twitter, what, we're gonna be using for this search engine optimization, stuff we're gonna using an image that is 1,024. Pixels by, 512. Pixels that's a two-to-one. Aspect. Ratio alright. Now that we know all of this stuff we have enough information to jump into Lightroom and start setting up all of our automation in, Lightroom what we want to do is we want to use export, presets. To, automate, all of this stuff so under, the file menu you have export. With presets, notice. That I have all these presets, for my website mark on a bike I've got my featured image my large photo for galleries and standalone images, and then my Facebook and Twitter image and so, all I have to do is click one button and everything's, going to work for me so what I want to do here is show you how to create these for, your own or, WordPress, site and then. We'll put this into practice in our final step so to do this what you need to do is go into export. And so. Once, you do that it's going to bring in all the settings for whatever you have, chosen. Over here on the left hand side so, what we're going to do is we're going to sort of start from scratch here and so.

What We'll do here is I'm going to export, this to a hard, drive and. Where. Is this going to export I'm going to choose a specific, folder. I want this to go to the same place every time so I can set up a shortcut, to get right there, for, me I put this right on my desktop, and I'm, going to put this in a subfolder, and I like to name the subfolder, temp. FB. Temp. Facebook, temporary, Facebook folder this is a folder I have on my desktop that I fill up with exports, and then just delete it every time I do one of these exports, it just recreates, that directory. For me and then I know I can just delete it it doesn't clock up clog up my hard drive and that's, important, that's why we're using these exports. Instead. Of published services, once. We have these images on a folder. Once we upload them we're, done with them we can delete them off our hard drive they're on a server they're safe we don't need them anymore so exporting. Works better than, published, services, the, next thing we want to do is we want to rename, our file, right now it's going to use the file name but, once we get this to WordPress we're, going to get confused because we're going to have an image that's the. Featured. Image that looks the same as the image that's used for our Facebook image, that looks the same for the Twitter image but they're all different images, so, we need to fix, that so, we're going to click rename. And what. I'll do here is I'm going to click Edit. This. Is going to bring this up so before, file name I'm going to move my cursor over here, and I'm going to type in featured, -. 16-9. So I know it's a sixteen, by nine featured. Image, -. Twelve. Hundred. Pixels. So. I know exactly the size this needs to be it's. All good so I have my aspect ratio and my size and, then my filename I'll, say done, you, can see this now will rename, this to featured sixteen by nine twelve hundred pixels and then the name of my, image. And, we fixed that really quickly, I should have a - before, the file name. Okay. So, once I've done that I've renamed, this okay I put it on a folder, called, Tim Facebook, I'm renaming, this I'm, gonna make sure this is a jpg image the. Quality, I don't want this to be about 80 that's up to you but 80 is a good starting, point, the. Color space srgb. Is what we use on the web that's, perfect, we need to resize, this we, know it's going to be a sixteen, by nine image, we're going to crop this before, we export, it so all we have to worry about is the long side, the long edge so, I'm going to resize the, long. Edge that's. The long, wide edge to. Remember, the image size that we had before, 1200. Pixels is what that's going to be so at sixteen by nine that's going to resize it to 1200, by I think 675, pixels the resolution, really doesn't matter at this point let's. Sharpen this for, the screen that's where it's going to live and we'll. Do a standard, amount again, that's up to you you can make this whatever you want it to be but I'm going to say that's a standard amount the. Metadata, I want to include, all, of my metadata the, reason for that is I'm going to make sure I export, the title and the. Caption, that I can use in WordPress, I'll show you that a little bit later but. I am going to remove the person info and the location, info and I want that in there you. Can add a watermark I'm not going to do that and then. I'm going to show. This in finder, so, on a window to pop up and show me exactly where that image is so I can drag and drop it over there into, WordPress. It also saves me the step of trying to find where, the heck I put this on my hard drive it's. All automated, so now I have all these parameters, set up what, I want to do is create my own little pop, down here so let's say that I'm not using mark on a bike let's, create a fake name called. Marks demo so, this preset, is going to be my.

Featured. Well. Dude we'll call it 1200, pixels so we know how wide it is sixteen, by nine. Featured. So we know exactly what we're exporting, here at 1200 pixel sixteen, by nine featured, image and then. We're going to put this in, a new folder when. I name this March. Demo, you, can name this whatever your website is you, have mini folders for different websites I'm. Gonna create that click. Create and then. Okay that. Name is already taken so I can't name it that and, so. I'll do this featured, do. Okay. Boom, so I couldn't use that cuz I've already used it up here so there we have it we have Mark's demo it's going to save that then. I can hit cancel it's, ready to go now, what. We can do now is I can take this image. And I'm, going to create a. Virtual. Copy because I'm going to be doing some. Cropping. So, I've got my virtual crop copy, here and then. I'm going to go into the develop module into. My crop tool I'm. Going to choose 16 by 9 which is already chosen there which is really nice then I'm going to crop this exactly, how I want it position. This exactly, how I want it say. Ok then. All I have to do is go here and say file. Export. With preset and then. What we're going to do is we're going to go down to Mark's demo and, choose this thing that we just created click, it wham-o. It's going to export that it's, in that temp face book folder, and it. Is exactly, what we wanted so what we need to do is we need to duplicate, that process, for. Each of our. Different. File sizes so I'm going to delete that because I don't want that I've, already done that of course so. Over here under. Oops. Under. File and you zoom out on that I'll. Just show you really quickly I have, all of these presets, here so if I click export, you, can see that mark on a bike has a 1200, 16. By 9 aspect ratio, so, it's on. The long edge 1200, pixels and it's, sharpening. That to a high amount all, my metadata is exported, my, 1800, pixel large is going.

Again To that temp face book I'm. Not, renaming this because these are used once so. It's the actual image. This. Is 80 it's, being, resized on the long edge to 1800, pixels, sharpened. I'm including. All my metadata, the. Face book image. Going into that temp. Face book folder, it's. Being resized. To. 1200. Pixels. And. Then the last one the Twitter is going. Into that and it, is being resized, to 1,024. Pixels the. Question is why would you have two different 1200, pixel exports, remember. This one is renaming. The. File to Facebook SEO, this. One is renaming it to featured 16 by 9, this one is renaming it to Twitter so it helps us keep track of everything okay, now that you know how to set up all these export presets, let's. Dig in let's, put all this into practice and let's actually populate. This blog with images, from Lightroom well this is the post that we're going to be working on this is an article about how my motorcycle, how bike became. Shifty drifty so my bike got a new name shifty drifty this all happened in Mongolia, and Russia you can see that this is just a bare-bones, beginning, of a post but, it needs now a featured, image it needs the Twitter image it needs the Facebook image we need to add a gallery and maybe a standalone, image just to show you how all of this works, so I've already gone over into, Lightroom and I've created a quick, collection of some of the images from. Mongolia. That's where I'm going to start and I've, already chosen this, image to be the featured image this is the image I want to show up on the. Banner of my, blog, I want to show up on Facebook and Twitter so we're going to be working on this one to begin with so, the first thing I'm going to do with this image because I'm going to be, cropping. It and exporting, it several, times is I'm, going to create, a virtual. Copy I know I did this before but I want to make sure you see all of the steps so I've got this virtual copy this is what we're gonna be working with to, export, these than I can get rid of it that way I make sure I don't mess, up an, image that I've already.

Said, Exactly how I want so the first thing I'll do is I'm going to go into the develop module just to crop this so, the shortcut key is our for. A crop I'll do that this, first thing I need to do is the featured, image it's sixteen by nine so. I'll choose sixteen, by nine there's. The image right there I'll hit Enter, or return to. Accept that, file. Export. With the preset, mark. On a bike sixteen, by nine featured. BAM. So, that is going to export, that it, looks good okay. The second thing that we need to do here is we, need to crop, this for, Facebook, so, that is a. 1200. By 630. Image. Size which is a 12 by 6.3. Aspect. Ratio it's a really weird aspect, ratio so, to do, that when hit are for, crop I'm. Gonna go in here and I'm. Going to enter a custom, size. And once you do this once it's going to remember it you can see down here I've already got that in there but let me just show you how to do this I'll enter a custom crop, size and. What I can do is I can actually add, the actual, pixel dimensions, and Lightroom. Is gonna do the math to convert it into an aspect ratio so, I will do a 1200. Pixel wide, by. 630. Pixel, tall image, and. Notice. That it changes that automatically, to 12 by 6.3 it's, almost a sixteen by nine but not quite exactly I don't know why Facebook did that but they did okay. I'm, gonna hit enter to accept that, file. Export. With presets. This, is our Facebook, BAM. So. That's going to be exported, great now I've got that I can close this the. Next thing we need to do is we need to crop this for Twitter, so. Again our which, is the shortcut key for crop. Twitter. Is a. 1024. By 512. Pixel that's a two to one aspect ratio. So. Again, you can enter that, custom, aspect. Ratio or I can just hit two-to-one cuz I already done that once. Again is very similar but not the same hit. Enter or return to, accept that, this, is Twitter and so. I will export, this with my preset. I'm. Gonna go down here to Twitter, BAM, oh it's. Gonna export that so, just like that we have three images ready, to go and they are named nicely, so, now what I'm going to do is go back over. Into. My browser and. I'm. Going to go here to set, featured, image it's. Gonna ask me to upload a file so now. I can just go back to finder where I have that I'm, going to upload all three, of these at once it's just going to save us a little bit of time later on and, you'll understand, why so. I'll click that I've. Got three images uploading. One two three bam bam bam now this is where the renaming. Of the files is really important, notice. We, have three images that. Look the exact same here. In our media library the, only way to know which one is which is by the name so, you can see this first one here is the featured image click. On the second one that's, the Facebook image. Click, on the third one that's the Twitter image so we're setting the featured, image as. Well select, that wham-o. So, now we have our featured image all, set. What. About that Twitter and Facebook, thing well, this is where the Yoast plug-in, comes, in handy, so I've already pre-populated, these, snippets, you don't know what a snippet is don't worry about it you can learn about that later on your own go, to Yoast it'll tell you all about it but what I need to do is I need to add those. Little images, that are going to pop up on a Facebook. So I go to this little social. Button. Right here and it's. Going to show me a facebook, preview I need an image there so. I can click upload. Image I already, uploaded the images which is really nice this is the Facebook one.

Notice. It says Facebook SEO that's, the only way I know which one is it is which is that custom renaming so, I can select that. So. I have that there. Boom. Oh now, look it looks it shows me what it's going to look like in facebook. Then. I go over here to this Twitter, metadata. I'm. Gonna upload a different, image so. I can upload and. Choose the one that is for Twitter. There. It is select, that. Okay. So, now I've uploaded three images one. Is for Twitter one. Is for Facebook one, is my featured image, I'll, save draft you. Can see how these export, presets help us really. Really quickly. Update, our. Images. So. Now that we've got all that done, now. We can start adding images. To our. To, our page and so. What we're gonna do here is we're going to go. The. Calm before the storm okay, so I need to show some rainbow pictures so what I'm going to do is I want to use two. Images. So. Let's do, this. Image I'll do a standalone, image now, the thing that's really important, to note about this, is I have entered, a caption, over here in the. Caption. Area so I've chosen large, caption, you can get that get, to this through IPTC. As well, it's. In the description, you can use, large, description. And our. Large caption, I'm sorry and, that allows you to caption that this, is going to show up in, WordPress. Because remember when we set up our export, we said to export, all the metadata, and so, we've got that the, other thing that we have here if I go to IPTC, is we. Have a, title, we can type that into the headline, and, we say camping, in. Mongolia, I'll say that ok so we have a headline whoops, and we. Have a description so. Now what, I'm going to do is, I'm going to file export. With, presets. 1800. Pixel large photo. That's. Going to export, it's. Gonna pop up this window there's, my image looks. Great I'll, go over here to, this I'm going, to add a, new block, I'm. Going to add an image, so. What I'll do is I'll upload. Gonna. Ask me where, there. It is that, little window, bunk. It's. Going to load this all in. And look, at the caption, came right in from Lightroom so that is a huge time-saver, well if they type, all that stuff in once you have it in Lightroom it'll, pop right in so. There. You have it we could go ahead and start adding all kinds of different galleries, and all that kind of stuff fact let me just do two really quickly so, that you can see exactly how this works so you can see how the gallery, works, we'll go here to. Large, caption, just to make sure yeah the future, looks promising that's, good and then. We'll do. Rainbow. Over Lake Mongolia okay so we have these two images I've. Selected those file. Export. With presets. 1800. Large photo it's. Going to export that then. I can go back as, soon as these are exported. There. They are so. I can go back over here and. I. Can. Add in a, nice. Little gallery. So. We'll do this actually. We don't want that we want a gallery. So. We need to change this gallery. Okay. So, upload, that. So. This image in, this image, there. We go, open. BAM. Oh now. Remember, I said that these aspect, ratios should be the same size they are look, it brought in my caption, this. One is still loading in there it is the future looks promising, looks. Great and. You can see how this works I'm, gonna save this, draft, we'll, take a look really fast at a preview. Here. It goes, there's. Our featured, image. There's. The calm before the storm and, you. Can see all of that information, from. Lightroom came right on in and it makes this really really easy and fast to update there, is one thing that you have to do when. You are done, with, your post. And so, what I'm going to do here is I'm going to publish this really fast just so you can see how this works and then I'll unplug the until I get it done so, I'm going to publish this BAM.

Are You sure you want to publish this sure it's an unfinished. Unfinished. Post but I'm gonna do that so I can show you the last step so, now I have this, URL I need. To do something, so that these images, that I uploaded, to, WordPress. For. Twitter. And Facebook they, actually work right now they're not going to work I need to go over to this page that Facebook, created for developers, the link to this page is in the description of this video this. Is the, Facebook, debug, tool I need to enter the. URL of the page I just created and click debug. It's. Going to go and say hey this, has never been shared on Facebook which is true I just created, it so I need to click fetch, new information, it's gonna go and grab, those, images. And, there. It is the images, that I just uploaded they're, the exact size they need to be and now if anybody shares this link on Facebook. It's, gonna pop up with the image that I uploaded and it's gonna look wonderful. There, you have it Facebook. Integration Twitter. Integration Instagram. Integration, and a, really big turbocharged - Lightroom for, your WordPress. Website, hey. Thanks so much for joining me for this episode of exploring photography make, sure you do a few things make sure you click the bell so you get notifications you, can see when we upload videos it's, almost every single day, also make sure you check out the description in this video you can see all of those links and if you haven't subscribed, subscribe, right. Now thanks. Again for joining me I'm Mark Wallace and I will see you again next time.

2018-09-10

Show video