Project:Navigation Galleries: Difference between revisions

From CoMakingSpace Wiki

(→‎Automated Assembly: (planned) features; linked code)
(linked Template:EquipmentGallery)
 
(15 intermediate revisions by 2 users not shown)
Line 3: Line 3:
|image=project gallery.png
|image=project gallery.png
|status=ongoing<br>''(restart of [[Project:Multi-Photo Imagemaps]]<br>with a much more practical approach)''
|status=ongoing<br>''(restart of [[Project:Multi-Photo Imagemaps]]<br>with a much more practical approach)''
|date=2019
|date=semi-automated: 2019<br>automated: 2021
|initiator={{£}}
|initiator={{£}}
|team={{HelpNeeded}}
|team=[[Martin]], [[User:Rudy|Rudy]], [[User:Stefanr|Stefanr]]
|materials=photos
|materials=photos
|tools=cameras, e.g. [[DSLR]]
|tools=cameras, e.g. [[DSLR]]
|software=[https://www.mediawiki.org/wiki/Help:Images#Rendering_a_gallery_of_images MediaWiki], [[Python]]
|software=[https://www.mediawiki.org/wiki/Help:Images#Rendering_a_gallery_of_images MediaWiki], [[Semantic MediaWiki]],<br>[[Python]] (legacy)
|cost=0 €
|cost=0 €
}}
}}
Line 14: Line 14:
Let's try to improve visual navigation through this wiki, but in a much easier way than originally tried with [[Project:Multi-Photo Imagemaps]]!
Let's try to improve visual navigation through this wiki, but in a much easier way than originally tried with [[Project:Multi-Photo Imagemaps]]!


Imagemaps of multiple photos did solve some problems, but are still too hard to modify for anyone really doing it - you'd have to download the original [[GIMP]] files, add a new photo (or better several ones so it would still look okay), upload everything again, overhaul the embedding code, ...blah.
Imagemaps of multiple photos did solve some problems, but are still too hard to modify for anyone to actually do it - you'd have to download the original [[GIMP]] files, add a new photo (or better several ones so it would still look okay), upload everything again, overhaul the embedding code, ...blah.


Instead, let's use the photos we already have (e.g. in [[InfoBoxes]]) in automatable "Navigation Galleries"!
Instead, let's use the photos we already have (e.g. in [[InfoBoxes]]) in automatable "Navigation Galleries"!


There's a template for easy linking to this page: just insert <code><nowiki>{{NavGal}}</nowiki></code> on any relevant page.
There's a little template for '''easy linking to this documentation page: just insert <code><nowiki>{{NavGal}}</nowiki></code> on any relevant page'''.


== Manual Assembly ==
== Manual Assembly ==
Line 46: Line 46:
* [[Pliers]]
* [[Pliers]]
* ''perhaps the projects on [[Special:MyPage|your user page]]?''
* ''perhaps the projects on [[Special:MyPage|your user page]]?''
* it would be cool if [https://github.com/comakingspace/do-something/issues/109 every type of power tool and machine had a list of project ideas]
* ''<what else?>''
* ''<what else?>''


== Automated Assembly ==
== Automated Assembly (SMW) ==
[[Lukas]] started to develop a script (using {{NL}}'s [https://github.com/comakingspace/CommonFiles/tree/master/Printouts/QRCodes "wikicrawler" for our QR code printouts] as a starting point) that automatically goes through certain wiki pages and gives out the wiki code for a large navigation gallery when you run it.


A first example is the "Project:" namespace, which is quickly filling up with awesome members' projects that were unfortunately not very visible before generating such a gallery on the [[Projects]] page. In general, many namespaces or categories could benefit from such a possibility!
We can automatically generate nice galleries with [[Semantic MediaWiki]]! For good results, all pages should have ONE value for each of these properties:
* Has image
* Has German ''[not used for projects]''
* Has caption
 
All of these values are ''usually'' set automatically by the [[MachineInfoBox]] or [[ToolInfoBox]] (parameters <code>image</code>, <code>german</code>, and the page name) or [[ProjectInfoBox]] (parameters  <code>image</code> and <code>project title</code> [no second language]).
 
=== Examples ===
* [[Projects]]
* hardware grouped by its location - tip: try [[Template:EquipmentGallery]]!
** [[Wood Workshop]]
** [[Metal Workshop]]
** [[Electronics Room]]
 
* "sandbox" for further improvements: [[Project:Navigation Galleries/Sandbox]]
 
=== Overriding InfoBox Automation ===
InfoBoxes may generate poor gallery elements if...
* there are multiple InfoBoxes on a page
* the page name is not a good English caption
* ..?
 
You can therefore inhibit the influence of any such InfoBox on the page's SMW parameters by adding a value for the <code>extrabox</code> parameter. The box will appear just the same to a reader of the page, but its image/caption/German caption will not appear in SMW galleries.
 
If you turn all InfoBoxes on a page into "extraboxes", the page will only look nice in galleries if you set the properties by hand, e.g. at the very bottom of the page:
 
<pre>{{#set:
|Has image=File:Metabo BS 1638 W.jpg
|Has caption=Bandsaw (Wood)
|Has German=Bandsäge (Holz)
}}</pre>
 
=== Outsourcing Parts of a Page ===
There may be cases where we want to have several InfoBoxes on the same page, but also have several of them appear in galleries. An example of this were our [[bandsaws]] that are located in two different areas (wood and metal) and it was later proposed to [https://github.com/comakingspace/do-something/issues/266 expand this structure to all machines]. For details, see [https://github.com/comakingspace/do-something/issues/161#issuecomment-792330024 this and the following comment on the corresponding issue] - in short, here's what to do:
 
# split the page into one page per section
# start each sub-page with a heading in target format (usually <code>== h2 ==</code>)
# set a common property for the sub-pages (e.g. MachineType) and end with <code><nowiki><br clear=all></nowiki></code>
# insert an embedding query for pages with this property, making sure to include an explanatory comment for other editors and to use embedonly=yes and a leading <code><nowiki><br clear=all></nowiki></code> tag (not always necessary, but better safe than sorry)
 
 
'''Here's an example (from "[[Bandsaws]]")'''<br>
a) end of each sub-page:
<pre><br clear="all" />
{{#set:
MachineType=Bandsaw
|Has caption=Bandsaw (Wood)
|Has German=Bandsäge (Holz)
|Has image=File:Metabo BS 1638 W.jpg
}}
</pre>
 
