title
WordPress Featured Image Tutorial

description
In this lesson we learn how to register new "image sizes" which specify the size and aspect ratio of the image that WordPress should automatically generate. Join my full courses: https://learnwebcode.com/courses/ To view a complete list of the WordPress lessons in sequential order visit: http://learnwebcode.com/learn-wordpress/ Link to download .zip of theme files as shown in this video (note: this is not a "complete" WordPress theme yet and this download is only intended for educational purposes to dissect and review): http://learnwebcode.com/wordpress-featured-image-custom-size/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow me on Twitter for updates and cat pics: https://twitter.com/learnwebcode

detail
{'title': 'WordPress Featured Image Tutorial', 'heatmap': [{'end': 466.542, 'start': 435.197, 'weight': 0.797}, {'end': 639.345, 'start': 622.476, 'weight': 0.833}, {'end': 979.825, 'start': 926.431, 'weight': 0.838}, {'end': 1025.097, 'start': 1009.286, 'weight': 1}], 'summary': 'Tutorial covers wordpress featured images, including assigning them to posts, ensuring theme support, controlling image sizes using code, image customization, adding new image sizes, and cropping in wordpress, providing comprehensive guidance for image management in wordpress.', 'chapters': [{'end': 317.903, 'segs': [{'end': 49.797, 'src': 'embed', 'start': 21.869, 'weight': 3, 'content': [{'end': 26.633, 'text': "Number three, we'll learn how to assign featured images to posts from the WordPress admin.", 'start': 21.869, 'duration': 4.764}, {'end': 29.096, 'text': 'And number four, my favorite part.', 'start': 27.074, 'duration': 2.022}, {'end': 30.457, 'text': "we're going to roll up our sleeves,", 'start': 29.096, 'duration': 1.361}, {'end': 39.125, 'text': 'get our hands dirty with a little bit of code and learn how to have fine grained control over the different sizes of images that WordPress creates automatically.', 'start': 30.457, 'duration': 8.668}, {'end': 42.388, 'text': "So we'll learn how to provide a little bit of instructions for WordPress.", 'start': 39.545, 'duration': 2.843}, {'end': 49.797, 'text': 'And then, behind the scenes, when we upload a single image, WordPress will automatically create as many different versions of that image as we want,', 'start': 42.729, 'duration': 7.068}], 'summary': 'Learn to assign featured images and control image sizes in wordpress.', 'duration': 27.928, 'max_score': 21.869, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY21869.jpg'}, {'end': 86.81, 'src': 'embed', 'start': 59.784, 'weight': 1, 'content': [{'end': 65.071, 'text': 'A featured image is a single image that we choose to represent a poster page,', 'start': 59.784, 'duration': 5.287}, {'end': 69.637, 'text': 'whereas a regular image is something that we add in the text area of the post.', 'start': 65.071, 'duration': 4.566}, {'end': 75.284, 'text': "So, for example, if I go to the dashboard and click on posts, I'll choose this first one.", 'start': 69.997, 'duration': 5.287}, {'end': 84.149, 'text': 'A regular or standard not featured image would be something that we add in with the text, almost like a word processing program.', 'start': 76.727, 'duration': 7.422}, {'end': 86.81, 'text': 'We would click add media and then we could choose.', 'start': 84.389, 'duration': 2.421}], 'summary': 'A featured image represents a post, while a regular image is added in the text area. it is done through the dashboard by clicking on posts and choosing the first one.', 'duration': 27.026, 'max_score': 59.784, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY59784.jpg'}, {'end': 201.21, 'src': 'embed', 'start': 144.225, 'weight': 0, 'content': [{'end': 150.11, 'text': 'The key concept is that the featured image is a separate field from the main text of your poster page.', 'start': 144.225, 'duration': 5.885}, {'end': 154.834, 'text': 'And what this does is it allows your theme to do very neat dynamic things.', 'start': 150.43, 'duration': 4.404}, {'end': 156.656, 'text': "So let's move on to number two.", 'start': 155.355, 'duration': 1.301}, {'end': 162.401, 'text': "Let's make sure that your instance of WordPress theme you're using supports featured images.", 'start': 157.296, 'duration': 5.105}, {'end': 170.265, 'text': 'So if you go into your dashboard and you begin to edit a post, if you see in the bottom right hand corner a featured image box,', 'start': 163.061, 'duration': 7.204}, {'end': 172.706, 'text': 'that means your theme supports featured images.', 'start': 170.265, 'duration': 2.441}, {'end': 176.448, 'text': 'And if you do not see the featured image box, do not panic.', 'start': 173.286, 'duration': 3.162}, {'end': 178.509, 'text': "It's very easy to add that support.", 'start': 176.828, 'duration': 1.681}, {'end': 179.73, 'text': 'So behind the scenes.', 'start': 178.909, 'duration': 0.821}, {'end': 180.41, 'text': 'really quick,', 'start': 179.73, 'duration': 0.68}, {'end': 187.554, 'text': "I'm going to rip out all of the code from my theme that supports featured images and that outputs the different images in different places.", 'start': 180.41, 'duration': 7.144}, {'end': 190.537, 'text': 'And then, when I come back, once that code is removed,', 'start': 188.314, 'duration': 2.223}, {'end': 195.823, 'text': 'we will rewrite all of that code together to learn how to add featured image support to your theme.', 'start': 190.537, 'duration': 5.286}, {'end': 196.704, 'text': 'Welcome back.', 'start': 196.124, 'duration': 0.58}, {'end': 201.21, 'text': "So I've removed the code that both supports and outputs the featured images.", 'start': 196.824, 'duration': 4.386}], 'summary': 'Featured images are a separate field in wordpress themes, supporting dynamic functions and easy addition if not initially available.', 'duration': 56.985, 'max_score': 144.225, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY144225.jpg'}, {'end': 254.995, 'src': 'embed', 'start': 226.352, 'weight': 6, 'content': [{'end': 228.634, 'text': "So we'll say add theme.", 'start': 226.352, 'duration': 2.282}, {'end': 232.686, 'text': 'Support And what do we want to add.', 'start': 230.225, 'duration': 2.461}, {'end': 238.028, 'text': 'We want to add support for featured images or thumbnails so post thumbnails.', 'start': 232.906, 'duration': 5.122}, {'end': 241.529, 'text': 'Now technically this line of code will do the job.', 'start': 238.968, 'duration': 2.561}, {'end': 243.11, 'text': 'This is really all we need.', 'start': 242.01, 'duration': 1.1}, {'end': 248.032, 'text': 'But this is not the officially sanctioned WordPress correct way of doing things.', 'start': 243.27, 'duration': 4.762}, {'end': 252.614, 'text': "So I'm going to cut this into my clipboard so I can paste it in in just a moment.", 'start': 248.512, 'duration': 4.102}, {'end': 254.995, 'text': "But here's the actual correct way of doing things.", 'start': 252.914, 'duration': 2.081}], 'summary': 'Adding support for featured images in wordpress theme.', 'duration': 28.643, 'max_score': 226.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY226352.jpg'}], 'start': 0.269, 'title': 'Wordpress featured images', 'summary': "Covers the concept of featured images, assigning them to posts, ensuring theme support, and controlling image sizes using code, providing a comprehensive understanding of wordpress featured images. it also covers the process of adding support for featured images in a wordpress theme by creating a custom function and using 'add_theme_support' in the 'functions.php' file.", 'chapters': [{'end': 180.41, 'start': 0.269, 'title': 'Wordpress featured images tutorial', 'summary': 'Covers the concept of featured images, the process of assigning them to posts, ensuring theme support, and controlling image sizes using code, providing a comprehensive understanding of wordpress featured images.', 'duration': 180.141, 'highlights': ['Featured image is a separate field from the main text of a post, allowing the theme to make dynamic design choices and output it differently based on the theme, offering hands-off approach in deciding image placement. Featured image is a separate field from the main text of a post, allowing the theme to make dynamic design choices and output it differently based on the theme. This offers a hands-off approach in deciding image placement, enabling the theme to use the image where it sees fit.', 'Explains the difference between a featured image and a regular image, where a featured image represents the post or page, while a regular image is added within the text area of the post, resembling a word processing program. Explains the difference between a featured image and a regular image, where a featured image represents the post or page, while a regular image is added within the text area of the post, resembling a word processing program.', "Provides guidance on ensuring theme support for featured images, indicating that the presence of a featured image box in the post edit screen signifies theme support, and offers easy steps to add the support if it's not present. Provides guidance on ensuring theme support for featured images, indicating that the presence of a featured image box in the post edit screen signifies theme support, and offers easy steps to add the support if it's not present.", 'Instructs on assigning featured images to posts from the WordPress admin, ensuring a comprehensive understanding of the process. Instructs on assigning featured images to posts from the WordPress admin, ensuring a comprehensive understanding of the process.', 'Discusses the ability to control different sizes of images in WordPress through code, providing a hands-on approach and offering fine-grained control over the different sizes of images created by WordPress. Discusses the ability to control different sizes of images in WordPress through code, providing a hands-on approach and offering fine-grained control over the different sizes of images created by WordPress.']}, {'end': 317.903, 'start': 180.41, 'title': 'Adding featured image support', 'summary': "Covers the process of removing and rewriting code to add support for featured images in a wordpress theme, demonstrating the correct way to do it by creating a custom function and using 'add_theme_support' in the 'functions.php' file.", 'duration': 137.493, 'highlights': ['The process involves removing existing code that supports and outputs featured images, followed by rewriting the code to add featured image support to the theme.', "The correct way to add featured image support in WordPress is to create a custom function, such as 'Learning WordPress', and use 'add_theme_support' for post thumbnails in the 'functions.php' file.", "The 'add_theme_support' function with 'post-thumbnails' is the minimal code required to enable featured image support in a WordPress theme."]}], 'duration': 317.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY269.jpg', 'highlights': ['Featured image is a separate field from the main text of a post, allowing the theme to make dynamic design choices and output it differently based on the theme, offering hands-off approach in deciding image placement.', 'Explains the difference between a featured image and a regular image, where a featured image represents the post or page, while a regular image is added within the text area of the post, resembling a word processing program.', "Provides guidance on ensuring theme support for featured images, indicating that the presence of a featured image box in the post edit screen signifies theme support, and offers easy steps to add the support if it's not present.", 'Instructs on assigning featured images to posts from the WordPress admin, ensuring a comprehensive understanding of the process.', 'Discusses the ability to control different sizes of images in WordPress through code, providing a hands-on approach and offering fine-grained control over the different sizes of images created by WordPress.', 'The process involves removing existing code that supports and outputs featured images, followed by rewriting the code to add featured image support to the theme.', "The correct way to add featured image support in WordPress is to create a custom function, such as 'Learning WordPress', and use 'add_theme_support' for post thumbnails in the 'functions.php' file.", "The 'add_theme_support' function with 'post-thumbnails' is the minimal code required to enable featured image support in a WordPress theme."]}, {'end': 533.641, 'segs': [{'end': 363.944, 'src': 'embed', 'start': 318.343, 'weight': 0, 'content': [{'end': 324.167, 'text': "So this is where we're adding code and sort of describing what our theme should add in terms of functionality.", 'start': 318.343, 'duration': 5.824}, {'end': 328.049, 'text': "But now that we've registered this and we've added this action,", 'start': 325.067, 'duration': 2.982}, {'end': 334.513, 'text': "let's go ahead and refresh in the admin panel and we can see that the featured image module is now present.", 'start': 328.049, 'duration': 6.464}, {'end': 338.356, 'text': 'So this means everyone watching this video is now on the same page.', 'start': 335.033, 'duration': 3.323}, {'end': 341.818, 'text': 'We all have a theme which supports featured images.', 'start': 338.516, 'duration': 3.302}, {'end': 345.723, 'text': "So now let's get to the fun part, actually adding the image.", 'start': 342.478, 'duration': 3.245}, {'end': 348.347, 'text': 'So go ahead and click set featured image.', 'start': 346.144, 'duration': 2.203}, {'end': 354.737, 'text': 'I usually click on the upload files tab and then just click to select files.', 'start': 349.929, 'duration': 4.808}, {'end': 361.883, 'text': "Now I've navigated to a folder named photo files and I have three files on my hard drive to choose from.", 'start': 356.041, 'duration': 5.842}, {'end': 363.944, 'text': "I'll choose this photo of a bird.", 'start': 362.643, 'duration': 1.301}], 'summary': 'Theme now supports featured images; added bird photo as example.', 'duration': 45.601, 'max_score': 318.343, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY318343.jpg'}, {'end': 466.542, 'src': 'heatmap', 'start': 407.988, 'weight': 2, 'content': [{'end': 414.429, 'text': 'which is learning how to output the image into your theme and also learning how to register different aspect ratio sizes.', 'start': 407.988, 'duration': 6.441}, {'end': 416.47, 'text': 'So maybe you want the image to be a square.', 'start': 414.85, 'duration': 1.62}, {'end': 420.051, 'text': 'Maybe you want to be cropped to be a tall rectangle or a wide rectangle.', 'start': 416.71, 'duration': 3.341}, {'end': 421.751, 'text': 'We can do all of that.', 'start': 420.751, 'duration': 1}, {'end': 422.772, 'text': "So let's dove in.", 'start': 421.931, 'duration': 0.841}, {'end': 424.192, 'text': "Let's start simple.", 'start': 423.272, 'duration': 0.92}, {'end': 430.814, 'text': "The first goal that we'll give ourselves is to simply output the image, irregardless of aspect ratio or size.", 'start': 425.011, 'duration': 5.803}, {'end': 434.557, 'text': 'Just output the image above the text for each post.', 'start': 431.115, 'duration': 3.442}, {'end': 443.842, 'text': "So we'll head over in the code to index that PHP of our theme folder and let's output the image directly above the text.", 'start': 435.197, 'duration': 8.645}, {'end': 446.563, 'text': 'So that would be about here.', 'start': 444.042, 'duration': 2.521}, {'end': 454.328, 'text': 'Drop into PHP and then the code is the post thumbnail.', 'start': 447.504, 'duration': 6.824}, {'end': 456.156, 'text': "That's it.", 'start': 455.816, 'duration': 0.34}, {'end': 462.279, 'text': "So now if we refresh, there's our image and it is entirely too large.", 'start': 456.596, 'duration': 5.683}, {'end': 466.542, 'text': 'You can see that even on a decent sized screen, you would have to scroll to the right quite a bit.', 'start': 462.339, 'duration': 4.203}], 'summary': 'Learning to output and register different aspect ratio image sizes in a theme, starting with outputting the image above the text for each post.', 'duration': 48.168, 'max_score': 407.988, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY407988.jpg'}, {'end': 514.086, 'src': 'embed', 'start': 471.904, 'weight': 3, 'content': [{'end': 482.25, 'text': "I'm going to head over to our style sheet and create a rule that targets every image on the website and gives it a max width of 100 percent.", 'start': 471.904, 'duration': 10.346}, {'end': 488.131, 'text': 'So now if we refresh, at least it fits the layout.', 'start': 485.049, 'duration': 3.082}, {'end': 494.114, 'text': "Now that we know how to output the image in our theme, let's take things a step further and learn how to customize it.", 'start': 488.691, 'duration': 5.423}, {'end': 503.52, 'text': 'So by that I mean that we can tell WordPress to automatically generate multiple versions of the image using different aspect ratio and cropping strategies.', 'start': 494.634, 'duration': 8.886}, {'end': 504.94, 'text': 'So give ourselves a goal.', 'start': 503.86, 'duration': 1.08}, {'end': 514.086, 'text': "We'll say on the home page where there's multiple posts, we want to output a small, rectangular, almost square like version of the image.", 'start': 505.241, 'duration': 8.845}], 'summary': 'Styling images with max width, learning to customize and output multiple versions for different aspects and cropping strategies.', 'duration': 42.182, 'max_score': 471.904, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY471904.jpg'}], 'start': 318.343, 'title': 'Wordpress image customization', 'summary': 'Covers adding a featured image module and customizing image sizes in wordpress, guiding users through the steps of uploading an image, setting max width, and instructing wordpress to automatically generate multiple versions of images with different aspect ratios and cropping strategies.', 'chapters': [{'end': 456.156, 'start': 318.343, 'title': 'Adding featured images in wordpress theme', 'summary': 'Highlights the process of adding a featured image module in a wordpress theme, guiding users through the steps of uploading an image and outputting it above the text for each post, ensuring universal understanding and implementation.', 'duration': 137.813, 'highlights': ['Users are guided through the process of adding a featured image module in a WordPress theme, ensuring universal understanding and implementation.', 'The chapter explains the steps of uploading an image, including navigating to the folder, selecting a photo, and finalizing the upload process.', "Instructions are provided for outputting the image above the text for each post, using the 'post thumbnail' code in the theme's index.php file."]}, {'end': 533.641, 'start': 456.596, 'title': 'Customizing image sizes in wordpress', 'summary': 'Covers customizing image sizes in wordpress, including setting a max width of 100 percent for all images, learning to output and customize images in a theme, and instructing wordpress to automatically generate multiple versions of images with different aspect ratios and cropping strategies for different sections of a website.', 'duration': 77.045, 'highlights': ['By setting a max width of 100 percent for all images, the layout can be adjusted to fit different screen sizes, eliminating the need for excessive scrolling.', 'Learning to output the image in the theme and customizing it allows for further control and optimization of the displayed images on the website.', 'WordPress can be instructed to automatically generate multiple versions of images with different aspect ratios and cropping strategies, enabling the output of specific image sizes for different sections of the website, such as small, rectangular versions for the home page and wide banner versions for individual posts.']}], 'duration': 215.298, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY318343.jpg', 'highlights': ['Instructions for adding a featured image module in a WordPress theme, ensuring universal understanding and implementation.', 'Guidance on uploading an image, including navigating to the folder, selecting a photo, and finalizing the upload process.', "Providing instructions for outputting the image above the text for each post using the 'post thumbnail' code in the theme's index.php file.", 'Setting a max width of 100 percent for all images to adjust the layout for different screen sizes, eliminating excessive scrolling.', 'Learning to output and customize the image in the theme for further control and optimization of displayed images on the website.', 'Instructing WordPress to automatically generate multiple versions of images with different aspect ratios and cropping strategies for specific image sizes in different sections of the website.']}, {'end': 786.936, 'segs': [{'end': 560.271, 'src': 'embed', 'start': 533.741, 'weight': 0, 'content': [{'end': 539.365, 'text': "I'm going to go directly beneath this line of code that added theme support for thumbnails or featured images.", 'start': 533.741, 'duration': 5.624}, {'end': 542.008, 'text': "And I'm going to register a few new image sizes.", 'start': 539.746, 'duration': 2.262}, {'end': 545.405, 'text': "So we'll use the function add image size.", 'start': 542.864, 'duration': 2.541}, {'end': 549.907, 'text': "We'll call this one small thumbnail.", 'start': 546.926, 'duration': 2.981}, {'end': 554.149, 'text': 'OK Now here are the parameters it accepts.', 'start': 551.108, 'duration': 3.041}, {'end': 557.27, 'text': 'The first number is the width in pixels.', 'start': 554.229, 'duration': 3.041}, {'end': 560.271, 'text': "So I'll say one hundred eighty pixels wide.", 'start': 557.97, 'duration': 2.301}], 'summary': 'Adding theme support for thumbnails and registering a new image size of 180 pixels wide.', 'duration': 26.53, 'max_score': 533.741, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY533741.jpg'}, {'end': 646.66, 'src': 'heatmap', 'start': 622.476, 'weight': 1, 'content': [{'end': 628.979, 'text': "Now, if we go back to index dot PHP, remember where we're outputting the image in our theme.", 'start': 622.476, 'duration': 6.503}, {'end': 634.122, 'text': 'Now I can say use the small thumbnail size of the image.', 'start': 629.52, 'duration': 4.602}, {'end': 635.703, 'text': 'So if we refresh.', 'start': 634.782, 'duration': 0.921}, {'end': 639.345, 'text': 'On the blog listing or home page screen.', 'start': 637.184, 'duration': 2.161}, {'end': 646.66, 'text': "You can see that instead of taking up the whole screen it's now using that new image size that we just registered.", 'start': 641.357, 'duration': 5.303}], 'summary': 'Implemented small thumbnail size for images, reducing size on blog listing and home page.', 'duration': 65.324, 'max_score': 622.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY622476.jpg'}, {'end': 750.148, 'src': 'embed', 'start': 719.249, 'weight': 4, 'content': [{'end': 723.914, 'text': "So now we're going to learn how to specify what portion of the image it should crop.", 'start': 719.249, 'duration': 4.665}, {'end': 727.952, 'text': 'Now we have two options for controlling how the image gets cropped.', 'start': 724.71, 'duration': 3.242}, {'end': 734.617, 'text': 'Number one is with code and number two is to manually in the WordPress admin draw a rectangle around the partly one crop.', 'start': 728.472, 'duration': 6.145}, {'end': 736.598, 'text': "So we'll start with number one the code way.", 'start': 734.917, 'duration': 1.681}, {'end': 739.34, 'text': 'So in our functions dot php file.', 'start': 737.238, 'duration': 2.102}, {'end': 741.982, 'text': 'where we registered this banner image size.', 'start': 740, 'duration': 1.982}, {'end': 750.148, 'text': "Let's set things up so that it crops the top left portion of the image instead of the vertical center of the image.", 'start': 742.702, 'duration': 7.446}], 'summary': 'Learning to specify image cropping using code or manual wordpress admin cropping.', 'duration': 30.899, 'max_score': 719.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY719249.jpg'}], 'start': 533.741, 'title': 'Image sizes and cropping in wordpress', 'summary': 'Covers adding new image sizes using the add_image_size function in wordpress, specifying width, height, and cropping type. it emphasizes maintaining aspect ratio and provides guidance on choosing hard or soft cropping to achieve desired visual outcomes.', 'chapters': [{'end': 598.345, 'start': 533.741, 'title': 'Adding image sizes and theme support', 'summary': 'Discusses adding new image sizes using the add_image_size function in wordpress, specifying width, height, and cropping type, emphasizing the importance of maintaining aspect ratio and providing guidance on choosing hard or soft cropping.', 'duration': 64.604, 'highlights': ['The add_image_size function is used to specify new image sizes in WordPress, with parameters for width, height, and cropping type, demonstrated by adding a small thumbnail size of 180x120 pixels with hard cropping.', 'Emphasizing the importance of maintaining aspect ratio, even if it may lead to awkward cropping and the potential loss of important image parts, WordPress prioritizes the preservation of the aspect ratio.', 'Guidance is provided for choosing hard or soft cropping based on layout preferences, with a preference for hard cropping in most cases.']}, {'end': 786.936, 'start': 599.106, 'title': 'Image size and cropping in wordpress', 'summary': 'Covers the process of creating and implementing custom image sizes in wordpress, including specifying dimensions and controlling cropping, with a focus on achieving desired visual outcomes.', 'duration': 187.83, 'highlights': ['By registering custom image sizes and specifying them in the theme, the blog listing or home page screen now displays images in the new size, 920 pixels wide and 210 pixels tall, instead of the original size, optimizing the visual presentation.', 'Changing the image size to a banner version for single blog posts and adjusting the cropping settings to retain an important element demonstrates the ease of modifying image sizes and aspect ratios to achieve the desired visual outcome.', "Learning how to specify the portion of the image to crop, either through code or manually in the WordPress admin, provides control over the visual presentation, as demonstrated by adjusting the cropping to retain the bird's head in the image."]}], 'duration': 253.195, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY533741.jpg', 'highlights': ['The add_image_size function specifies new image sizes in WordPress, with parameters for width, height, and cropping type.', 'Guidance is provided for choosing hard or soft cropping based on layout preferences, with a preference for hard cropping in most cases.', 'By registering custom image sizes and specifying them in the theme, the blog listing or home page screen now displays images in the new size, 920 pixels wide and 210 pixels tall, optimizing the visual presentation.', 'Changing the image size to a banner version for single blog posts and adjusting the cropping settings to retain an important element demonstrates the ease of modifying image sizes and aspect ratios to achieve the desired visual outcome.', "Learning how to specify the portion of the image to crop, either through code or manually in the WordPress admin, provides control over the visual presentation, as demonstrated by adjusting the cropping to retain the bird's head in the image.", 'Emphasizing the importance of maintaining aspect ratio, even if it may lead to awkward cropping and the potential loss of important image parts, WordPress prioritizes the preservation of the aspect ratio.']}, {'end': 1160.213, 'segs': [{'end': 842.047, 'src': 'embed', 'start': 810.637, 'weight': 0, 'content': [{'end': 815.945, 'text': 'Now, even though Our top left is sort of getting the job done.', 'start': 810.637, 'duration': 5.308}, {'end': 818.047, 'text': 'You might want even more control.', 'start': 816.246, 'duration': 1.801}, {'end': 825.793, 'text': "Now, if that's the case, instead of doing it with code, you can crop the image yourself by clicking on it in the post screen,", 'start': 818.427, 'duration': 7.366}, {'end': 830.457, 'text': 'clicking edit image over on the right side, and then you can actually.', 'start': 825.793, 'duration': 4.664}, {'end': 835.682, 'text': 'Click and drag and create your own cropped rectangle.', 'start': 832.119, 'duration': 3.563}, {'end': 842.047, 'text': 'And then simply clicking save.', 'start': 840.025, 'duration': 2.022}], 'summary': 'Enhance control by manually cropping images in the post screen for a customized result.', 'duration': 31.41, 'max_score': 810.637, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY810637.jpg'}, {'end': 920.327, 'src': 'embed', 'start': 893.831, 'weight': 1, 'content': [{'end': 899.777, 'text': 'We want it to actually be above in terms of the order of the HTML to sit above the title.', 'start': 893.831, 'duration': 5.946}, {'end': 901.459, 'text': 'So output it here.', 'start': 900.598, 'duration': 0.861}, {'end': 904.462, 'text': 'But we actually want it to be in some sort of containing element.', 'start': 901.86, 'duration': 2.602}, {'end': 908.206, 'text': "So we'll create a div named post thumbnail.", 'start': 904.823, 'duration': 3.383}, {'end': 911.57, 'text': "And then let's paste the image into that element.", 'start': 909.628, 'duration': 1.942}, {'end': 920.327, 'text': "Okay, now in terms of CSS, there's a lot of different ways that we could position the element to sit to the side of the text.", 'start': 912.762, 'duration': 7.565}], 'summary': 'Html order above title, image in div named post thumbnail, css positions element.', 'duration': 26.496, 'max_score': 893.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY893831.jpg'}, {'end': 979.825, 'src': 'heatmap', 'start': 926.431, 'weight': 0.838, 'content': [{'end': 932.315, 'text': "So we'll give the wrapper of the entire post a class of has thumbnail.", 'start': 926.431, 'duration': 5.884}, {'end': 936.198, 'text': 'And then in our CSS, create a few new rules.', 'start': 933.616, 'duration': 2.582}, {'end': 942.422, 'text': 'So has thumbnail, that container element should be positioned relative.', 'start': 936.278, 'duration': 6.144}, {'end': 946.886, 'text': 'and it should have a good amount of padding on the left.', 'start': 943.423, 'duration': 3.463}, {'end': 952.572, 'text': 'And then we can simply take our, I believe it was post thumbnail.', 'start': 948.408, 'duration': 4.164}, {'end': 963.142, 'text': 'Yes Post thumbnail, the element that contains the image, set it to position absolute to sit to the left.', 'start': 953.112, 'duration': 10.03}, {'end': 969.975, 'text': 'So then if we refresh, We can see that the positioning is exactly how we would prefer.', 'start': 964.183, 'duration': 5.792}, {'end': 973.819, 'text': 'Now, you may be thinking that works well if a post has an image.', 'start': 970.436, 'duration': 3.383}, {'end': 979.825, 'text': "But what about these posts that don't have a featured image? Obviously, they shouldn't be pushed from the left 200 pixels.", 'start': 973.859, 'duration': 5.966}], 'summary': 'Css rules added to position post thumbnails and handle posts without images.', 'duration': 53.394, 'max_score': 926.431, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY926431.jpg'}, {'end': 1039.388, 'src': 'heatmap', 'start': 1009.286, 'weight': 1, 'content': [{'end': 1013.288, 'text': 'And what do we want to do? We just want to output that class has a thumbnail.', 'start': 1009.286, 'duration': 4.002}, {'end': 1019.231, 'text': 'So now if we refresh.', 'start': 1017.99, 'duration': 1.241}, {'end': 1025.097, 'text': 'We can see that the first post has a thumbnail, so it gets the class that adds the space.', 'start': 1020.834, 'duration': 4.263}, {'end': 1028.599, 'text': "And if a post doesn't have the image, then we just don't add that class.", 'start': 1025.578, 'duration': 3.021}, {'end': 1031.502, 'text': 'And so they remain aligned in a way that makes sense.', 'start': 1028.7, 'duration': 2.802}, {'end': 1039.388, 'text': "Finally, let's wrap a link around the image so that you can click on the image or tap on the image to follow the permalink to the full post.", 'start': 1032.103, 'duration': 7.285}], 'summary': 'Add thumbnail class to first post for alignment and link it to the full post.', 'duration': 30.102, 'max_score': 1009.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY1009286.jpg'}, {'end': 1152.046, 'src': 'embed', 'start': 1130.222, 'weight': 2, 'content': [{'end': 1139.515, 'text': "OK Now, with a lot of images, you won't need to crop them because you won't be choosing such exaggerated aspect ratios.", 'start': 1130.222, 'duration': 9.293}, {'end': 1146.681, 'text': 'I chose a very exaggerated full width but not very tall edge case just to show you some of the different cropping strategies.', 'start': 1139.976, 'duration': 6.705}, {'end': 1147.742, 'text': 'But there you can see it.', 'start': 1146.942, 'duration': 0.8}, {'end': 1150.825, 'text': 'WordPress is automatically creating different sizes for us.', 'start': 1148.183, 'duration': 2.642}, {'end': 1152.046, 'text': 'And it works quite nicely.', 'start': 1151.085, 'duration': 0.961}], 'summary': 'Wordpress automatically creates different image sizes, reducing the need to crop exaggerated aspect ratios.', 'duration': 21.824, 'max_score': 1130.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY1130222.jpg'}], 'start': 786.936, 'title': 'Wordpress image cropping and thumbnail generation', 'summary': 'Discusses the process of cropping and generating thumbnails for images in wordpress, including adding manual adjustments, positioning images using html and css, and using conditional code for posts with and without thumbnails.', 'chapters': [{'end': 1160.213, 'start': 786.936, 'title': 'Wordpress image cropping and thumbnail generation', 'summary': 'Discusses the process of cropping and generating thumbnails for images in wordpress, including adding manual adjustments, positioning images using html and css, and using conditional code for posts with and without thumbnails.', 'duration': 373.277, 'highlights': ["Discussing the process of manually cropping images in WordPress by clicking on the image in the post screen, clicking 'edit image', and creating a custom cropped rectangle, offering more control over the cropped portion of the image. Manual control over image cropping", 'Detailing the process of positioning images using HTML and CSS, including creating a div element for the image, using position absolute to place the image to the left of the post, and adding conditional code to handle posts without featured images, ensuring proper alignment. Usage of HTML, CSS, and conditional code for image positioning', 'Demonstrating the automatic generation of different image sizes and aspect ratios by WordPress, showcasing the functionality of automatically created thumbnails and aspect ratios based on uploaded images. Automatic generation of image sizes and aspect ratios']}], 'duration': 373.277, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L_4crhIoXfY/pics/L_4crhIoXfY786936.jpg', 'highlights': ['Manual control over image cropping', 'Usage of HTML, CSS, and conditional code for image positioning', 'Automatic generation of image sizes and aspect ratios']}], 'highlights': ["The 'add_theme_support' function with 'post-thumbnails' is the minimal code required to enable featured image support in a WordPress theme.", 'By registering custom image sizes and specifying them in the theme, the blog listing or home page screen now displays images in the new size, 920 pixels wide and 210 pixels tall, optimizing the visual presentation.', "Learning how to specify the portion of the image to crop, either through code or manually in the WordPress admin, provides control over the visual presentation, as demonstrated by adjusting the cropping to retain the bird's head in the image.", 'Explains the difference between a featured image and a regular image, where a featured image represents the post or page, while a regular image is added within the text area of the post, resembling a word processing program.']}