Launching a WordPress Product in Public: Session 26

Transcript

In this podcast episode, Cory Miller and Corey Maass discuss the progress and updates on their project. They talk about refactoring the app using React and the importance of simplifying the workflow and talking to customers to understand their needs. They also discuss their approach to building products and the importance of conviction and belief in their work. They touch on topics such as creating visually appealing images, using presets and templates, optimizing images for SEO, and the potential for AI-generated content. They also discuss the challenges and possibilities in marketing and accommodating different users. The episode ends with plans for future improvements and excitement for the project’s progress.

Top Takeaways:

  • Template-Based Design: The platform allows users to create templates for content design, making it efficient and consistent. These templates can be customized to create different types of content, such as social media images and featured blog post images.
  • AI Integration: The conversation mentions the potential integration of AI to automate tasks like image generation and text summarization. This would save users time and enhance their content creation process.
  • Column-Based Layouts: The platform offers a user-friendly approach to design with column-based layouts. Users can easily drag and drop elements to create layouts without requiring advanced design skills.
  • Testing and Feedback: Corey Maass is in the process of testing the platform and seeking feedback from users, including Cory Miller, to identify and address any bugs or issues before wider deployment.

Mentioned in the show:

You can follow Post Status and our guests on Twitter:

The Post Status Draft podcast is geared toward WordPress professionals, with interviews, news, and deep analysis.

Browse our archives, and don’t forget to subscribe via iTunes, Google Podcasts, YouTube, Stitcher, Simplecast, or RSS.

Transcript

Corey Maass (00:00:04) – The tubes. You? Tubes? Yeah. Yeah. We’re on 26.

Cory Miller (00:00:09) – Good, because I don’t.

Corey Maass (00:00:14) – Streaming live. And I heard it said it stopped recording. Do we care?

Cory Miller (00:00:18) – We do. Three, two, one.

Corey Maass (00:00:24) – Bah bah bah bah bah. Welcome back to the Corey and Cory Show.

Cory Miller (00:00:32) – What a great jingle.

Corey Maass (00:00:36) – I totally wrote it. And it doesn’t it totally doesn’t sound like every other jingle ever written. We’re watching a new cop show. I think it’s on Netflix called Swat. And yeah, it’s good. It’s like some of it’s a little cliche or a little, you know, banal, but like it’s it’s totally entertaining. But I’ve actually started letting the intro play because it’s so A-Team, you know, 80s action cop. And I haven’t heard an intro jingle like that and for so long that I actually enjoy it. 

Cory Miller (00:01:23) – Yeah. We’ve watched some episodes too. It’s pretty good. The guy that played he’s on a Criminal Minds is the lead, and I really like that actor.

Corey Maass (00:01:32) – We couldn’t we couldn’t watch that one. It was a little too violent. Like Swat people get shot and they fall down, whereas like Criminal Minds, they were like being tortured. So the fine lines. Anyway, this is not what we are here to talk about. We are here for at long last, after months and months to finally do be able to build our presets. And so I will share my screen.

Cory Miller (00:01:59) – Episode 26. Not bad.

Corey Maass (00:02:03) – I know you’re not kidding, but it does sound funny. 

Cory Miller (00:02:09) – No, I think. It’s it’s a it’s really shown the actual journey. You know, maybe there’s some immortal people, superheroes that can build a product in, like, a week. With onesies that we’ve tried to do and then have like, a wizard hat about products. But honest is the other 99.9% of us do it this way. 

Corey Maass (00:02:35) – And and and and as we’ve talked about, I’ve actually now built it three times, not literally, but like, you know, built a working MVP but didn’t use any sort of frameworks.

(00:02:49) – And then and and sort of I mean, the good part was I proved that the tech worked, that we could generate images and that kind of thing. And so I could reuse chunks of that code and a lot all of that product design and thinking but switched over to react rebuilt a lot of this stuff, copy paste, edit And then I think as I talked about the last time we we had one of these calls, I was like, Oh, I went way too far down various rabbit holes and have since gone back in and ripped so much stuff out, which is also helped me define a bunch of other things in terms of like, Oh, what’s the simplest way to do this? Like what’s, you know, just create an image, save an image. Like it doesn’t have to be perfect in the way that like connecting all the data and storing ten different data points so that you could walk back and, you know, did it. It’s like just just save images. So in front of us we have the a blank slate essentially creating an image. (00:03:58) – So I think we use we’ll use open graph images as the template or as the default size and shape to start with. So I don’t think you’ve seen much of this revision. But the focus now is on. Like before. Like I think I said I was the focus was on kind of like a blog post, like building a blog post. And now the focus is on creating images and saving them. And if you want to save as a project or a template, you can, but the focus is on you come in and you’re like, you know, pick, pick a post and there’s a little icon that tells you if it has a featured image or not, but so that you can come in and say, okay, add a background image of the featured image and we get an error. But and this is why I wanted to do this on my computer. Um. These are all updates that I was doing last night and kept telling myself that I was going to be sorry. Um.

