Layout config

[Ceetto]

Layout config

In our meeting a couple of weeks ago, we talked about how you need to be able to configure more custom main page and footer layouts. We said this would be simple to do with some extra json config.

We just need to define what exactly needs to be possible to configure and agree on a way to write that in config.

Main page

For the main page layout of the different perspectives I was thinking of something like this:

{
  "mainPageLayout": [
    {
      "Heading": "some heading",
      "paragraph": "some text before cards",
      "perspectives": [
        "perspective1",
        "perspective2"
      ]
    },
    {
      "Heading": "some heading 2",
      "paragraph": "some more text before cards",
      "perspectives": [
        "perspective3",
        "perspective4"
      ]
    },
    ...
  ]
}

With this you would be able to define different sections on the main page, each with their own heading and perspectives and then optionally some extra paragraphs of text.

Do you think this would be sufficient, or would you rather be able to add some html in your locale.json and inject that before each list of perspectives?

Footer

I noticed currently all the sampo apps only put a list of pictures linking to external pages in the footer. Is it sufficient to be able to directly configure in json which images and links to use, or would more complicated config for the footer be necessary?

Other pages?

In the google doc you shared with us you also talk about other text pages. Could you clarify what those exactly are? Are those pages like the "about the portal" and "instructions" pages? Should it be possible to add more such pages and link to them from both the topbar and main page layout?

[Ceetto]

@HeikkiR @annasahola

[HeikkiR]

On the main layout I think the texts like paragraph and heading should be in the translations file like they are now because we like to support multilingual apps. I think an important thing ti either make configurable is layout of perspective cards, and/or create couple of pre-made layouts that are automatically selected based on the number of perspective. The current default one is optimised for four perspectives and work pretty well with two perspectives, I think, but will look a little funny if there are some other numbers.

On the footer it is in principle and in most cases enough to just be able to add the images and links, but I imagine that there are cases when that will not be enough, but I also don't think we should try to make everything possible configurable.

The "other" pages would indeed be like similar to the instructions page. These are pretty easy to add already and you can give the text in translations file. I think you can at least add new text pages under the info drop drown in portalConfig in topBar.infoDropdown config option.

[annasahola]

Some more details about the text pages and what the issue with them is currently: Text pages can be added to the topBar (in the topBar.infoDropdown) or through new adding perspectives with the searchMode set to dummy-internal. In some cases these links are also included within normal text in the portal (e.g., the image license text under the perspective cards might have a link to a page with a full list of images used), but I think these might also usually be included in the dropdown as well.

With the current implementation of SemanticPortal.js all these text page links have to be added to the list of routes there for them to work ("normal" non-dummy perspectives are currently automatically mapped to routes there). So the easiest solution for all dummy-internal perspectives and topBar.infoDropdown links (that have an internal link instead of external) would be to modify SemanticPortal.js to automatically add routes similarly to "normal" perspectives for them.

[Ceetto]

So if I understand correctly what you need is:

• A way to configure the layout of the perspectives on the main page. Which should be configurable in portalConfig.json I assume?
• The actual text of the main page configured in the locales.
• Configurable list of images in the footer with either internal or external links
• Automatically map the dummy-internal perspectives to routes as well.

[Ceetto]

I made some changes I believe should work for what we discussed:

Main page layout

In portalConfig.json (in the layout config) you can define the layout of the perspectives on the main page like this:

{
    "mainPage": {
        "perspectives": [
            {
                "id": "part1",
                "cardsPerRow": 3,
                "perspectives": [
                    "perspective1",
                    "perspective2",
                    "perspective3"
                ]
            },
            {
                "id": "part2",
                "cardsPerRow": 2,
                "perspectives": [
                    "perspective4",
                    "perspective5"
                ]
            }
        ]
    }
}

The perspectives here can now also be dummy-internals.

Then in your locale you can do this to add your text:

{
    "mainPageLayout": {
        "part1": {
            "heading": "test heading",
            "description": "some description text"
        },
        "part2": {
            "heading": "test part"
        }
    }
}

Info dropdown

You can now also add your pages in info-dropdown through config in portalConfig.json by adding them under topBar.infoDropdown.

Footer

Footer images can now also be added in portalConfig.json in the layoutConfig like this:

{
    "footer": {
        "reducedHeight": 44,
        "defaultHeight": 64,
        "images": [
            {
                "id": "ghentcdh",
                "href": "https://www.ghentcdh.ugent.be/",
                "image": "logos/ghentcdh.png",
                "alt": "ghentcdh logo",
                "width": 150,
                "height": 40
            },
            {
                "id": "heldig",
                "href": "https://www.helsinki.fi/en/helsinki-centre-for-digital-humanities",
                "image": "logos/heldig-logo-transparent-black.png",
                "alt": "heldig logo",
                "width": 118,
                "height": 33
            },
            {
                "id": "helsinki",
                "href": "https://www.helsinki.fi/en",
                "image": "logos/university-of-helsinki-logo-transparent-black.png",
                "alt": "University of Helsinki logo",
                "width": 155,
                "height": 40
            }
        ]
    }
}

The path to the image should use the assets directory of the configs as root.