Embedding images in wordpress

Embedding an image with an embed code to your blog in WordPress

The guideline for embedding an image with an embed code to your blog in WordPress is a must-read article for those people who wants to insert the images that they like on Getty Images to their posts or blogs on WordPress.

Imagine when you want to add some photos about the events or stuff that are related to your posts on WordPress but you don’t have the chance to take a photo on your own. Then you have to google it for more photos and most of the cases, you found what you are looking for. However, some of those might have this sentence: “Images may be subject to copyright.”. Do you want to mess around with this illegal problem? Probably not.

Lucky for you, Getty Images appears as a rescue because it will allow you to embed images into your post in a legal way.

Let’s go straight to the main point here and see what are included in the image embedding procedure!

1. Getty Images information

For some of you who don’t know, Getty Images is a stock photography company with a huge supplier of images. Photos on Getty Images can be spanned over one hundred years which means that you can collects photos from the past to present. Most of the photos on Getty Image are qualified, conversable and always available for publication or other uses when a license is purchased.

Although the use of their images typically costs around $500 a piece, which is not a comfortable amount for some people, Getty Image offers most of their images for free to be embedded in non-commercial websites and blogs.

Scroll down to figure out the embedding process in WordPress. Don’t hesitate because it is quite simple, though it took me a few tries to get it right the first time.

2. Embedding an image with an embed code

Since Getty Images can no longer be embedded by pasting the URL to the image. The method using the Embed Code from Getty Images is the only way the image will display on your site. It includes six steps on the whole.

Firstly, you need to direct to the Getty Images website by the link https://www.gettyimages.com , which can not be forgotten.

Secondly, it’s your job to search for an image you would like to embed on your page, post, or text widget. I hope that you will find the suitable one because as long as there’s something worth photographing, chances are they’ll have an image of it.

Thirdly, move your mouse to the image you would like to use, there will be a box appears which offers you the embed option.

Fourthly, look at the embed option and then click the embed icon if available because some images may be restricted to this function.

Fifthly, you will see a box appears after clicking the icon and then copy the code from that box.

Sixthly, as usual, after copying code, you need to paste it into your post or page using a Custom HTML Block, or a text widget. It will automatically be converted to a WordPress.com embed code for you. There is an example of the code below:

Conclusion

The preceding step-by-step instruction is to help you to embed an image on Getty Images with an embed code to your blog in WordPress. A few times of practicing will help you. We hope that you find it helpful to follow the guidance. Please let us know if there is any problem so far.

Источник

Inserting Images into Posts and Pages

Topics

Overview

When creating or editing a WordPress page or blog post, you can easily add images at any time using the WordPress Media Uploader tool. Here’s how to add an image, step-by-step, using the media uploader:

Step 1 – Placing your cursor

In order to add an image to your page or post, you must first insert your cursor in the place in the text where you want the image to appear. By placing your cursor within your text, you can add images inline with your content. You can also place your cursor on a blank line if you want the image to appear by itself instead.

Tip: It’s a good idea to place your cursor on the left margin of your text, even if you want the image to appear on the right. That’s because there is a special setting called Alignment that allows you to control whether the image appears on the right or the left side of the text. It even controls how text flows around the image automatically.

Step 2 – Click the Add Media button

Once you’ve placed your cursor on the line where you want your image to appear, click on the Add Media button to launch the media uploader interface, and then select the Insert Media option from the list of actions in the left side of the media uploader window.

Читайте также:  Драйвер для принтера canon lbp 3010 на русском языке

Step 3 – Add or Select Your Image

You can add or select the image you want to add to your page or post by choosing from either of the following options in the center of the media uploader window:

  • Upload Files: Upload the image you want to use from your computer by dragging it into the upload area.
  • Media Library: Select from any previously uploaded images in the media library by clicking on the one you wish to add to your page or post.

Once you have selected or uploaded the image you want to add, You will see a checkbox next to the thumbnail confirming your selection, and see information about it displayed in the Attachment Details pane on the right hand side of the media uploader interface.

Step 4 – Attachment Details

The Attachment Details pane displays a small un-cropped thumbnail of the image, as well as important information such as the filename, date uploaded, and image dimensions in pixels.

There are also action links that allow you to Edit Image, which takes you to the page, or to Delete Permanently to remove the image from your site.

In addition, you can edit the following media information:

  • Title: The title of this media.
  • Caption: The caption for this image. The text you enter here will be displayed below the image.
  • Alternate Text: Enter the Alt text for the image, e.g. “The Mona Lisa” to describe the media.
  • Description: A description for this particular media.