Corey Maass (00:05:22) – Let’s try that again. Yeah. Background image. Guy that has a background background image. So. I think this is the default template. As we’ve talked about, like a full. Full image. Or full. Yeah you’re featured image as OG image. So just sort of to illustrate the the connection here, I’ve got a placeholder post. A little Lorem ipsum that has a featured image that is somebody’s desk. And so by default, we can we can either stick with just this. Just the featured image. Or we could take it further and and do something very simple like the post title, either in the center or what I find myself doing is. Bottom left and adding that gets under formatting. Nope. Special effects. Background color.

Cory Miller (00:06:50) – That is awesome.

Corey Maass (00:06:54) – So something like that, right? Like dead simple, but already it’s. It’s the featured image plus. All right, so. Save as. So this is the fancy new. This is what you helped me with in one of my midweek Corrie help calls. We now have a save it as a featured image.

Corey Maass (00:07:22) – Save it as a open graph image. Save it as the site open graph Image Project Template save. So that’s one. So then we’ll call that. The fault. Post template. Cool. One down, 15 to go. So this is where now we get back into the slides that you designed.

Cory Miller (00:07:54) – Go down to like 16, I think. Oh, well. Yeah.

Corey Maass (00:08:04) – Yeah. Um.

Cory Miller (00:08:06) – Just a basic OG image, but, see, keep going down a little further, please. I think when you get close to like 20, maybe 23. Keep going. These are all just the site wide type templates. Keep going. See? See if I can find it. Look at 32. But we probably want to do we want to start with the basic ones. Like you’ve got this basic one featured image text on top. Yep.

Corey Maass (00:08:42) – Um, yeah. And I don’t have devices. I’m calling them devices, but I. But other people were calling them mockups. So we may, we may change the name to mockup, but I don’t have the device screenshot part built yet.

Corey Maass (00:08:57) – Rebuilt yet. So we’ll be sticking with more something like this where like inject image and then text. Yeah.

Cory Miller (00:09:07) – Um. Oh 36. This is the more complete.

Corey Maass (00:09:16) – So let’s yeah, let’s start with this one. Let’s see how it goes. And then we can always walk, walk back to other, simpler ones. Okay. So create one. Did I show you this fanciness? So. Okay, so one of the. Things that I walked back from. An early version is looking at all of our examples of. OG image. Me a lot of this stuff is. Really dead. Simple. Um, and then the other one we really got a lot out of was Dog Gallery. Looking at all of these, I was like, and there’s ways to fake this stuff, right? If you create a background image with complexity, you can make it look like anything you want. But as far as like simple layouts, I was like, all of these are either one column. You know, logo, text, image, logo, text image or two columns.

Corey Maass (00:10:28) – And I was like, okay, so just for the sake of the of something we haven’t thought about, later we will support three columns. And so I have this, this fanciness over here. So if you move your mouse over the image and you click on the button, now you have two columns.

Cory Miller (00:10:45) – That’s great.

Corey Maass (00:10:46) – Ooh. And you resize them by dragging. Ooh. So. This is where we said, looking at our mockup, we have two columns. So in our left hand column. Left column and you can click to to navigate around OU. Let’s give this a. Um. Background color. Make sure it works. So let’s do something sensible. Oh, that’s having some issues. What is your problem? Oh, because I changed the scale of it. Oh, no, that’s. Okay, so we will just pick something. Red, Green. Blue. Zero zero. Go away. Zero. F. So blue. The bugs need to fix. Three. Three There’s a nice blue.

Corey Maass (00:12:15) – We’ll give it a transparency. I guess that’s purple. Um. There we go. Sure.

Corey Maass (00:12:24) – So we’ve got a column with a background color. I will have to fix that. And then in there, we want, um. We have the post title. So were you thinking, Oh, business of WordPress is like name of the site?

Cory Miller (00:12:44) – That’s the name of the column, I would say.

Corey Maass (00:12:49) – Oh, like. Like article column. Series of articles.

Cory Miller (00:12:53) – Yeah, but it can also be like, the headline for a post.

Corey Maass (00:12:59) – Right. So if this was like my put. Um. I don’t know why that background image came back. There we go. (00:13:20) – Then there’s the name of it. This is so weird. It’s copying all of the attributes from that other template. That is so strange. I haven’t actually seen this before. I don’t know why. It’s. Doing that. Crap. Okay, hold on. Let me get rid of the scaling, and then my color picker will just work.

Corey Maass (00:13:47) – Um. Oops. Reload. You want to know why this is? Copying attributes from another. Change this to up yet comes back. That is bizarre. Let me just second a little bit to at least a little debugging. Oh, I see why. I see why. Ha, ha. Now it’ll be. There we go. Okay, so that’s a goofy thing. Got to fix. Okay. So we wanted to add a second column. We want the first column to be somewhere in there. Let’s see if this works better now. Yeah. My color picker now works so I can pick a nice blue. Let’s go with teal. Left column. We want it add. Um. The text. So the post title. Again. Let’s go with something like that in case it’s a little. Longer. Um. Formatting line height. Kind of tough to make it all fit on one line. If it’s big. So we’d have to play with that. But anyway. Okay, so then.

