License field for media and nodes

[hexabinaer]

• We are publishing most content (CMS portraits, articles) under CC-BY SA. However, some contributors (want to) make exceptions.
• Media assets have a creator. Period. We want a mandatory field to reflect this. While we are at it, we should give the complete credits, and that includes the license.

Seems like a good idea to support a module that focuses both purposes:

https://www.drupal.org/project/license_field

Update: Talking about this one: https://www.drupal.org/project/attribution

[sanduhrs]

The referenced module license_field has no releases. In fact it does not have any code at all ;) All the other modules I found were creative-commons related and do not have any D8 / D9 releases.

Do you actually have a module in mind?

[hexabinaer]

To do Meike: sample markup for accessible graphic CC license output

[hexabinaer]

<div class="license-icons">
  <a rel="license" href="https://creativecommons.org/licenses/by/4.0/" title="Creative Commons Attribution 4.0 International license">
    <i class="cc-icon-cc"><span>CC</span></i>
    <i class="cc-icon-cc-by"><span>BY</span></i>
    <i class="cc-icon-cc-nc"><span>NC</span></i>
    <i class="cc-icon-cc-nd"><span>ND</span></i>
    <i class="cc-icon-cc-sa"><span>SA</span></i>
    <i class="cc-icon-cc-0"><span>Public Domain</span></i>
  </a>
</div>

Senseless in this combination but it should work in the given combinations. All attributes after CC are concatenated by a dash: CC BY-NC-ND

The basic markup would work without theming (with screen readers) but can be transformed to icons

[sanduhrs]

Just committed the new template. The generated markup looks like this

<div class="attribution--license-icons">
  <a rel="license" href="https://spdx.org/licenses/CC-BY-NC-SA-4.0.html#licenseText" title="Creative Commons Attribution Non Commercial Share Alike 4.0 International">
    <i class="cc-icon-cc-cc"><span>CC</span></i>
    <i class="cc-icon-cc-by"><span>BY</span></i>-
    <i class="cc-icon-cc-nc"><span>NC</span></i>-
    <i class="cc-icon-cc-nd"><span>ND</span></i>-
    <i class="cc-icon-cc-sa"><span>SA</span></i>
    <i class="cc-icon-cc-version"><span>4.0</span></i>
  </a>
</div>

[hexabinaer]

Note to self: testing + styling

[hexabinaer]

Afterwards: contribute sample css

[hexabinaer]

[hexabinaer]

Note to self:

Edit form

Display

Widget "Creative commons icons"

Widget "Creative Commons" (default)

Widget "HTML"

Widget "Plain"

[hexabinaer]

WIP:

.attribution--license-icons {
  position: relative;
  font-size: small;
  width: auto;
  background-color: #aaa;
  padding: .15rem .25rem;
  display: flex;
  flex-flow: row nowrap;
  align-content: center;
  border: 1px solid #000;
  border-radius: 3px;
  border-bottom: 1.25rem solid #000;
  height: 1.25rem;
  margin: .5rem 0;
}

.attribution--license-icons i {
  font-style: normal;
  position: relative;
  top: .75rem
}

i[class^="cc-icon-cc"] {
  background-color: #000;
  color: #fff;
  padding: 0rem .25rem;
}

[hexabinaer]

Icons source: https://creativecommons.org/about/downloads

[hexabinaer]

Update

/* Makeshift CC buttons via text formatting (accessible) */

.attribution--license-icons {
/*  font-size 10px is closer to original but not accessible */
  font-size: smaller;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  width: auto;
  height: calc(1rem + 4px);
  overflow: hidden;
  background-color: #000;
  border: 1px solid #000;
  border-radius: 1px;
  font-weight: bold;
}

.attribution--license-icons a {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  border: 1px solid #fff;
  height: 1rem;
}

.attribution--license-icons i {
  padding: .125rem 0 0;
  line-height: 1rem;
  color: #fff;
  font-style: normal;
}

.attribution--license-icons i:last-child {
  padding-right: .5rem;
}

.attribution--license-icons .cc-icon-cc-cc {
  position: relative;
  left: -.25rem;
  top: -.0rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  text-align: center;
  margin-right: .25rem;
  background-color: #aaa;
  padding: .25rem;
  color: #000;
}

.attribution--license-icons .cc-icon-cc-cc span {
  display: inline-block;
  height: 1.25rem;
  width: 1.5rem;
  border: 2px solid #000;
  border-radius: 50%;
  padding: .35rem 0 0;
  background-color: #fff;
  text-align: center;
  font-weight: bold;
}

.attribution--license-icons .cc-icon-cc-version span {
  display: none;
}

[hexabinaer]

Template memo:

• Icon for CC0 would look somewhat like "(0) Public domain". Current markup <i class="cc-icon-cc-cc0"><span>CC0</span></i><i class="cc-icon-cc-version"><span>1.0</span></i> </a> needs work.
• Omit version number in Icon formatter