Image embedder and attribution maker.

for Unsplash, Pexels, Wikimedia Commons, Pixabay and Flickr CC
(Also works with Shutterstock, if you have a paid subscription).

A Bookmarklet to create HTML snippets to embed your selected image, with proper attribution. This can then be pasted into Moodle, or any website that includes Bootstrap 4+.

For those sites NOT running Bootstrap (such as Canvas LMS) a new "Inline CSS" option is now available. This option has fewer features but will work on any website.

First time user?

Follow the instuctions below. Watch the video for step-by-step instructions.

First time user?

  1. Drag the following bookmarklet into your browers bookmark bar: Attribution maker +
    (Note: Make sure you drag the link onto your browser bookmarks. Clicking will just bring you back to here)
  2. Vist any of the supported sites, listed above
  3. Click on the 'Attribution maker' in your bookmarks
  4. You will be returned to this page, but now your selected image will be displayed below
  5. Press the copy button next to the layout type that you prefer. This will copy the HTML to your clipboard
  6. Paste this HTML anywhere that you can paste code (eg a Moodle page or tool)

Image embedder and attribution maker (12:56)

Important note - Pixabay previews expire in 24hrs

Pixabay does not allow hot-linking (embedding) and their previews will expire within 24 hrs

To protect against this, ensure that you:

  1. Download the appropriately sized image
  2. Upload this to Moodle (or other system) to replace the preview

Your chosen image does not allow for re-use

This Flickr image has an "All Rights Reserved" licence, that does not allow for re-use.

This service will not allow you to breach this licence restriction. Please choose a different image

You can search Flickr for Creative Commons licenced images, or use one of the other image services listed above

You must have a commercial subscription with shutterstock, to use this image.

Shutterstock images are commercially licenced and there is a cost associated with this image.

This service provides you with a watermarked placeholder image. You must replace this placeholder image with a paid original image, that is downloaded separately via your subscription with shutterstock.

If you do not have a shutterstock subscription, select from one of the free image services listed above

Not seeing the correct Shutterstock image? Make sure you refresh your browser, BEFORE you click on the attribution maker.

You will need to update your Bookmarklet, to use Shutterstock

Shutterstock support was added on 20.01.22. You seem to be using the old bookmarklet, added before this date.

To update your bookmarklet, follow the "First time" instructions above.

Layout style: (Some features only available under Bootstrap)
Image attribution:
Relative size of floated images:

Float Right (Image to the right of text)

Image will occupy 42% of the available space.
The image will resize and the text will reflow as you resize the browser.

The following placeholder text is included to show the relationship between the image and text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Download small image

Float Left (Image to the left of text)

Image will occupy 42% of the available space.
The image will resize and the text will reflow as you resize the browser.

The following placeholder text is included to show the relationship between the image and text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Download small image

Full width (Image above or below text)

Image will occupy 100% of the available space

Download large image

Full width, with text overlay (Custom text overlay)

Image will occupy 100% of the available space. Text overlay can be edited by you, after embedding

Text overlay goes here

Optional byline or citation goes here. Delete if not required.

Download large image

Cropped

Use this to dynamically resize and crop an image. You can then download your cropped image, lower

Original

Live preview


Cropped image

Download cropped image

Text only

Use this option to copy the attribution statement ONLY. This is useful if you are using the image outside of Moodle (eg, in a PowerPoint Presentation), but still need to attribute the image

Attribution statement goes here
Download large image