Corey Maass (00:15:42) – Um, we add an image. Below. So right now I don’t have I didn’t get to author Avatar so I will update this when we save it as an actual built in preset to be the author avatar. Um. An image lost all of its other attributes. That’s strange. I love live demos. Anyway. And then the other thing we wanted was the logo. Oh, so I didn’t set that yet. So if we do save as project template settings, OMG Sitewide logo. So this is where. Um, let’s actually use the post status logo. So I only have like the post status infinity symbol. Do you have a version of the logo with the text? Yes. One of the things that I think I’m going to introduce is. Originally. So it’s kind of like how WordPress has a site icon like that that you’d set in your in the. What do they call it? The. With your themes and it becomes your fave icon. But I think we’re going to have the option of being able to upload.

Corey Maass (00:17:25) – A number of logos. And then you can choose choose which one you want essentially, rather than having to go get it from the media library.

Cory Miller (00:17:48) – Realizing. Let’s have one immediately with a white text and.

Corey Maass (00:18:06) – That’s fine. Then I’ll just use this guy for now.

Cory Miller (00:18:09) – Yeah. I got you something.

Corey Maass (00:18:19) – Yeah, we can sort of pretend that that’s. So go. Go back here. Let’s replace it. Yeah. So there you’ve got post status. So we’d pretend that that had a transparent background.

Cory Miller (00:18:48) – I thought it did name.

Corey Maass (00:18:54) – Again, its fine placeholder for now. And then. Okay. So then. Right column. Week of. So this could be. Oh, there you go.

Cory Miller (00:19:12) – Ignore it. Don’t think that works either. Well, maybe it does.

Corey Maass (00:19:15) – No. No, it does. Yeah, it’s. It’s white with a transparent. So we say if we go to settings. Update the logo. And again, this is why like I was trying to work this out and Lindsay helped me figure this out of she’s like, you know, instead of just one, one ultimate logo, like just in and instead of instead of losing your because I think we all have this right, Like you upload ten different versions of your logo to the media library and then you have to try to go find them every time.

Corey Maass (00:19:48) – And so my thought was like, okay, we’ll use the site icon and it defaults to if you already have one set in the customizer, then it’ll pull that in. But you can obviously set one here. But I think we’ll say, you know, the same way that in here you can set like default fonts, you can also set default colors like brand colors. There’s another little quirk going to fix. Um, but we’ll, we’ll have it so you can set brand logos and so then you can choose from your different logos without having to dig them out of the media library. Um. So that’s now white. Cool. So then we go back to Ong and our template. Yeah. And so now we’ve got post status as white. So that looks better. Make this a little darker. So it stands out more cool and then in the right column. So it’s like if if the left column is the title of the series of articles, like in your example, you had week week six, like if this was our blog or our this video series, we could say episode 26 or something.

Corey Maass (00:21:08) – I feel like you could use I don’t think this is actually set on the post, but if you had. Um. Like if. If. Hello, world. Let’s do this. We go. So hello, world. What was your example? The Business of WordPress Roundup. So we’ll call it WordPress business. Ground up. And then if excerpt, let’s say, was week 26. Right? Think we can do this? Save your changes. Refresh. So WordPress Business roundup. Oh, it doesn’t have a featured image. I have a picture of a person. So again, I think this would be the author. Right. Which again, I don’t have, but. Um, I will build in documents testing image of a person. The left column. Boop, boop. So there you go. WordPress Business Roundup. That looks weird. But anyway. And then in the right column, we’d add text. Let’s use the post excerpt. So week 26. Add a section text. So this is probably actually would be the excerpt, right? Like your bullet points probably are generally actually the excerpt and WordPress doesn’t have a concept of a subtitle.

Corey Maass (00:23:06) – So that’s something to think about.

Cory Miller (00:23:10) – So from an SEO perspective, that’s interesting because we could tell people like make your exert, you know, like best practice would be making like these bullet points. Um, we should mention the Yoast about this, but hey, then that could be auto generated. But from my perspective, I want to make sure that’s right. But. That’s pretty cool way to do that because that’s what I tell this particular author. All our authors is do that too long. Didn’t read bullet point list in excerpt and then it gets pulled into featured image.

Corey Maass (00:23:50) – Yeah and so that yeah it makes sense in that concept so rather that so tweaking this design you know you’d almost have so the left hand column is. The summary of what you’re looking at. It’s the it’s the name of the TV show we’re watching. And then on the right is this week’s blurb or what have you. So we would do so you have Lorem ipsum. Um. Oops. Update post. There we go. So killing Excerpt.

Corey Maass (00:24:29) – So the excerpt, you know, automatically is either what, the first 55 words or you’d say. In this week’s article we cover. Lorem ipsum. Update. So then over here. Think of just jump back and forth. Yeah. So like in this week’s article we cover Lorem ipsum up at I’m at and then you’d have add a section text. Or you’d say. Site URL, right? But it’s like if it was an actual button, it would, but so you’d go custom text read. It’s doing something goofy. Read more with. Text color. No special effects. So you could sort of fake a button. Read more. And then let’s add a section called Logo. Oh, but see, here I’ve got the white one as the site logo. So let’s do something different. Let’s do your. What? Do we need it? No, we don’t need it. Sorry, I’m jumping. Looking too far ahead. So there you go. Oh. And so what might you know for this use case? What might happen is the.

Corey Maass (00:26:47) – The title of your pro your post. Is probably going to be WordPress Business Roundup. 828. And obviously we’re sort of making up the use case, but like that it give you. Give you more or less what you need.

