Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this course, author Joseph Lowery shows how to combine the utility of WordPress and the power of Adobe Dreamweaver to transition existing websites to the WordPress platform. The course demonstrates how to create new blog posts and pages, customize WordPress themes, and extend WordPress editable pages from within Dreamweaver. It also covers how to add Spry elements, add and customize plugins, and enhance WordPress-stored content with Dreamweaver's dynamic pages. Plus, a chapter on responsive design shows how you can adapt your layouts for tablets and mobile devices.
Naturally, you could include images in your blog posts. You'll need to make them available to insert, and you can do that right from the WordPress dashboard, either one at a time or in small batches. Let's start with a single image. I'm going to go back to my Pages, and then reopen Conference Schedule At-A-Glance, and let's add an image right to the top of the page, right next to the opening paragraph here. So, I'll put my cursor there, and then choose Upload/Insert, which is above the toolbar.
You can also click the small icon if you want, it doesn't really matter. And then let's choose Select Files. Now we're going to navigate to our exercise files Chapter 3 in the 03_04 subfolder. And within that is another subfolder called images, and let's pick up conference_venue.jpg. There's a small preview of it. You can see it's already sized to 180x180 pixels. It looks good. But as you'll see later, that's not really an issue for WordPress.
So, I'll click Open. And once I do that, you'll see the information down below. I can make some changes to it. There is of course a possibility for changing the title. So, rather than a lowercase title that has an underscore in it, let's make it uppercase, or initial uppercase anyway, and get rid of that underscore. And I'll put in some alt text. Let's call it Roux Academy Art Conference Venue.
You can also add a caption and description if you like. We'll pass that for now. Now, notice down here below those two fields, there's a link to the image. WordPress, when it uploads the file, has taken it and put it within the wp-content/uploads folder, and then it creates several new folders which are named according to the year and the month that it was uploaded. Right now, when I'm recording this, it's September of 2012. So it goes into that folder.
Now we can also, at this point, go ahead and choose whether we're going to align it left, center, or right. Let's go ahead and put it onto the left, and we also have the options for changing the size of it. Since full size is not that big, it's only 180x180. Let's leave it at those dimensions. Before we insert into the post, I want to show you that there are some other options that you have. So, let me scroll back up. And right under the image thumbnail is an Edit Image option. Let's click that for a moment.
And, as you can see, there's a whole range of possibilities here, including cropping, rotating in one direction or another, flipping vertically, flipping horizontally. And once you do an action, you also have the ability to undo the action, so these arrows will become active then. You can also scale or crop the image if you want. Moreover, you'll notice that for large images, there are thumbnails that are automatically created. These are brought into play for very large images, and you can either apply the changes that you've just specified to both of the full-size images, and the thumbnails, a thumbnail by itself, or everything but the thumbnail. Okay.
It looks like we're ready to go. Let's go ahead and cancel the Edit options, and then I'll scroll back down, and choose Insert into Post. And because we chose Aligned Left, if I select it here, you can see down below in the little tag selector like bar, there is my image tag with a class of alignleft applied to it, as well as several other classes. Let's go ahead and update the page, and then take a look at it in the browser.
So, that's working with images one at a time. But what happens if you want to make a series of images available for your client? You can upload several images at a time to what's known as the media library without putting them into any posts. Let's head back to the Edit Page screen, and this time, I'll click the Media icon. If I click it here, the Select Files dialog will allow me to choose more than one file at a time. So, I can select the first one, and then hold down the Shift key, and select the other two.
Now, we have all three selected, I'll click Open, and it quickly imports them all. To make any modifications, you click the associated Show link that you see here. So, let's do that for the first one here, artwork1, and that will open it up to the screen that we saw before. I'm going to change the title of it here from the generic artwork1 to something more specific. So, let's call this Self-Portrait by J. Jerome.
Now, instead of inserting the image into a post, I'm just going to scroll down and click Save all changes. So that will now show me what images are in my media library so far. And here you can see the four that I've added to the library, the one that I renamed which was from artwork1 to Self-Portrait by J. Jerome, artwork2, and artwork3. Now, let me show you how to add an image from your media library into the post.
So, I'll close the Add Media dialog box, go back to my post, and I'm going to put my cursor right between the two days that we have here. So again, I'll go and click the media icon here. Now, instead of choosing Select Files again which will allow me to upload files, let's go to Media Library, and then I'll choose Show right next to the Self-Portrait. Again, you've got the possibility for making all kinds of updates to title, caption, et cetera.
So, let's go ahead and add a caption here, so you can see how that works. I'm going to copy the title, and then paste it in the Caption field, and let's add a date in parentheses. Now, I want this image to be centered and not left, so I'll choose that alignment option, and let's scroll down and see about our sizing. Again, I still think it's still okay size-wise, and now we're ready to choose Insert into Posts. Now, I have my image there complete with caption. Let's go ahead and click Update, and view the page.
Now, there's my initial image, and there's my second image, centered as I requested, complete with a little caption that we see here. Now, the caption can be easily stylized with CSS as well. You'll find that with these demonstrated techniques. You can either add images to the site one at a time, or upload any number to be inserted as needed by your clients.
Find answers to the most frequently asked questions about Dreamweaver and WordPress: Core Concepts.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.