Create similar year selection widged that is used in Fortepan.
- https://fortepan.hu/en/photos/?year=1924
**Required features**
- ability to select specific year using slider
- ability to show images between start and end years as alternative for specific year
- show filtered images as imagegrid
- In the UI, there should be the ability to define a PetScan ID as a photo source. Use [[ https://petscan.wmcloud.org/?psid=33506148 | 33506148 ]] as the default PetScan ID.
**Source photos**
- Use photos from Petscan query https://petscan.wmcloud.org/?psid=33506148 (same as [[ https://petscan.wmcloud.org/?psid=33506148&format=json | json ]]) as source photos
**Implementation**
- Create separate user script for the task
- Keep code as simple. Idea would be test the idea, but if it works then use it as widget (in Cat-a-lot for example)
- Use [[https://commons.wikimedia.org/wiki/Special:BlankPage/Cat-a-lot_yearfilter]] as a page where code will open its UI
-- You can use following code to test the page name
```
if (mw.config.get("wgPageName") !== "Special:BlankPage/Cat-a-lot_yearfilter") { return; }
```
- thumbnail size can be defined using width-parameter:
-- https://commons.wikimedia.org/w/index.php?title=Special:Redirect/file/Helsingin_olympialaiset_1952_-_XLVIII-254_-_hkm.HKMS000005-km0000mrci.jpg&width=120
- do Petscan query only once and use same data until user manually requests update (for different Petscan id for example)
- from petscan Query you will get page_ids which you can convert to mediaitems for SPARQL query.
-- page id: 100129757 -> [[ https://commons.wikimedia.org/entity/M100129757 | sdc:M100129757 ]] ([[ https://qlever.cs.uni-freiburg.de/wikimedia-commons/Xt4YYw | example sparql query with mediaitems ]])
**Example SPARQL queries for year filtering**
**SPARQL Query using specific year**
- https://qlever.cs.uni-freiburg.de/wikimedia-commons/fKP0Ts
```
PREFIX wd: <http://www.wikidata.org/entity/>
PREFIX wdt: <http://www.wikidata.org/prop/direct/>
SELECT * WHERE {
?media wdt:P9478 ?finna_id .
?media wdt:P571 ?inception .
?media schema:url ?image.
FILTER(YEAR(?inception) = 1965)
}
LIMIT 100
```
**SPARQL Query using between start and end year**
https://qlever.cs.uni-freiburg.de/wikimedia-commons/Xt4YYw
```
PREFIX wd: <http://www.wikidata.org/entity/>
PREFIX wdt: <http://www.wikidata.org/prop/direct/>
SELECT * WHERE {
?media wdt:P9478 ?finna_id .
?media wdt:P571 ?inception .
?media schema:url ?image.
FILTER(YEAR(?inception) >= 1923 && YEAR(?inception) <= 1968)
}
LIMIT 100
```
**SPARQL query where target photos are defined using mediates**
mediaitem = "sdc:M" + page_id
- use POST instead of GET
- basically number of items in VALUES keyword is unlimited. It is OK to list 50000 mediaitems.
- https://qlever.cs.uni-freiburg.de/wikimedia-commons/UjLngR
```
PREFIX wd: <http://www.wikidata.org/entity/>
PREFIX wdt: <http://www.wikidata.org/prop/direct/>
SELECT * WHERE {
VALUES ?media { sdc:M100129757 sdc:M100212050 sdc:M100254412 }
?media wdt:P571 ?inception .
?media schema:url ?image.
FILTER(YEAR(?inception) >= 1923 && YEAR(?inception) <= 1968)
}
LIMIT 100
```
**SPARQL query using Javascript example**
```
// The SPARQL endpoint URL/* <nowiki>
const * Minimal QLever SPARQL Query Script for Wikimedia Commons using POST
*/
(function() {
// QLever SPARQL endpoint for Wikimedia Commons
var endpoint = 'https://qlever.cs.uni-freiburg.de/api/wikimedia-commons';
// A simple // SPARQL query to find images with inception dates in a specific rangeas a template literal
const q var sparqlQuery = `
PREFIX wd: <http://www.wikidata.org/entity/>
PREFIX wdt: <http://www.wikidata.org/prop/direct/>
PREFIX schema: <http://schema.org/>
SELECT ?media ?inception ?image WHERE {
?media wdt:P9478 ?finna_id .
?media wdt:P571 ?inception .
?media schema:url ?image .
FILTER(YEAR(?inception) >= 1923 && YEAR(?inception) <= 1968)
}
LIMIT 20
`;
// Function to execute the query
function executeSPARQLQuery(queryString) {
// Encode the query for URL
const encodedQuery = encodeURIComponent(queryString);
const queryUrl = `${endpoint}?// Prepare POST parameters by URL-encoding the query=${encodedQuery}& and desired output format=json`;
console.log('Executing SPARQL qvar postParams = 'query=' + encodeURIComponent(sparqlQuery...');) + '&format=json';
// Send// Execute the POST requestst using the fetch API
fetch(queryUrl)endpoint, {
.then(response => {
if (!response.ok) {method: 'POST',
throw new Error(`Query failed with status: ${response.status}`);
}headers: {
return response.json();'Content-Type': 'application/x-www-form-urlencoded'
})},
.then(data => {
console.log('Query results:', data);
// Process the results (example)
if (data.results && data.results.bindings) {
const results = data.results.bindings;
console.log(`Found ${results.length} results`);body: postParams
// Display the first result as an example
if (results.length > 0) {})
const firstResult = results[0];.then(function(response) {
const mediaUri = firstResult.media.value;if (!response.ok) {
const thumbnailUrl = firstResult.image.value + "?width=120";throw new Error('Network response was not ok');
const inception = firstResult.inception ? new Date(firstResult.inception.value).getFullYear() : 'unknown';}
console.log(`Firstreturn result: ${mediaUri} (${inception}) ${thumbnailUrl}`);ponse.json();
}})
}.then(function(data) {
})console.log("SPARQL Query Results:", data);
.catch(error => {// Add any additional processing or display logic for the results here.
})
console.error('Error executing SPARQL query:', .catch(function(error); {
console.error("Error running SPARQL query:", error);
});
})();
// Execute the query
executeSPARQLQuery(query);
```