Cory Miller (00:27:12) – So if we do the custom text on the right side, we can do bullets. Do they have to do ul la la or in HTML or.

Corey Maass (00:27:28) – Um, no. So actually, I don’t know if that’s true. I’m lying to you. Go to the right column. Post excerpt. Right, because excerpts don’t support HTML. So if you wanted to. Change this to? I know I support multiline for some reason it keeps kicking me out when I try to blur it. So what I’m curious about is. Let’s go. Here. That’s. Yeah, because it doesn’t copy the bullets. Okay. So no, so that it supports like basic formatting, bolding and stuff like that, but it doesn’t currently support. Um. Bullets. Stuff like that. So we’d so we’re going to want more of like a rich text editor.

Cory Miller (00:28:31) – Think if it had bold italic. And then bullets. Great. That probably. Catch the common use cases. Not like you have to do tiny MCE or anything.

Corey Maass (00:28:49) – Right. And that’s. Yeah. And that’s why I grabbed this library. I was like, I want to at least do multi-line so you can say you can, you can write multiple paragraphs in here and if you wanted to do bold and italic.

Cory Miller (00:29:04) – Can you, can you even just do asterisks. This one. Yeah. Like you can kind of get.

Corey Maass (00:29:11) – Yeah, you could totally fake it. Read more. This is the button. So I’m in the wrong place anyway. So, yeah, I mean, like right now we’re pulling in the excerpt, so there’s no formatting. But in theory over here in your excerpt, you could say we cover Lorem ipsum. I’m at. Um, I’m curious if. I think I don’t think this will translate like line line breaks. From the excerpt. No. So we’d want to pull that in because excerpts, excerpts are not, you know, in in WordPress, excerpts by default have no support for formatting line breaks or lost that kind of thing.

Cory Miller (00:30:08) – Don’t you know? Now I’m thinking about I don’t know if it needs to be expert. Should just be expert. But having the bulleted list. Yeah. Custom text bulleted list. Yep.

Corey Maass (00:30:25) – Yeah. Which. And so. Sorry.

Cory Miller (00:30:28) – Go ahead. So where this comes from is I’m working with my marketing assistant team on their own social stuff and I go blend featured image with thing, not make it more useful. You know, part of our conversations and the way I think about it is like, take three things out of the post. Maybe they’re the subheads or whatever it is, and that’s where I tend to go, like the listicle type thought. Like, here’s three things you’re going to see in this post. And to me, this could be just me. But, you know, I prefer the bullets help my mind go. Oh. Yep, yep.

Corey Maass (00:31:10) – Oh, absolutely. Yeah. And so I’m thinking of this as. Like a block quote. And this is one of the other sort of things that we had talked about doing at one point is.

Corey Maass (00:31:23) – I don’t. I don’t want. Save your changes. There you go. So we’re sort of using an excerpt here to fake a blockquote. Right. And we can get into things like, you know, if you have a text, I call this a section. If you have a text section, then I could add a formatting thing down here that says like, you know, add, you know, big fancy quotes that are 50% opacity behind in that kind of style that you see everywhere. Right? Um, and then, and we can also we also talked about like this list of, of text sources right. Is already long. So you know, you’ve got things pulled from the site, the title description URL, you’ve got things pulled from the post and, and when we and down the road like we’re going to get into pull in an ACF field so you could add in theory and I’m not suggesting this as a solution, but it’s like in theory if like on one of my magazine client sites, right, they’ve got so in addition to a title, I’ve added an ACF field in the industry.

Corey Maass (00:32:39) – You know this, it’s called a deck. I still have no idea why but the deck, the subtitle of a of an article. And so being able to pull that in, Great. Okay. So we’re this list is already going to be long, so I’m going to have to build some sort of little widget that’ll make it easy to select from a lot, a lot of sources. Um, but one of those sources could be like, go scan the article for block quotes because then this is what we talked about previously, you know, and or down the road we introduce AI and we say, you know, go read the article and generate three bullet points. Um, and you know, and pull it in. But as a starting point. Boom. Template number two. Do you agree? A little padding. I’ve been getting fancy, man, Like as I’ve talked to other people and they’ve shown me, like, what they’re doing. Missing. Who? Oh, I broke it. Okay, So we’ll leave it alone anyway.

Corey Maass (00:34:02) – So there’s. There’s template number two. It’s great. Two. Based off of slide 36.

Cory Miller (00:34:13) – Look at number 35. Okay.

Corey Maass (00:34:21) – Right. This is the other one we came up with last week. Okay, So moving on. Actually create it. Don’t know why it’s pulling in that template. So we’ll start with oof for clarity query.

Cory Miller (00:34:36) – So when you’re selecting OG image, that’s probably the most versatile thing for all the social networks. Is that correct? Correct. Okay.

Corey Maass (00:34:51) – New channel. This was working. There we go. Okay, so now we say.

Cory Miller (00:35:00) – Basically, I’d say headline on the top.

Corey Maass (00:35:06) – Yep. Trying to. Yeah. So we’ve got text. So it’s one column. Text. Text. Text. To some of this we don’t think we can do yet. I should have looked at this. So what we can do is. Um. How can we fake this? Background color. Is that blue?