b) on the summarizing page:
<pre><br clear="all" />
<!--  NOTE: The following block "imports" content from separate pages - please don't change the code! To edit the actual information, please go back and click "edit" next to the section headline you are interested in :-)  -->
{{#ask:
[[MachineType::{{PAGENAME}}]]
|order=ascending
|format=embedded
|embedonly=yes
}}
</pre>
 
== Semi-Automated Assembly (Python Script) ==
[[Lukas]] started<sup> and never really continued once results got okay</sup> to develop a script (using {{NL}}'s [https://github.com/comakingspace/CommonFiles/tree/master/Printouts/QRCodes "wikicrawler" for our QR code printouts] as a starting point) that automatically goes through certain wiki pages and gives out the wiki code for a large navigation gallery when you run it.
 
A first example was the "Project:" namespace, which is quickly filling up with awesome members' projects that were unfortunately not very visible before generating such a gallery on the [[Projects]] page (check out [https://wiki.comakingspace.de/index.php?title=Projects&oldid=8140 how this looked before we fully automated it]). In general, many namespaces or categories could benefit from such a possibility!
 
This approach is not really in use anymore since we figured out the [[#Automated Assembly (SMW)|fully automatic way]].
* advantage: customizable aesthetics (more "modes" than the SMW approach allows [https://github.com/SemanticMediaWiki/SemanticMediaWiki/issues/4755 so far])
* disadvantage: manual execution and copy/pasting required for each update


=== (Planned) Features ===
=== (Planned) Features ===
Line 65: Line 135:
The current code can be found on GitHub: [https://github.com/comakingspace/Navigation-Galleries comakingspace/Navigation-Galleries].
The current code can be found on GitHub: [https://github.com/comakingspace/Navigation-Galleries comakingspace/Navigation-Galleries].


'''Further information & discussion in [https://github.com/comakingspace/do-something/issues/96 issue #96]!'''
'''Further information & discussion in [https://github.com/comakingspace/do-something/issues/96 issue #96 (closed)]'''
 





Latest revision as of 21:37, 9 April 2023

ProjectInfoBox

Galleries for Visual Wiki Navigation

Project gallery.png
Status: ongoing
(restart of Project:Multi-Photo Imagemaps
with a much more practical approach)
Release Date: semi-automated: 2019
automated: 2021
Initiator: Lukas
Team: Martin, Rudy, Stefanr
Materials Used: photos
Tools Used: cameras, e.g. DSLR
Software Used: MediaWiki, Semantic MediaWiki,
Python (legacy)
Approx. Cost: 0 €


Let's try to improve visual navigation through this wiki, but in a much easier way than originally tried with Project:Multi-Photo Imagemaps!

Imagemaps of multiple photos did solve some problems, but are still too hard to modify for anyone to actually do it - you'd have to download the original GIMP files, add a new photo (or better several ones so it would still look okay), upload everything again, overhaul the embedding code, ...blah.

Instead, let's use the photos we already have (e.g. in InfoBoxes) in automatable "Navigation Galleries"!

There's a little template for easy linking to this documentation page: just insert {{NavGal}} on any relevant page.

Manual Assembly

We already had a few such navigation galleries before "opening" this project, e.g. disambiguation pages or Lukas' project overview.

It's definitely possible and not too difficult to make the galleries by hand in slowly evolving cases like these!

Simply use the gallery syntax and make sure you include a link to the page you want to direct readers to, so they don't just see the page with photo information:

<gallery mode=packed-hover heights=150 caption="optional 'headline' - enter what you want">
File:example1.JPG|link=[[Example Tool]]|here's room for a photo-specific caption...
File:example2.JPG|link=[[Different Example Tool]]|...and here you put the next photo's caption!
</gallery>

The exact formatting here is just an example of course, whatever works will surely be appreciated by the next page visitor!

Advantages of the manual approach are mainly A) ease of use (requires nothing but a wiki account) and B) the flexibility to assemble the gallery out of any photos and captions you like.

Pages in Need

Here are some of our pages where such a gallery would be nice (feel free to add more):

Automated Assembly (SMW)

We can automatically generate nice galleries with Semantic MediaWiki! For good results, all pages should have ONE value for each of these properties:

  • Has image
  • Has German [not used for projects]
  • Has caption

All of these values are usually set automatically by the MachineInfoBox or ToolInfoBox (parameters image, german, and the page name) or ProjectInfoBox (parameters image and project title [no second language]).

Examples

Overriding InfoBox Automation

InfoBoxes may generate poor gallery elements if...

  • there are multiple InfoBoxes on a page
  • the page name is not a good English caption
  • ..?

You can therefore inhibit the influence of any such InfoBox on the page's SMW parameters by adding a value for the extrabox parameter. The box will appear just the same to a reader of the page, but its image/caption/German caption will not appear in SMW galleries.

If you turn all InfoBoxes on a page into "extraboxes", the page will only look nice in galleries if you set the properties by hand, e.g. at the very bottom of the page:

{{#set: 
|Has image=File:Metabo BS 1638 W.jpg
|Has caption=Bandsaw (Wood)
|Has German=Bandsäge (Holz)
}}

Outsourcing Parts of a Page

There may be cases where we want to have several InfoBoxes on the same page, but also have several of them appear in galleries. An example of this were our bandsaws that are located in two different areas (wood and metal) and it was later proposed to expand this structure to all machines. For details, see this and the following comment on the corresponding issue - in short, here's what to do:

  1. split the page into one page per section
  2. start each sub-page with a heading in target format (usually == h2 ==)
  3. set a common property for the sub-pages (e.g. MachineType) and end with <br clear=all>
  4. insert an embedding query for pages with this property, making sure to include an explanatory comment for other editors and to use embedonly=yes and a leading <br clear=all> tag (not always necessary, but better safe than sorry)


Here's an example (from "Bandsaws")
a) end of each sub-page:

<br clear="all" />
{{#set: 
MachineType=Bandsaw
|Has caption=Bandsaw (Wood)
|Has German=Bandsäge (Holz)
|Has image=File:Metabo BS 1638 W.jpg
}}

b) on the summarizing page:

<br clear="all" />
<!--  NOTE: The following block "imports" content from separate pages - please don't change the code! To edit the actual information, please go back and click "edit" next to the section headline you are interested in :-)  -->
{{#ask:
 [[MachineType::{{PAGENAME}}]]
 |order=ascending
 |format=embedded
 |embedonly=yes
}}

Semi-Automated Assembly (Python Script)

Lukas started and never really continued once results got okay to develop a script (using Martin's "wikicrawler" for our QR code printouts as a starting point) that automatically goes through certain wiki pages and gives out the wiki code for a large navigation gallery when you run it.

A first example was the "Project:" namespace, which is quickly filling up with awesome members' projects that were unfortunately not very visible before generating such a gallery on the Projects page (check out how this looked before we fully automated it). In general, many namespaces or categories could benefit from such a possibility!

This approach is not really in use anymore since we figured out the fully automatic way.

  • advantage: customizable aesthetics (more "modes" than the SMW approach allows so far)
  • disadvantage: manual execution and copy/pasting required for each update

(Planned) Features

  • project gallerizer
    • filtering of insufficient pages (no ProjectInfoBox, default image, no image) ✔
    • alphabetical gallery generation ✔
    • randomized gallery generation ✔
    • "recently updated" gallery generation
    • topic-based gallery generation, e.g. "woodworking projects"
  • (later) equipment gallerizer
    • e.g. all power tools

The current code can be found on GitHub: comakingspace/Navigation-Galleries.

Further information & discussion in issue #96 (closed)