For more information on these media settings, see the Edit Media page.

Step 5 – Attachment Display Settings

The Attachment Display Settings pane controls how the image is displayed when viewed on the site.

You have options to set how you would like the image aligned on the page (in relation to the text and margins) and what the link behavior of the image will be, In addition you can set what size image you would like to display on your page.

Image Alignment

The Alignment setting allows you to determine where you would like the image to appear in your content area and how it interacts with any text on the page. You have the following image alignment options to choose from:

  • Left: Aligns the image on the left hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the right.
  • Right: Aligns the image on the right hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the left.
  • Center: Aligns the image to the center of the page, with no text displayed around it.
  • None: Inserts the image in to the page with no alignment

The Link To settings determine the URL/web address to which the image will be linked when clicked on by a visitor to your site. You can specify the following image link settings:

  • Attachment Page: Links your inserted image to its WordPress media attachment page.
  • Media File: Links your inserted image directly to the original, full-size version of the file.
  • Custom URL: Allows you to set a custom link URL for your inserted image to link to when clicked.
  • None: This setting will remove the link completely, rendering the image “un-clickable”.

Image Size

The Size settings determine the size of the image you are adding to your site. By default WordPress creates a range of four image size for you to choose from:

  • Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. Note, by default the Thumbnail size is a square, so some cropping of your original image may occur.
  • Medium: Displays a medium-sized version of your image on the page/post. This is a good size to use with Left/Right alignments, as it leaves sufficient space for legible text to either side.
  • Large: Displays a large-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space.
  • Full Size: Displays a full-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space. If your original image is larger than this column width, the full size of the image may not be displayed.

You can visit the Settings>Media section of your WordPress dashboard to customize the above image sizes.

Step 5 – Inserting the image

Once you have determined your image settings, click on the blue Insert into post or Insert into the page button, to add the image to your page or post. After the image uploader window closes, you will see the image in the text editor window, including a preview of the alignment of the image, if you have specified an image alignment.

Читайте также:  Как подключиться по ssh к виртуальной машине через командную строку

At any time, you can edit the image settings by clicking on the Edit Image button in the upper left hand corner. You can remove the image from your page/post by clicking on the Remove Image button.

Источник

Embedding images in wordpress

When creating or editing a WordPress page or post, you can easily embed many different types of media at any time using the WordPress Add Media tool.

Embeddable media include:

  • Images
  • Audio
  • Video
  • Documents of various types

The following will take you step by step through the process of embedding media into your content.

Step 1 – Placing your cursor

In order to embed media in your page or post content, you must first insert your cursor in the place in the text where you want the media to appear. By placing your cursor within your text, you can embed media inline with your content. You can also place your cursor on a blank line if you want the media to appear by itself.

Tip: It’s a good idea to place your cursor on the left margin of your text, even if you want media to appear on the right. This is because there is a special setting called Alignment that allows you to control whether the image appears on the right or the left side of the text. It even automatically controls how text flows around media embeds.

Step 2 – Click the Add Media button

Once you’ve placed your cursor on the line where you want your media to appear, click on the Add Media button to launch the media uploader interface, then select the Insert Media option from the list of actions in the left side of the media uploader window.

As of WordPress Version 3.9, you may also drag media directly onto the editor to upload them.

Step 3 – Add or Select Your Media

You can upload or select the media you want to add to your page or post by choosing from either of the following options in the center of the media uploader window:

  • Upload Files: Upload the media you want to use from your computer by dragging it into the upload area.
  • Media Library: Select from any previously uploaded media in the media library by clicking on the one you wish to add to your page or post.

Once you have selected or uploaded the media you want to add, you will see a checkbox next to the thumbnail confirming your selection, and you will see the selected media displayed in the Attachment Details pane on the right hand side of the media uploader interface.

Step 4 – Attachment Details

The Attachment Details pane displays a small preview or icon as well as important information such as the filename, date uploaded, and dimensions in pixels for image files or length for audio/video files.

Title The name of this media. Caption Brief explanation. This text will be displayed below the image. Alternate Text This text is required with all images for improved accessibility for those with impaired or low vision who may be using screen readers or other assistive technologies. Use text that makes sense when read out loud along with the context of any text that appears before or after the image on the published page. If the textual context is already present, there is no need to duplicate the text. Instead, use the alt text to add information or an additional detail or two about what is actually in the image. Description An explanation of this particular media.

The Attachment Display Settings pane controls how the media embed will be displayed when viewed on the site. Alignment Left, Center, Right, or None Link To Media File, Attachment Page, Custom URL, None Link URL Read-only display of the media URL or web address. Size Thumbnail, Medium, Large, Full Size