Cory Miller (00:36:02) – Oops. Or you can make any color. I think I was just finding stuff.

Corey Maass (00:36:06) – Yeah, sure. I just. It’s like. It’s fun to see how close we can get. Black. White. Why isn’t that working? There we go. Blue. And then the column which has the site title. Or the post title in this instance, launching a WordPress product. Session 24. So if we did post title WordPress Business Roundup. So again, what I think I don’t have here or I think the background color is going to. No, that works. Yeah. Okay. And then. The third one is again, our custom text that says. Oops. Read more. There’s our call to action. The second one again might be the excerpt. And then. On the site, we add a logo. There it goes. Post status. So bottom right. So what I need to add to this center column is, Oh, it can top a line. And over here, if I kill the. Not padding. Right. Okay. So the the right now the background color on a text element only extends as far as the text itself.

Corey Maass (00:38:24) – Okay. Not side to side. So I’d need to update that and then I have no way to do like a block of color on the bottom. To just be like this still doesn’t look bad with the logo in the bottom right and stuff, but it’s not what we want. So I’m going to have to figure out like formatting options to do. Block of color. Block of color. Block of color. Like this. Like I know that these are not these are arbitrary, but I like that it’s, you know, pretending you’re the client and you’re coming to me and going, this is the design requirement. Make it happen. Yeah. So this is a really good exercise. Okay. So save as template. And then this one. Slide 30. Need to work. Okay. Oh, the other neat one that I had here. Oh, this is the thing that broke. Oh, no. Border. Reporter Oh, yeah. This is the thing that broke. Okay, so not border.

Corey Maass (00:40:03) – But yeah, I mean, just looking at those three side by side, like if you if you walked in and you were like, create a new image and it had essentially these three, you know, the first one done done more correctly but had these three side by side. Like you’re already winning. Yeah. Which was exactly our goal.

Cory Miller (00:40:38) – Look down here.

Corey Maass (00:40:42) – I wonder if we.

Cory Miller (00:40:49) – Yeah, like number 40.

Corey Maass (00:40:59) – Oops. Oh, and so when you save a save a project as a template, they then show up in here. Oh, that’s why I keep seeing why it keeps reloading. So I need to put a little star next to this or something, because your templates show up first, and so you actually have to come down here to say open graph. That’s why it’s loading them. So yeah, these need to be differentiated anyway. Okay, so we’re loading. A blank. Hello? No, it won’t let me choose any. There we go. Twitter profile. Sure. Okay.

Corey Maass (00:41:49) – Another nice little bug. Okay, so we were talking about kind of column. So a column right now can only have a background. So I feel like for this that you’d want the column to have a background image. So we could sort of fake this with. Making. Post featured image looks like that. Um. So we need we need a background positioning, it seems like. But I also again, I think the better solution here would just be a column could have have a background image because. So if we went to column two because the way to fake this would be. Sort of like that.

Cory Miller (00:42:58) – Now you put the image of the author in one of those columns of previously.

Corey Maass (00:43:07) – Right. But if I add an image. Section and image element. I don’t have a way for it to fill the whole box.

Cory Miller (00:43:21) – Got you.

Corey Maass (00:43:22) – Because it’s more that it’s like it’s meant to just be floating in space. Like a logo or, you know, like if you. Pick something from the media library.

Corey Maass (00:43:35) – Now you can do. Image size. Okay, so I guess you could. Oh, but it extends. I’ll need to fix that to. You can rotate it. Get all fancy with it. But doesn’t really accomplish what we want. So there’s no way to delete that section. Interesting. Oh. But my apparently my image sections are all messed up. But yeah, so it seems like we want. Columns need a background image, which kind of makes sense, and you need to be able to position it around, align it, you know, make it, make it big and then say, Show me the middle, show me the top left, what have you, so that you could get to because because the likelihood is you wouldn’t have an image. You know, the likelihood is that actual image is a wide rectangle. Right? And you’ve got a number of people, but you’re like, okay, let me zoom in on this one person and move it so that I can see the left edge of it.

Corey Maass (00:44:53) – Yep. Kill this. Um. But so yeah, if the if the left column had a image background for now let’s fake it with a background color. And then you had headline on the right. Column two Add text. So again, post title and a section. This would be post excerpt. And so this one would be smaller. And then you added. You could either do. A logo over all. Which might be better. Instead of a logo in here. Let’s kill that. And then start. We’ll do. Options logo. Bottom, right. But again, we’re sort of running into the the logo you sent me as white. So if I did. Oops. You sent me that one. That was all black. Oh, wait. Let me take the white one. Getting fancy over here. I’m opening Photoshop. And I’m going to say. Create a black version of the logo, essentially. Um. Color overlay. (00:47:08) – This to gray export PNG. Download.

Corey Maass (00:47:17) – Do you spell gray with an E or an A?

Cory Miller (00:47:29) – I was trying to get it to you and I dropped it in a folder.

Corey Maass (00:47:33) – It’s okay. I created a gray version. So.

Cory Miller (00:47:41) – Did it again.

Corey Maass (00:47:52) – Something dead simple like that. Yeah. (00:47:57) – Yeah. Cool. And then a little vertical spacing. 

