{"id":15610,"date":"2018-09-18T16:22:17","date_gmt":"2018-09-18T20:22:17","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=15610"},"modified":"2023-12-07T14:14:32","modified_gmt":"2023-12-07T19:14:32","slug":"images","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/page-builder\/images\/","title":{"rendered":"Working with Images in the Post and Page Builder"},"content":{"rendered":"\n

Images help to relay your message to visitors and it is recommended to include images in your website content. The Post and Page Builder<\/a> has features that make working with images in WordPress painless, which we will outline for you in the following guide.<\/p>\n

<\/iframe><\/p>\n<h2 id=\"how-to-add-images-in-wordpress\">How to Add Images in WordPress<\/h2>\nImages are a key part of web design and for SEO and visibility purposes it is important to have at least one image per page. Below are the steps to add a new image to a Block.<\/p>\n<ul>\n<li>Click in the column where the image will go<\/li>\n<li>Click the Enter button to add a new line<\/li>\n<li>Click the Add Media<\/b> button below the Page Title box to open the Media Library <\/b>modal<\/li>\n<li>From here you can select an image or click Upload Files<\/b> to add a new one to the Media Library<\/li>\n<li>Click on your desired image to open the Image Details<\/strong> screen<\/li>\n<li>From here you can add a Caption, Alt Text, control Alignment, Links, Image Size, and more. All these options are discussed in detail later in this article<\/li>\n<li>When finished click Insert into Page<\/b> to see your image in the Editor<\/li>\n<\/ul>\n<h2 id=\"how-to-replace-images-in-wordpress\">How to Replace Images in WordPress<\/h2>\nReplacing images in WordPress is easier than ever with the Post and Page Builder and our Crop Image option, however you can always use the native replace image feature in WordPress.<\/p>\n<ul>\n<li>Click on the image you want to Edit <\/b>or Replace<\/b><\/li>\n<li>Click the Camera Icon<\/b> that is added to the DropTab<\/li>\n<\/ul>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/post-page-builder-change-image-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28033\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/post-page-builder-change-image-1-e1602173227725.png\" alt=\"Replace image in the Post and Page Builder\" width=\"400\" height=\"153\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/post-page-builder-change-image-1-e1602173227725.png 459w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/post-page-builder-change-image-1-e1602173227725-300x114.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\n<ul>\n<li>Or, you can use the WordPress Image Editor edit pencil icon<\/li>\n<\/ul>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/edit-image-in-wordpress-e1602172842882.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28027\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/edit-image-in-wordpress-e1602172842882.png\" alt=\"How to edit an image in WordPress\" width=\"400\" height=\"127\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/edit-image-in-wordpress-e1602172842882.png 548w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/edit-image-in-wordpress-e1602172842882-300x95.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\n<ul>\n<li>Either way, you will end up in the Media Library. From here, select the image you wish to replace it with<\/li>\n<li>Adjust the Image Details<\/strong> as needed, these options are explained later in this article<\/li>\n<li>Click Replace<\/b><\/li>\n<\/ul>\nNext you will learn how to crop the image.<\/p>\n<h2 id=\"how-to-crop-images-in-wordpress\">How to Crop Images in WordPress<\/h2>\n<h3 id=\"crop-an-image-already-in-the-media-library\">Crop an Image Already in the Media Library<\/h3>\nIf you want to crop an image previously uploaded to your Media Library, click the edit pencil icon above the image to open the Image Details.<\/p>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/edit-image-in-wordpress-e1602172842882.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28027\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/edit-image-in-wordpress-e1602172842882.png\" alt=\"How to edit an image in WordPress\" width=\"400\" height=\"127\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/edit-image-in-wordpress-e1602172842882.png 548w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/edit-image-in-wordpress-e1602172842882-300x95.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\nFrom here, click the Edit Original button under the image.<\/p>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-details.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-28030\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-details-1024x511.png\" alt=\"WordPress image details\" width=\"1024\" height=\"511\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-details-1024x511.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-details-300x150.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-details-768x383.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-details-1536x767.png 1536w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-details.png 1603w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\nThis is where you can adjust the image as needed. Be sure to click the blue Save button under the image when done, then click the blue Back button in the lower right to close the panel.<\/p>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/crop-image-in-wordpress.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-28029\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/crop-image-in-wordpress-1024x517.png\" alt=\"Crop image in WordPress\" width=\"1024\" height=\"517\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/crop-image-in-wordpress-1024x517.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/crop-image-in-wordpress-300x152.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/crop-image-in-wordpress-768x388.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/crop-image-in-wordpress-1536x776.png 1536w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/crop-image-in-wordpress.png 1570w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<h3 id=\"crop-an-image-while-uploading\">Crop an Image While Uploading<\/h3>\nWhen replacing an image with the Post and Page Builder, you can crop images while uploading. This feature maintains the aspect ratio, which means you can quickly swap images without harming your layout. To use the Post and Page Builder cropping tool, first click the image and then click the camera icon in the DropTab.<\/p>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/post-page-builder-change-image-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28033\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/post-page-builder-change-image-1-e1602173227725.png\" alt=\"Replace image in the Post and Page Builder\" width=\"400\" height=\"153\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/post-page-builder-change-image-1-e1602173227725.png 459w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/post-page-builder-change-image-1-e1602173227725-300x114.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\nAfter selecting or uploading a new image, if the dimensions are different than the image you are replacing, you will see a Crop Image screen, as shown below. By default the Force Aspect Ratio box is checked to ensure your layout isn’t thrown off. You can always uncheck the box to replace the image without cropping and use the new image dimensions.<\/p>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-cropping.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-28031\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-cropping-1024x440.png\" alt=\"Post and Page Builder image cropping\" width=\"1024\" height=\"440\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-cropping-1024x440.png 1024w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-cropping-300x129.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-cropping-768x330.png 768w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-cropping-1536x660.png 1536w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-cropping.png 1845w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<h2 id=\"how-to-update-the-image-details\">How to Update the Image Details<\/h2>\nWhat is Alternative Text?<\/strong><\/p>\nEach image’s alternative text, or alt text for short, displays on the page while the image finishes loading. They are read by screen readers and also help with website SEO. It’s highly recommended to include alt text on all images.<\/p>\nAdd an Image Caption<\/strong><\/p>\nYou may give each image a caption if you would like. Each theme will display an image caption differently.<\/p>\nChange Image Alignment<\/strong><\/p>\n<ul>\n<li>Left  – image appears on the left of the theme container boundary and other content will wrap around the image<\/li>\n<li>Center – image will be in the middle of the screen, in its own row<\/li>\n<li>Right – image appears on the right side of the theme container edge and other content will wrap around the image<\/li>\n<li>None – the image will be in it’s own row on the left side of the screen. Other content will not<\/b> wrap around the image<\/li>\n<\/ul>\nChoose Image Size<\/strong><\/p>\nWordPress Core has max image dimensions for each size, which are listed below, but some themes may override these defaults. When you upload an image, WordPress automatically creates a version of the image in each of these sizes. The size of the final image for Thumbnail, Medium, Medium Large, and Large will vary depending on the height of the original image.<\/p>\n<ul>\n<li>Thumbnail – 150px by 150px<\/li>\n<li>Medium – 300px by 300px<\/li>\n<li>Medium Large – 768px by 768px<\/li>\n<li>Large – 1024px by 1024px<\/li>\n<li>Full – actual size of uploaded image. Be careful how wide of an image you upload, take the size of your theme’s container into account. Using a large image increases page load speed.<\/li>\n<\/ul>\nUpdate Image Links<\/strong><\/p>\n<ul>\n<li>Media File – the image will open larger on the screen, in the same window<\/li>\n<li>Attachment Page – the image will show on its own page, with the Image Title used as the page title<\/li>\n<li>Custom URL – you can add any link to an image, either on or off site<\/li>\n<li>None<\/li>\n<\/ul>\n<h2 id=\"advanced-options-in-image-details\">Advanced Options in Image Details<\/h2>\nImage Title Attribute<\/strong><\/p>\nThis text appears when a user hovers over the image.<\/p>\nImage CSS Class<\/strong><\/p>\nAny custom CSS added here will be added to the image itself.<\/p>\nLink Rel<\/strong><\/p>\nThis advanced feature is used to control how image links are used for SEO purposes. Any standard HTML link rel attributes can be used.<\/p>\nLink CSS Class<\/strong><\/p>\nThese classes will apply to the image link.<\/p>\n<h2 id=\"image-design\">Image Design<\/h2>\nBoldGrid includes design shape options for images. The following steps will explain how to add custom designs to your images.<\/p>\n<ul>\n<li>Click on the image you want to change<\/li>\n<li>In the Drop Tab toolbar, select the Gear icon<\/b> labeled Image Design<\/b><\/li>\n<li>You will see a list of Sample Designs to choose from or click Customize Design<\/b> to create your own<\/li>\n<\/ul>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-designs.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28026\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-designs.png\" alt=\"WordPress image designs\" width=\"300\" height=\"507\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-designs.png 408w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-designs-178x300.png 178w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<h2 id=\"image-filters\">Image Filters<\/h2>\nBoldGrid offers Image Filters that allow you to change the way your images appear. This is helpful for making images work with your selected color scheme without opening an external image editing program.<\/p>\n<ul>\n<li>Click on the image you want to change<\/li>\n<li>In the Drop Tab toolbar, select the Magic Wand icon<\/b> labeled Image Filters<\/b><\/li>\n<li>You will see a list of Filters to choose from<\/li>\n<li>Click Custom <\/b>to create your own unique filter<\/li>\n<\/ul>\n<a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-filters.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-28024\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-filters.png\" alt=\"WordPress image filters\" width=\"1002\" height=\"672\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-filters.png 1002w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-filters-300x201.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/wordpress-image-filters-768x515.png 768w\" sizes=\"auto, (max-width: 1002px) 100vw, 1002px\" \/><\/a><\/p>\n<h2 id=\"webp-images\">WebP Images<\/h2>\nAs of WordPress 5.7, you can upload WebP format images into the media library just like a jpg, png, or pdf file. WebP images are on average <a href=\"https:\/\/developers.google.com\/speed\/webp\">30% smaller than jpeg and 26% smaller than png<\/a> images in file size, without losing image quality. Most modern browsers support WebP, including Chrome, Firefox, Edge, and Opera.<\/p>\nThere are many free online tools available for converting images to WebP. If you are converting less than 25 per day, <a href=\"https:\/\/cloudconvert.com\/jpg-to-webp\">Cloud Convert<\/a> is a good option. Depending on the size of your site, it may be worthwhile to convert and re-upload all your images. <\/span>Otherwise you’ll need a plugin active to serve WebP images instead of the file format uploaded to the Media Library<\/span><\/span>. <\/span><\/p>\n<h2 id=\"faqs\">FAQs<\/h2>\n<h3 id=\"how-do-i-make-the-image-be-full-size-in-the-attachment-page\">How do I make the image be full-size in the attachment page?<\/h3>\nBy default, WordPress uses the medium <\/b>image size on the attachment pages. In order to change this, you’ll need to either use the<a href=\"https:\/\/wordpress.org\/plugins\/code-snippets\"> Code Snippets Plugin<\/a> or<a href=\"https:\/\/www.boldgrid.com\/support\/wordpress-tutorials\/how-to-create-a-child-theme-to-customize-your-wordpress-website\/\"> use a child theme<\/a> to create a custom filter. You can paste this code into a Code Snippet or into your Child Theme’s functions.php file to accomplish this: \n<code>function bgsc_full_attachment_size( $attachment_content ) { \nif (is_attachment()) { \/\/only change image size on attachment pages \nreturn sprintf( '%s<\/p>', wp_get_attachment_link( 0, 'full', false) ); \/\/Change 'full' to 'large' if needed \n} \n} \nadd_filter( 'prepend_attachment', 'bgsc_full_attachment_size', 10, 1);<\/code><\/p>\n<h3 id=\"how-do-i-set-up-my-images-so-text-is-displayed-when-one-scrolls-over-it\">How do I set up my images so text is displayed when one scrolls over it?<\/h3>\nThe easiest way to show text on an image while hovering is to add an Image Title Attribute, however the styling of this text will vary per theme. If you’re looking for a more polished effect, you can use Custom CSS to further fine tune your design. Here’s some example code: \n<code>figure.hover-caption-display { \nposition: relative; \noverflow: hidden; \n} \nfigure.hover-caption-display > figcaption { \nposition: absolute; \nleft: 0px; \nright: 0px; \nheight: 30px; \nline-height: 30px; \nbottom: -60px; \ntext-align: center; \nbackground: rgba( 256,256,256,.8 ); \ncolor: #000; \ntransition: bottom 500ms;} \nfigure.hover-caption-display:hover > figcaption { \nbottom: 40%; \ntransition: bottom 500ms; }<\/code><\/p>\nCongratulations!<\/span><\/p>\nYou now know how to work with all the image options available from the Post and Page Builder, BoldGrid’s <a href=\"https:\/\/www.boldgrid.com\/wordpress-page-builder-by-boldgrid\/\">WordPress page builder<\/a>. Next, you may want to learn <a href=\"https:\/\/www.boldgrid.com\/support\/page-builder\/sliders\/\">how to make a slider.<\/a><\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"Images help to relay your message to visitors and it is recommended to include images in your website content. The Post and Page Builder has features that make working with images in WordPress painless, which we will outline for you in the following guide. How to Add Images in WordPress Images are a key part […]<\/p>\n","protected":false},"author":529,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"How to Work with Images in the WordPress Page Builder by BoldGrid","bgseo_description":"Images help to relay your message to visitors and it is recommended to include images in your website content. The Post and Page Builder has unique features that help you work with images in WordPress easier, which we will outline for you in this guide.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[148],"tags":[690],"class_list":["post-15610","post","type-post","status-publish","format-standard","hentry","category-page-builder","tag-faq"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/529"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=15610"}],"version-history":[{"count":14,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15610\/revisions"}],"predecessor-version":[{"id":120953,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/15610\/revisions\/120953"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=15610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=15610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=15610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}