Available sizes depend on what sizes were generated for the image at the time it was uploaded based on the sizes in Settings > Media compared to the original image size. The new image will only be generated if it the dimensions are equal to or smaller than the original image size.

For images, there are also action links that allow you to Edit Image, which takes you to the Edit Media page, or to Delete Permanently to remove the image from your site.

Audio and video files have embed options instead of alignment, link, and size options.

Image Alignment

The Alignment setting allows you to determine where you would like the image to appear in your content area and how it interacts with any text on the page. You have the following image alignment options to choose from:

  • Left: Aligns the image on the left-hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the right.
  • Right: Aligns the image on the right-hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the left.
  • Center: Aligns the image to the center of the page, with no text displayed around it.
  • None: Inserts the image into the page with no alignment
Читайте также:  Как удалить папку пользователя linux

Top row: Left and Right alignments. Bottom row: Center and «None» alignments

The Link To settings determines where someone is taken when they click the image. You can specify the following image link settings:

  • Attachment Page: Links your inserted image to its WordPress media attachment page.
  • Media File: Links your inserted image directly to the original, full-size version of the file.
  • Custom URL: Allows you to set a custom link URL for your inserted image to link to when clicked.
  • None: This setting will remove the link completely, rendering the image “un-clickable”.

Image Size

The Size settings determine the size of the image you are adding to your site. By default WordPress creates a range of four image size for you to choose from:

  • Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. Note, by default the Thumbnail size is a square, so some cropping of your original image may occur.
  • Medium: Displays a medium-sized version of your image on the page/post. This is a good size to use with Left/Right alignments, as it leaves sufficient space for legible text to either side.
  • Large: Displays a large-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space.
  • Full Size: Displays a full-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space. If your original image is larger than this column width, the full size of the image may not be displayed.

Thumbnail, Medium, and Large image sizes (Image Alignment: Left)

You can visit the Settings > Media section of your WordPress dashboard to customize the image sizes. Note that the sizes and the thumbnail crop are set at the time the image is uploaded. Those generated images then become the size options shown here.

As of WordPress Version 3.9, you can now grab the handles that appear when you click on an image and resize the image by dragging.

Step 5 – Inserting Media

Once you have determined your embed settings, click on the Insert into post or Insert into page button at the bottom right to add the media. After the media uploader window closes, you will see the media in the editor window.

Image Details

There are several options available for modifying image details after an image has been added. To change image details, click on an image in the editor and then click the edit icon to open the Image Details screen, or remove the image by clicking the «x» icon. You can adjust the alignment of the image by clicking Align left, Align center, Align right or No alignment icons.

The Image Details screen can be used to modify image attributes for individually inserted media files. Click the «Advanced Options» heading to see additional options.

  • Caption: Brief explanation. This text will be displayed below the image.
  • Alternative Text: Text to described the media. Used by screen readers.
  • Align: Image placement within the content area.
  • Size: Selected sizes based on images sizes generated at upload time.
  • Link To: Destination when someone clicks on an image.
  • Image Title Attribute: Sets a title for the «img» HTML tag. Used as a tooltip that appears when you hover over the image.
  • Image CSS Class: Adds a CSS class to the «img» HTML tag that can then be used to style the image via a custom CSS plugin or a child theme.
  • Open link in a new window/tab: Adds target=»_blank» to the link HTML.
  • Link Rel: Sets the link relationship or link type.
  • Link CSS Class: Adds a CSS class to the link HTML that can then be used to style the link via a custom CSS plugin or a child theme.

Here is the output by the Image Details shown in the example above:

Changes in 3.9

As of WordPress Version 3.9, some image details settings such as borders, margins, and styles are no longer available in the Image Details screen to try to encourage best practices in content management by reducing the amount of inline styling added on a per-image basis. Adding inline styles instead of relying on the theme or custom CSS can lead to bloated HTML which can then make it difficult to keep images looking good in various display sizes (including mobile views) or after switching themes. Ideally, a well-coded theme will handle image borders and margins sufficiently. However, if you do still want to add inline styles for some images manually, you may still do so using HTML editor by clicking the Text tab at the top right of the edit area and adding inline CSS. There are also plugins available, such as Advanced Image Styles, which will add back options in the Image Details screen for image borders and margins.

The source field was changed to a «Replace» button located just below the image inside the Image Details screen. If you want to use an image that is not located in your media library and that you don’t want to upload into your media library, you should add it by using the Add Media > Insert from URL option.

Источник

Поделиться с друзьями
КомпСовет
Adblock
detector