Corey Maass (00:48:00) – And then a little vertical spacing.

Cory Miller  (00:48:05) – Yeah looks good.

Corey Maass (00:48:07) – But yeah. So if that if that left column I mean even even this right like if that left column. By default was a brand color the status orange. But if the Post had a featured image that got auto populated in there. You’re. You’re still good to go? Yeah.

Cory Miller (00:48:42) – Number 40. You wanted to name that. Thank you.

Corey Maass (00:48:51) – I’m going to charge you extra for having post status logos on all of our presets.

Cory Miller (00:49:12) – I mean, the first one you did is probably going to be the most popular. Yeah.

Corey Maass (00:49:20) – Dead. Simple. Just works. Easy peasy. But it’s also mean what I love about it too. I Wish Borders were Working is one of the customer interviews I did. They had something similar to this.

Corey Maass (00:49:37) – I think they had it centered and then they had a border. And so the border was just kind of floating and it just adding like a one pixel white line rectangle. Suddenly a classed it up. You know, it’s those one of those just little, little things.  See if I can. (00:50:06)  Come on.

Corey Maass (00:50:10) – Yeah. Doesn’t like me right now. Think it was the border with it died. Yeah. Right. (00:51:02) – Oh right. Oh, come on.

Corey Maass (00:51:09) – Just work. (00:51:15) – No. You know you want to.

Corey Maass (00:51:30) – Here it goes. Hey. Hey. (00:51:51) – Oh, I know.

Corey Maass (00:51:55) – Yeah. To like that mean.

Cory Miller (00:51:58) – Like nice dude.

Corey Maass (00:51:59) – Right? Like that was one of those things. Like, he showed me what he does. I was like, Oh, just. Just adding that border over the. Over the image. Like just classes it up somehow.

Cory Miller (00:52:12) – Yeah, the only plus one I’d even think about with that is the logo. That looks nice.

Corey Maass (00:52:20) – Which we can do. (00:52:22) Add logo.

Corey Maass (00:52:24) – Top, right? Yeah. So there’s your post office logo, but it’s in white, so it’s kind of hard to see. But, I mean, you get the idea.(00:52:36) Yeah, There you go.

Corey Maass (00:52:37) – Post status in the middle. So it’s like if it if you were previewing this. Oh yeah. With a different. Different guy. Like, then it would jump out.

Cory Miller (00:52:57) – Think how Canva uses that as they like. You’ve already started it, but has a brand kit.

Corey Maass (00:53:04) – Hmm. (00:53:04) – Oh, right.

Cory Miller (00:53:06) – And maybe if there’s, you know, tooltip instructions, like you probably want to upload. Why don’t light on dark? Dark on light logos?

Corey Maass (00:53:23) – Yeah. So yeah, right now you can add fonts coming, including Google fonts. See if it. (00:53:33) – Changes.

Corey Maass (00:53:35) – Break everything. Oh boy. No, really broke it. Okay, never mind that. But anyway, yeah, you can upload, you can select a handful of fonts. So they are the first option.

Corey Maass (00:53:53) – It’s probably going to break because I know selected.

Cory Miller (00:53:56) – And it looks really nice. I know the font doesn’t pop, but still looks really nice. That first template you did. But it shows the value of the image.

Corey Maass (00:54:10) – Right? Right.

Corey Maass (00:54:13) – Yeah. And yeah, getting into some simple. It’s like you want you. Way ways to make an overall design work well in graphic design is like, you want something fat, you want something skinny, you want something light, you want something dark. And so that’s why like adding the the single pixel border works over the chunkiness of the text. Your logo post status logo is is finer and rounder and so it complements like the squares elsewhere. Well, if somebody else’s logo was a square, then you’d want to add something round somewhere. But the way that I’d, I. Have this. Now, you can sort of tell from the these these dropdowns. Right. Is like and this is this is as I explained a few calls ago, like this was the call, the reason, the main reason for needing to reformat or rebuild this thing is with this setup, I can add infinite attributes.

Corey Maass (00:55:18) – I call them. Which is, I mean, nerd speak, but basically, like I can add infinite options for formatting, for colors, for background colors, for, you know, rotating mean basically anything we want. So we can have all of these different options, including like, oh, if you want to make things rounder one, you could, you could choose a around or font, but you could add border radius so that you’ve got rounded corners on, you know, so that Read more would become more like a button because you’ve added, you know, you can make it round like how people think of up here my save your changes round, you know it looks like a button. So getting into stuff like that and then even options down the road of like there’ll be a for a text element, there’ll be an option here that just says like make it look like a button and then you can tweak it and make it more of a more of that call to action style. Like lots of bugs.

Corey Maass (00:56:32) – More than I swear I had yesterday. But, you know. But enough to get where we need. 

Cory Miller (00:56:42) – Lindsay’s client sites because. And how they how they’re actually doing things. Real quick.

Cory Miller (00:57:02) – Dang. Sorry. Yeah. And then I.

