{"id":95905,"date":"2022-04-20T09:12:32","date_gmt":"2022-04-20T13:12:32","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=95905"},"modified":"2023-08-21T10:46:30","modified_gmt":"2023-08-21T14:46:30","slug":"gallery-block","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/gallery-block\/","title":{"rendered":"Creating Image Galleries Using the WordPress Gallery Block"},"content":{"rendered":"
\"Image<\/figure>\n\n\n\n

Creating a beautiful image gallery for a website used to be a difficult task that required extensive experience with CSS, or lots of slow-loading JavaScript. Now, you can easily create dynamic, mobile responsive image galleries in WordPress with a few clicks.<\/p>\n\n\n\n

How To Create a Gallery Block<\/h2>\n\n\n\n
    \n
  1. Log into the WordPress dashboard<\/a><\/li>\n\n\n\n
  2. Select a post or page to edit, or create new content<\/li>\n\n\n\n
  3. Use the +<\/strong> sign to create a new block
    \"Plus<\/li>\n\n\n\n
  4. Select Gallery<\/strong><\/li>\n\n\n\n
  5. Select images to include in the gallery by either uploading or choosing from Media Library items
    \"WordPress<\/li>\n<\/ol>\n\n\n\n

    When finished selecting images, the gallery will appear in your post.<\/p>\n\n\n\n

    Gallery Settings and Design Elements<\/h2>\n\n\n\n

    Once your gallery has appeared in your post or page, it will automatically display your images in the best orientation according to the image dimensions, or otherwise crop the images to fit nicely into the layout. You can tweak these settings to get a more specific look.<\/p>\n\n\n\n

    Columns<\/h3>\n\n\n\n

    Using a slider, you can adjust how many columns your image gallery will use to display your images. Remember, depending on the size of the images, there may be overlap.<\/p>\n\n\n\n

    \n
    \n
    \"\"
    2 column grid<\/figcaption><\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"
    3 column grid<\/figcaption><\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"
    4 column grid<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

    Notice how, in the 4-column grid, all of the images in the top row are smaller than the large image on the bottom. You can change this orientation by re-ordering the images using the arrow buttons to move images left or right in the gallery:<\/p>\n\n\n

    \n
    \"Move<\/figure>\n<\/div>\n\n\n

    This looks more balanced. Remember that default orientation is calculated automatically, and you should adjust it to get the best look.<\/p>\n\n\n\n

    Removing The Image Crop<\/h3>\n\n\n\n

    You can also remove the image crop entirely. This would be a good option to use if you want to make certain that none of your pictures will be cut up or displayed in a way that blocks out key elements. This can be accomplished by switching off the Crop images<\/strong> option in the block settings on the right of the editor window:<\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    Note the difference in the above example:<\/p>\n\n\n

    \n
    \"Back<\/figure>\n<\/div>\n\n\n

    Because these images all have very different dimensions and aspect ratios, turning off the image crop option has created a lot of negative space, which may not be desirable. However, if all of these images were of similar size, the effect may not have been so drastic.<\/p>\n\n\n\n

    Link To<\/h3>\n\n\n\n

    You can also determine where each image in the gallery links when clicked. By default, each image in the gallery will not have a link. This means if you click the image nothing will happen. But you have other options:<\/p>\n\n\n\n