|
| 1 | +title: Creative Commons WordPress plugin: attribution for images |
| 2 | +--- |
| 3 | +categories: |
| 4 | +cc-wp-plugin |
| 5 | +open-source |
| 6 | +tech |
| 7 | +wordpress |
| 8 | +--- |
| 9 | +author: rczajka |
| 10 | +--- |
| 11 | +pub_date: 2020-10-01 |
| 12 | +--- |
| 13 | +body: |
| 14 | +As a part of [Centrum Cyfrowe](https://centrumcyfrowe.pl)'s [#NoWorries]() project funded by EUIPO, |
| 15 | +I have had the pleasure of enhancing the Creative Commons Wordpress plugin. |
| 16 | +The new version of CC's Wordpress plugin has a feature called |
| 17 | +“attribution information for images”. It works like this: |
| 18 | + |
| 19 | +1. you upload an image to the Wordpress Media Library and fill out the |
| 20 | +correct attribution information there. |
| 21 | +2. You then insert the image into a page using the Image Gutenberg block. |
| 22 | +3. When the image is then displayed on site, the plugin will show the |
| 23 | +attribution information – the name of the author, the image's title |
| 24 | +and link to source, and the CC license used – right there, in a nice |
| 25 | +semi-transparent overlay over the image. |
| 26 | + |
| 27 | +## How does it work? |
| 28 | + |
| 29 | +To find the relevant information from the Media Library, the plugin |
| 30 | +reuses the information already provided by Gutenberg Image Blocks. |
| 31 | +Each time an image is inserted using such a block, Wordpress adds a |
| 32 | +special CSS class to it, in the form of `wp-image-{id}`, containing |
| 33 | +the image's identifier in the Media Library. It can be used to add |
| 34 | +individual styles to a specific image – we're using it to find the |
| 35 | +relevant entry in the Media Library and add individual attribution |
| 36 | +information. With this approach, we avoid the need for any custom |
| 37 | +markup – while also only hitting the database with a query when an |
| 38 | +actual image from the Media Library is found on the page. |
| 39 | + |
| 40 | +All you need to do is make sure the licensing information is there in |
| 41 | +the Media Library, and that the images are inserted using the Image |
| 42 | +block. |
| 43 | + |
| 44 | +This wasn't the first attempt at adding a similar function to the CC |
| 45 | +Wordpress plugin. The previous attempt used a `[license]` shortcode |
| 46 | +wrapping the image – which it's unwieldy with the current Wordpress |
| 47 | +Gutenberg editor. It also used multiple calls to |
| 48 | +`attachment_url_to_postid` to locate the image in the Media Library, which |
| 49 | +meant executing more database queries for each image. With the new |
| 50 | +approach, the user doesn't have to change their posts at all – all |
| 51 | +they need to do is install the plugin and add attribution information |
| 52 | +in the Media Library, and it will automatically start working for |
| 53 | +their normally inserted images. |
| 54 | + |
| 55 | +See here how to install the plugin: |
| 56 | +<video src="install.mp4" controls></video> |
| 57 | + |
| 58 | +See here how to use the image attribution function: |
| 59 | + |
| 60 | +<video src="use.mp4" controls></video> |
0 commit comments