Corey Maass (00:57:10) – Think, you know, and one of the things that’ll work well here is. At least some of these templates will translate. So like this is shaped for open graph, let’s shape it. Say change the shape for Instagram. And then. So then. Background image size. So again, so it makes sense to me that we want the to be able to move that background image around. So I’ll do I’ll get and I’ll do a little something like this where it’s like, okay, show me the top left, bottom right, whatever. But you know, instant resize for Instagram, that still looks great. And so you could you can do this, resize it, just save the image to download the image, throw it on Instagram, your template stays set for open graph.

Corey Maass (00:58:00) – Or you could what I want to do is a save, basically save a copy. So then you could create your perfect template and then resize it for Instagram and then save that as your separate Instagram template. Yeah, in an hour. (00:58:25) – We did it. 

Cory Miller (00:58:30) – Cool. All right. We may next time plug in some of these live clients stuff like she’s got. (00:58:39) – This mental health. (00:58:40) – Center, for instance, and looking down through here. It’d be cool to kind of use this as a test because it’s like. Subhead content with bullet points, multiple bullet points I’m looking at. Yeah. Every section has a bullet point and like the title is like, what causes an anxiety attack. Um, anxiety versus panic attack. What causes what to do during an anxiety attack like. See, this section she’s got here is what to do during an anxiety attack with four bullet point five bullet points. That could be on that. One of these others where we’re talking about the bullet points and like when you’re talking about shifting it to Instagram, There you go.

Corey Maass (00:59:31) – Yeah. (00:59:32) – I mean, and how powerful is that? Like in one card you’ve gone from, you know, maybe, maybe a an image that says what to do during an anxiety attack, which is not helpful. Let’s click baity like it’s not wrong, but like if you’re Googling, I’m having an anxiety attack. What do I do? And a card comes up that actually shows you like, Here are the four steps to take. Yeah. You’ve won, you know. And yes, hopefully they still click through to the article like, let’s not fool ourselves. We’re on the Internet. We want traffic. But. I love the valley. The. The inherent value of that. Yeah.

Cory Miller (01:00:18) – Yeah, just seeing that angle is so interesting because they create the long form content content for these clients and it’s got was skin down to that one article. When I go there’s one two how to prevent anxiety Attacks. So like there’s three what causes like there’s three Instagram social posts easily out of one post? Yep.

Cory Miller (01:00:45) – And then OMG IMG makes it easy to really quickly create that.

Corey Maass (01:00:51) – Yeah. If we can figure out the patterns of. How do you how do you pull that content out of an article? Yeah. And obviously, as a human, you could. Copy paste. Copy paste, copy paste, copy paste, download, copy, paste, download. But like as we talked about, if it’s, if it’s formatted as a blog post, I can automatically pull it out. Maybe if it’s a bullet point list, we could automatically pull it out. I just don’t. I’d be worried that most articles don’t necessarily conform to that, but block quotes for sure. The excerpt for sure is like worst case. It’s the first couple of sentences, best case, best case. They are actually like on my music blog, that review website that I always talk about like the excerpts are actually I go through the article, I find one of the best quotes and then I say, you know, as reviewed, read the full review or something.

Corey Maass (01:01:56) – And so it’s like the excerpt is, is intentionally set would be the way to say it. So we if we can figure out those kinds of patterns and then again down the road, I forget it just two clicks and it’ll just figure it all out for you. Um, but I think what, you know, my rant from a few calls ago was down the road. So one of the next I mean, aside from all the little details fixing the bugs right and adding starting to add more of these styles features that we talked about like, okay, we need to be able to do a block color all the way across, yada yada. It’s like that’s, you know, the long tail inside of the builder. But it but as I ranted a few weeks ago, like I want to, I also want to go sideways where from the whole product where you pick one of these and and what you what isn’t built yet is the option to say if I when I post gets published automatically generate the image.

Corey Maass (01:03:00) – Using this template. And so you don’t even have to go into a post and create an image. It’s just done at publish time. And and then and then the step beyond that is to say generate use these three templates, generate these three images when a post gets published. And the first template is the card image. The second template is the is an Instagram square that has blockquote has the block quote as the featured quote or has the excerpt excuse me, as fill filled in like we show in one of these templates. And then the third one has, you know, look for a block quote and pull in a block quote. And so the next time you go in, you’re like, Oh, there’s already all of these amazing images sitting here waiting for me. I can now download them and upload them to Twitter, Instagram, whatever. And there’s going to be a. It’s going to get more complex, obviously, as we introduce that kind of automated stuff. But but that’s you know, for me, it’s way back when we were still talking about Crop Express, we were talking about saving steps, making your workflow less painful and then ideally more fun.

Corey Maass (01:04:22) – But even starting with like, Oh, if I’m publishing a post, I don’t have to do these next ten steps. Holy crap, Time saved. 

Cory Miller (01:04:34) – Yeah. I was just looking at Canva AI. They call it magic, right? Real quick.

Corey Maass (01:04:40) – Yeah. Yeah.

Cory Miller (01:04:41) – The output of this is what we’re doing in this next iteration. But what you’re talking about with this is really interesting. Just a little thing.

Corey Maass (01:04:56) – Yep.

Cory Miller (01:04:57) – And there.

