Image/YouTube Embedder & Attribution Maker
for Unsplash, Pexels, Wikimedia Commons, Pixabay, Flickr CC & YouTube
(Also works with Shutterstock, if you have a paid subscription).
A Bookmarklet to create HTML snippets to embed your selected Image or YouTube video, 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?
- 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) - Vist any of the supported sites, listed above
- Click on the 'Attribution maker' in your bookmarks
- You will be returned to this page, but now your selected image will be displayed below
- Press the copy button next to the layout type that you prefer. This will copy the HTML to your clipboard
- 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:
- Download the appropriately sized image
- 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
Your chosen image is from Unsplash+
Unsplash+ images require an annual subscription and must be paid for. If you choose to pay for such images, Unsplash+ will provide the appropraite attribution for you.
This service will not allow you to breach this licence restriction. Please choose a different image. You can filter your Unsplash images for Licence = free, 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.
Float Right (Image to the right of text)
Image will occupy 42% of the available space, on larger screens (760px and above).
On smaller screens, the image will become 100% wide (Bootstrap Only).
The following placeholder text is included to show the relationship between the image and text. The image will resize and the text will reflow as you resize the browser.
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 imageFloat Left (Image to the left of text)
Image will occupy 42% of the available space, on larger screens (760px and above).
On smaller screens, the image will become 100% wide (Bootstrap Only).
The following placeholder text is included to show the relationship between the image and text. The image will resize and the text will reflow as you resize the browser.
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.
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 imageFull width (Image above or below text)
Image will occupy 100% of the available space
Image Card, with Quote and Attribution
Image and quotation are in a card that occupies 80% of the screen. The quote and attribution are customisable, by using the input fields below the image
We cannot solve our problems with the same thinking we used when we created them.
Side-by-side alternative
Image and quotation are side-by-side in a card that occupies 100% of the screen. The quote and attribution are customisable, by using the input fields below the image
We cannot solve our problems with the same thinking we used when we created them.
Image Card, with 'Hero text'
Image and text are in a card that occupies 80% of the screen. The text is customisable, by using the input fields below the box
These cards tend to be a bit 'shout-ey' so use them sparingly.
Card Heading.
Card body text. This text is larger than standard body text. Use this to draw visual attention to an important concept or passage of text. Use sparingly.
Side-by-side alternative
Image and hero text are side-by-side in a card that occupies 100% of the screen. The text is customisable, by using the input fields below the image
Card Heading.
Card body text. This text is larger than standard body text. Use this to draw visual attention to an important concept or passage of text. Use sparingly.
Full width, with text overlay (Custom text overlay)
Image will occupy 100% of the available space. The text overlay and byline are customisable, by using the input fields below the image.
Cropped
Use this to dynamically resize and crop an image. You can then download your cropped image, lower
Original
Live preview
Cropped image
Text only
Use this option to copy the attribution statement ONLY. Useful for if you want to achieve your own layout of image and attribution.
Rich Text Format (Word, PowerPoint etc)
Use this option to copy the the image and its attribution directly into Word, PowerPoint or any application that supports Rich Text Format (RTF) content.
Advanced features only (experimental)
Each of the following layouts combine multiple images into the one display.
These images are drawn from your recent history (newest first). Up to 12 images will be used. You can drag the slider at the top to set the number of images.
Carousel
Tiles
Tiles (as background images)
Setting the tiles with backround images has the advantage that each tile is exactly the same height, with the image being cropped to fit.
This ensures a more even dispay, but the tradeoff is the HTML is more complicated and it is much more difficult to swap out the images, later (eg, in Moodle)
Image wall
Images are displayed in three columns, in a masonry pattern. This can be useful if you have images of different dimensions (eg. a mix of landscape and portrait)
You may need to play with the order of images, in order to get a layout that looks pleasing. Use the 'Let me choose which images to use' feature and select the images in the order that you want them displayed (down the columns, then across)
Responsive YouTube video embed
This provides dynamic YouTube embed code, complete with title, optional description, playtime and attribution. This video is responsive and will always fit 100% of it's container
Use these settings to customise the look and feel of the YouTube video.
[Optional] Set the start and/or end time.
Play the video to establish these timings, then click "match current playtime" when you have hit your preferred start or end time.