Images are a great way to boost your WordPress.com site. you can uploadthe most common image filesfor your website This guide will show you the different ways to add images to your website.
in this guide
- image guide
- examples
- image block
- cover block
- gallery block
- slideshow block
- image comparison block
- Tile gallery block
image guide
There are many things you can do with images, so we've broken them down into several pages:
- upload photos-All about inserting images into your posts and pages from your computer, the Internet, and your media library.
- image settings- Add a title or caption to your images. It contains where to find basic information about your image, such as: B. the permalink, image dimensions, and file type.
- image output– Is your photo upside down or a little too big? This is a guide to cropping, rotating and scaling your images.
- galleries and slideshows- Present your images in a gallery or slideshow.
- image optimization- Reducing the file size of images before inserting them loads and pages load faster.
- Troubleshooting when uploading images– Are your photos not loading? Here are some tips to make it work!
- Troubleshooting blurred images- Find out why images on your website may appear blurry, even if the originally uploaded photo was of good quality.
- Browse free images and other media– Need a public domain or copyleft image for your website? Here are some suggestions on where to find them!
examples
Here are some working examples to show you different ways to use blocks to display your images. Images will look different depending on the theme you use on your site. So test them out on your website!
All images courtesy of Pexels.free photo library.
image block
ANDimage blockis used to add individual images. It's minimalist but combined with thatpillar block, you can create a creative design as shown inTerrahe.
Default style:
rounded style:
cover block
ANDcover blockIt is best enjoyed with a theme that allows full-width viewing. It is beautifully displayed in Dalston, Alves andMaywoodmatters
The block includes options for solid background, gradient overlay, and different display styles.
solid background turned on
solid background OFF
Gradient overlay with bottom and top wave styles
gallery block
video transcript
There are several ways to view a gallery of your photos or other images.
Gallery Block contains individual blocks for each image and organizes them more attractively. To add a gallery block, click the Insert Block button and navigate to the gallery block. Or, on a new line, type a slash followed by the word gallery. Then press Enter to add the gallery block.
Then it's time to add some photos. You can upload image files from your computer or select images from your media library, Google Photos account or Pexels. I'm going to select some images that I've already uploaded to my media library. And after selecting all the images I want to include, I click on the button to create a new gallery.
In the next step, you can drag and drop the images in a different order if you like.
You can also add or edit the captions that appear below each image.
And you can remove images from the gallery by clicking the X in the upper right corner of the image.
If you're happy with the selected images, click the button below to embed the gallery on the page.
Click on the white space between the images to select the main gallery block. And from the toolbar at the top, you can change the width and orientation of the entire gallery and add more images if needed.
In Gallery Block's additional settings, you can choose the number of columns for the gallery layout and your images will automatically be rearranged into the best configuration for the number of columns you chose.
You can also choose whether or not to crop images from your gallery, which is a very useful feature when your images have different shapes and sizes.
Then choose what should happen when a visitor clicks on one of your images. The default value is "None", which means nothing happens when someone clicks on an image. The media file opens the image in a full-screen carousel view, allowing your visitors to browse one image at a time. If you select Attached Page, the image opens to its own page that contains the image, caption, image description, and a field for visitors to add a comment.
And finally, you can choose a different image size for the thumbnails displayed in the gallery.
While these settings apply to the entire gallery block, you can still edit individual images in the gallery simply by clicking on the image you want to edit. The toolbar at the top of the image offers the usual options for dragging the image to a different location or using the arrow buttons to move the image left or right.
Click the link button to change what happens when a visitor clicks on that specific image. You can paste a URL to create a link or link to a published page on your website, or you can override the defaults for the entire gallery block and display this image as a media file or on your own attached page.
Click on the crop icon and you can zoom in, select a different aspect ratio, rotate the image and reposition the image within the new crop area. When you are satisfied with the changes, click on the Apply button.
If you want to get a little more creative, you can apply a special effect called duotone to the image. To create this effect, choose one of the default color schemes or your own colors for shadows and highlights. To remove the effect, click the Delete button.
And of course, you can also replace any image in the gallery at any time.
In the settings panel on the right, you can choose between rounded or the default border style.
You can also edit the image's alt text description, which not only gives search engines an idea of what your images are about, but also helps visually impaired users know what each image represents.
Again, you can choose a different image size for the thumbnail.
Finally, you can round the corners of an image by entering a number in the radius field.
The gallery block is a good way to display your images, but there are other ways to display those images.
Click on the white space between the images to select the main gallery block. Then click the button on the left to turn the entire block into a mosaic gallery. The tiled gallery block allows you to display your image galleries in four different styles.
Tiling is the default layout you see here, but you can also choose circles, square tiles, or a tiled column.
You'll also find several image filters on the toolbar that you can apply to any image in your block gallery.
Click on the button on the left of the toolbar and you can turn the entire gallery into a slideshow block. And this is how it looks when added to a page.
In the settings, you can enable autoplay so that your slideshow automatically switches between images. And you can choose how long each slide appears before changing. You can also choose between two different transition effects. slide or disappear.
Whether you choose the Slideshow Block, a tiled gallery, or the regular Gallery Block, you can create beautiful photo galleries that your visitors will love.
Visit wordpress.com/support for more help creating image galleries for your website.
ANDgallery blocklets you easily add multiple photos and automatically organize them.
slideshow block
ANDslideshow blockIt's great for sharing images without taking up too much space on a page or post. see featuredRivingtonhe.
The example below uses the autoplay option, check out all the other options inSlideshow block guide.
Media and text block
ANDyou can place an image or video next to the text.
It has a handy option to stack media and text on the phone.
Some creative uses are presented in theExfordjBarnsburyhe.
"If there's a book you want to read but it hasn't been written yet, then you should write it."
– Toni Morrison
On the left, you can see how the Stack option displays content on mobile devices.
By default, media is displayed on top.
image comparison block
Use oimage comparison blockto place two images side by side (or above and below), and use a slider to show the differences between the two images.
Tile gallery block
ANDTile gallery blockincludes a rounded corner option and is available in four different styles:
- tile mosaic
- grade circular
- square tiles
- mosaic columns
It's a creative way to share images and can be a great addition to the Slideshow Block, as shown inRivingtonhe.
tile mosaic
grade circular
Square tiles with rounded corners option
mosaic columns