Corey Maass (01:05:01) – Yeah. It’s really neat. Like I finally got the. Photoshop has had in beta has had for a while the auto image generator and they finally released it publicly. I could never get the beta to work. And so I was like took a picture of like, we’re having a fireplace or we’re, we’re yeah, we’re having an insert put into the house gas insert. We’re going to design and build our own fireplace. So I took a picture of the wall, I brought it into Photoshop, and then I said, okay, Photoshop, create a fireplace with a mantel with two bookcases and white wood.

Corey Maass (01:05:43) – And what it created, what it generated was terrible. But it’s a start. You know, like this we are at the very beginning of of this kind of magic where it’s as it gets more sophisticated, you know, we’re going to be able to take advantage of this kind of stuff. And of course, like as I talked about after WordCamp US, so one of the first comments I got from people was not only are you able to edit. You know, do everything you just saw in the demo we just did, but click a button. And so instead of having to go to Unsplash or stock photo, whatever, whatever, you’re just like, give me a picture of a woman working at a laptop in a coffee shop. Boom. Great. Now do everything we just showed where you put the title of the post over it. You put your logo in the corner and you hit save and that’s your featured image. Like because it’s, you know, more and more what we’re hearing like we talk have talked nonstop about images.

Corey Maass (01:06:48) – But honestly, a lot a lot of the feedback that I’ve been getting from customers is actually the pain point is. Yes, once eventually dragging it into Canva, but is actually going and finding if if it’s not a news article where there’s an already a you know, where a photographer went to the fire and took a picture of the building or, you know, went to the music festival and took a picture of the band playing. If you’ve written an article, the ten best Ways to Optimize Your Productivity, you are now spending ten minutes on Unsplash looking for a picture that somehow represents productivity. So it’s cool because like initially I’m using AI. Little by little, more and more in my daily workflow. And obviously I’m blown away. Like I’m not I’m not cynical about it at all. I’m blown away with the possibilities. But I have not yet seen too many of the the work, the use cases where it’s like, this makes sense in my daily life, but little by little I’m starting to see things like a Photoshop integration, A Canva integration is like, okay, yeah, this is where it’s really going to enhance our lives.

Corey Maass (01:08:02) – And it’s not about doing the job for me, it’s about helping me do my job better.

Cory Miller (01:08:08) – Yeah.

Corey Maass (01:08:09) – And so that’s, that’s the next step of, I mean, we say next step, it’ll be six months or a year. We need to get this thing out the door in the first place. But, you know, when we get to the point of that magical iteration that has. Image generation and or text parsing and or, you know, write me a summary of any of that, any of those integration points. Amazing. Yeah. And it might even it might even end up being like, I know there’s people working hard to integrate AI into WordPress full stop. And it might even just end up being like something that’s built in, which would be amazing if WordPress if every blog post automatically already had a button that just said generate, generate a summary to be used wherever. Write write my excerpt for me, you know, then that’s done. Then we just take advantage of that. (01:09:02) – But anyway.(01:09:04) – The future. Yeah. My jetpack.

Cory Miller (01:09:11) – It’s tough, man.

Corey Maass (01:09:13) – Thank you. Yeah, I’m really excited. It’s been. It’s been a lot of hard work. It’s still full of bugs, but coming along Well.

Cory Miller (01:09:20) – I really do have to say this in very beginning, but the column and the dragging of the columns. Superb.

Corey Maass  (01:09:28) – Thank you.

Cory Miller (01:09:29) – That kind of stuff. Making it just easy. But they don’t have to find a dial, but just kind of moving things where they want. That’s really good stuff.

Corey Maass (01:09:37) – Yeah. Yeah. And that’s. I’m. I’m having fun. I’m trying not to make it. Make the whole thing too clever. I’m taking a lot of inspiration from, like, I use I use Beaver Builder as my my page builder of choice and, and then part of, part of the reason that I like it and liked it from the beginning when I was evaluating all of them was I was like a lot of my clients are not designers. They are non-technical people.

Corey Maass (01:10:04) – They can go in and build a layout because they’re like, once you sort of explained to them the concept of rows and columns, like There is a grid here, now they go, okay, I’m thinking in terms of vertical stacked things side by side and making them, you know, making being able to, to slide, to make the columns, change sizes. And so I’m trying to emulate some of that. Some of it’s again, it’s I worry about it being too clever, but I think it’s the quickest way to accomplish what we need anyway.

Cory Miller (01:10:41) – Love it. 

Corey Maass: Well, thank you. This was fun.

Cory Miller (01:10:46) – Thank you for all your work to get here.

Corey Maass (01:10:48) – We’re close for close. And the rest of the. I think, like, updates are now working. And so I’m actually going to start pushing like get it to where I think they’re most of the bugs are squashed push it online add another feature to push it online. So pretty soon I want to have you get it on Post Status.

Corey Maass (01:11:11) – Using it or not, but obviously hopefully using it, but at least testing those kind of basic like does it work as a plugin? Does it crash my site? Just what everybody wants to hear before I start sending it to other other clients and people who are. Have less skin in the game, let’s say.

Cory Miller: I like it.

Corey Maass (01:11:36) – All right, man. We will catch up soon.

This article, Launching a WordPress Product in Public: Session 26, was published at Post Status — the community for WordPress professionals.

Leave a Reply

Your email address will not be published. Required fields are marked *

Leave a comment

Your email address will not be published. Required fields are marked *