Add random image of ISIL organization to homepage

[acka47]

We thought about replacing the big lobid butterfly+triple log at http://lobid.org/organisations by a random picture of an ISIL organization from Germany, Austria and Switzerland. Here is a wikidata query for getting such pictures: http://tinyurl.com/hlz5e4x

##defaultView:ImageGrid
SELECT ?image ?item ?itemLabel
WHERE
{
  ?item wdt:P18 ?image .  
  ?item wdt:P791 ?isil  .
  FILTER (regex(?isil, "(AT|CH|DE)-.*")).
  SERVICE wikibase:label { bd:serviceParam wikibase:language "de" }
}

Each picture should have the organization name and place (both from lobid data) as caption linking to the corresponding lobid entry, naming wikimedia commons as source with an underlying link to the picture's commons page for attribution. The picture itself should also link to the commons page.

E.g. https://upload.wikimedia.org/wikipedia/commons/2/29/Steintor_Anklam.JPG should have the following caption:

Museum im Steintor, Anklam (Quelle: Wikimedia Commons)

HTML (<figure> approach from http://tosbourn.com/correct-way-markup-image-caption-html/):

<figure>
    <img src="https://upload.wikimedia.org/wikipedia/commons/2/29/Steintor_Anklam.JPG" alt="Museum im Steintor, Anklam" />
 <figcaption>
 <a href="http://lobid.org/organisations/DE-MUS-890115">Museum im Steintor, Anklam</a> (Quelle: <a href="https://commons.wikimedia.org/wiki/File:Steintor_Anklam.JPG">Wikimedia Commons</a>
 </figcaption>
</figure>

[acka47]

For correct attribution referencing Wikimedia Commons is not enough. We also have to get creator and license information. This is easy via the Wikimedia Commons API, thanks to @raymondde for helping me out. For the current example the call ist: https://commons.wikimedia.org/w/api.php?action=query&format=json&prop=imageinfo&list=&titles=file%3ASteintor_Anklam.JPG+&iiprop=extmetadata

Response.

{
   "batchcomplete":"",
   "query":{
      "normalized":[
         {
            "from":"file:Steintor_Anklam.JPG ",
            "to":"File:Steintor Anklam.JPG"
         }
      ],
      "pages":{
         "7515535":{
            "pageid":7515535,
            "ns":6,
            "title":"File:Steintor Anklam.JPG",
            "imagerepository":"local",
            "imageinfo":[
               {
                  "extmetadata":{
                     "DateTime":{
                        "value":"2009-08-09 09:01:37",
                        "source":"mediawiki-metadata",
                        "hidden":""
                     },
                     "ObjectName":{
                        "value":"Steintor Anklam",
                        "source":"mediawiki-metadata",
                        "hidden":""
                     },
                     "CommonsMetadataExtension":{
                        "value":1.2,
                        "source":"extension",
                        "hidden":""
                     },
                     "Categories":{
                        "value":"CC-BY-SA-3.0,2.5,2.0,1.0|GFDL|License migration redundant|Self-published work|Steintor (Anklam)",
                        "source":"commons-categories",
                        "hidden":""
                     },
                     "Assessments":{
                        "value":"",
                        "source":"commons-categories",
                        "hidden":""
                     },
                     "ImageDescription":{
                        "value":"<p>Das Steintor in Anklam (Vorpommern).\n</p>",
                        "source":"commons-desc-page"
                     },
                     "DateTimeOriginal":{
                        "value":"2009-08-01",
                        "source":"commons-desc-page"
                     },
                     "Credit":{
                        "value":"<span class=\"int-own-work\" lang=\"en\">Own work</span>",
                        "source":"commons-desc-page",
                        "hidden":""
                     },
                     "Artist":{
                        "value":"<a href=\"//commons.wikimedia.org/wiki/User:Michael_Sander\" title=\"User:Michael Sander\">Michael Sander</a>",
                        "source":"commons-desc-page"
                     },
                     "LicenseShortName":{
                        "value":"CC BY-SA 3.0",
                        "source":"commons-desc-page",
                        "hidden":""
                     },
                     "UsageTerms":{
                        "value":"Creative Commons Attribution-Share Alike 3.0",
                        "source":"commons-desc-page",
                        "hidden":""
                     },
                     "AttributionRequired":{
                        "value":"true",
                        "source":"commons-desc-page",
                        "hidden":""
                     },
                     "LicenseUrl":{
                        "value":"http://creativecommons.org/licenses/by-sa/3.0",
                        "source":"commons-desc-page",
                        "hidden":""
                     },
                     "Copyrighted":{
                        "value":"True",
                        "source":"commons-desc-page",
                        "hidden":""
                     },
                     "Restrictions":{
                        "value":"",
                        "source":"commons-desc-page",
                        "hidden":""
                     },
                     "License":{
                        "value":"cc-by-sa-3.0",
                        "source":"commons-templates",
                        "hidden":""
                     }
                  }
               }
            ]
         }
      }
   }
}

We need imageinfo.Artist.value and imageinfo.LicenseShortName.value+imageinfo.LicenseUrl.value for creating the correct attribution. For the example this would look like:

<figure>
    <img src="https://upload.wikimedia.org/wikipedia/commons/2/29/Steintor_Anklam.JPG" alt="Museum im Steintor, Anklam" />
 <figcaption>
 <a href="http://lobid.org/organisations/DE-MUS-890115">Museum im Steintor, Anklam</a> (Quelle: <a href="https://commons.wikimedia.org/wiki/User:Michael_Sander">Michael Sander</a>, <a href="https://commons.wikimedia.org/wiki/File:Steintor_Anklam.JPG">Wikimedia Commons</a>, <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> )
 </figcaption>
</figure>

[fsteeg]

Deployed to staging: http://test.lobid.org/organisations

[acka47]

Nice. I see two things that need improvement:

1. Currently the images are loading extremely slow. (When I load the same image at wikimedia commons it is much faster.)
2. The placing of the images is not ideal as the image is shown at the right margin. It would be better to have it right next to the description text or in the middle between text and the right margin.

Example view on my laptop browser:

[fsteeg]

I think the slow loading is a VPN issue. It's slow here for me today as well, but it was not an issue in the office on Friday. The left-alignment looked odd, because the nav and search bar are full width. Left section left-aligned and right section right-aligned looks much better. Also the previous image was right-aligned as well. Maybe the issue is the general unlimited page width, which makes it look a little odd on wide screens. We might want to make it more like http://lobid.org/resources (in hbz/lobid-resources#281).

[acka47]

Maybe the issue is the general unlimited page width, which makes it look a little odd on wide screens. We might want to make it more like http://lobid.org/resources (in hbz/lobid-resources#281).

+1

[acka47]

+1

[ChristophEwertowski]

Going through the comments, I miss the place of the organisations at the caption (like "organisation, place"). If there is no place given like for the DNB (Wikidata) it's no tragedy either.
It is better that the picture links to the organisation and not to the commons page. And I also agree on the centralising of the pace like in lobid resources.

[fsteeg]

I miss the place of the organisations at the caption (like "organisation, place"). If there is no place given like for the DNB (Wikidata) it's no tragedy either.

Yes, most organisations don't have the location in their name.

[acka47]

@ChristophEwertowski is referring to my requirement from above:

Each picture should have the organization name and place (both from lobid data) as caption linking to the corresponding lobid entry

I agree that this should be added.

[fsteeg]

Redeployed to staging: http://test.lobid.org/organisations

[acka47]

I can now see the location. Now I realized that the actual picture links to the lobid entry (with an empty format parameter in the end that could be removed). above I said

The picture itself should also link to the commons page.

@fsteeg Any special reason you linked to lobid?

[ChristophEwertowski]

+1
@acka47 : If I am on a website with information about organisations I want to access them, e.g. "tell me more about it". In most cases the pictures aren't so beautiful that I would want to access them to save them for my desktop screen ;)

[fsteeg]

The picture itself should also link to the commons page.

@fsteeg Any special reason you linked to lobid?

Must have missed that part, I thought this was what we came up with when we originally talked about it. I agree with @ChristophEwertowski that the image is the place most people will click to get details about the organisation. To get to the image source, there's the 'Wikimedia Common' link below the caption.

[acka47]

Ok. +1 then.

[acka47]

For the record, the query for items with ISIL and without an image: http://tinyurl.com/kdgjpc6