Skip to content

Gallery tweaks #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sbliven merged 1 commit into from
Sep 25, 2025
Merged

Gallery tweaks #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion _includes/gallery.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,19 @@
{%- assign images = images | push: include.image -%}
{%- endif -%}
{%- endif -%}
{% if include.alts %}
{%- assign alts = include.alts -%}
{%- else -%}
{%- assign alts = "" | split: "," -%}
{%- if include.alt -%}
{%- assign alts = alts | push: include.alt -%}
{%- endif -%}
{%- endif -%}
<div class="image-box" style="width: {{ include.width | default: '100%' }};">
<div class="flex-box">
{%- for img in images %}
<a href="{{ img }}">
<img src="{{ img }}" />
<img src="{{ img }}" {% if alts %}alt="{{alts[forloop.index0]}}{% endif %}"/>
</a>
{%- endfor %}
</div>
Expand Down
4 changes: 3 additions & 1 deletion assets/css/customOpenEM.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -472,8 +472,9 @@ footer {

/* Image box: scale images to one row */
.image-box {
margin-left: -1% !important;
//margin-left: -1% !important;
//border: solid 1px #ddd;
margin: 0 auto;
padding: .5%;

& .flex-box {
Expand All @@ -490,6 +491,7 @@ footer {
& img {
width: 100%;
display: block;
box-shadow: 0 3px 5px #ccc;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion documentation/admin/installation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: page
title: Installation
permalink: /documentation/admin/installation
permalink: /documentation/admin/installation/
---

<!-- Show the current active documentation page -->
Expand Down
24 changes: 14 additions & 10 deletions documentation/admin/installation/ingestor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,8 +251,7 @@ You can use this [patch file](/assets/files/ext_transfer.patch) on the `scicatli

1. Setup keycloak, preferably with Docker
2. [OPTIONAL] Add another realm where you'll have your ingestor client added.

![adding a realm](/assets/img/documentation/admin/installation/ingestor/img0.png){: style="margin-top: 2em; margin-bottom: 2em;"}
{% include gallery.html alt="adding a realm" image="/assets/img/documentation/admin/installation/ingestor/img0.png" width="60%" %}
3. Add a new client with the following parameters
{% assign images = "/assets/img/documentation/admin/installation/ingestor/img1.png
/assets/img/documentation/admin/installation/ingestor/img2.png
Expand All @@ -278,21 +277,26 @@ The next section is useful for developers only.
/assets/img/documentation/admin/installation/ingestor/img8.png
/assets/img/documentation/admin/installation/ingestor/img9.png" | split: "
" %}
{%- include gallery.html images=images caption="Creating a user" %}
{% assign alts = "Step 1,Step 2,Step 3,Step 4" | split: "," %}
{%- include gallery.html images=images caption="Creating a user" alts=alts%}
2. Assign the read and write roles of the ingestor to this user.
{% assign images = "/assets/img/documentation/admin/installation/ingestor/img10.png
/assets/img/documentation/admin/installation/ingestor/img11.png" | split: "
" %}
{%- include gallery.html images=images caption="Assigning roles"%}
3. Go to [http://localhost:8888/login](http://localhost:8888/login)
4. This will open up the keycloak login page. Use your test user for logging in.
![login page](/assets/img/documentation/admin/installation/ingestor/img12.png)
5. If everything went well, you should be redirected to `RedirectURL`, and you should see a "user" cookie associated to the `localhost` domain in your browser's debugger. If you also have a valid `FrontendUrl` your browser will get redirected to your Ingestor frontend, where you should be able to interact with the ingestor backend using the cookie.
![browser debugger with cookie](/assets/img/documentation/admin/installation/ingestor/img13.png)
{% include gallery.html alt="login page" image="/assets/img/documentation/admin/installation/ingestor/img12.png" width="60%" %}
5. If everything went well, you should be redirected to `RedirectURL`, and you should
see a "user" cookie associated to the `localhost` domain in your browser's debugger.
If you also have a valid `FrontendUrl` your browser will get redirected to your
Ingestor frontend, where you should be able to interact with the ingestor backend
using the cookie.
![browser debugger with cookie](/assets/img/documentation/admin/installation/ingestor/img13.png)
6. [OPTIONAL] To test the ingestor's auth directly, copy the cookie value from the browser, then you can use the following curl command:

```bash
curl -v --cookie "user=[INSERT COOKIE VALUE HERE]" "localhost:8888/transfer?page=1"
```
```bash
curl -v --cookie "user=[INSERT COOKIE VALUE HERE]" "localhost:8888/transfer?page=1"
```

If the auth is successful, you should get an empty list as a reply.
If the auth is successful, you should get an empty list as a reply.
41 changes: 6 additions & 35 deletions documentation/user/consumer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,51 +15,22 @@ This chapter explains how to request and download a dataset from SciCat.

Log in to <a href="https://discovery.psi.ch/login">SciCat</a> with your organisation user.

<div align="center">
<br>
<img src="/assets/img/documentation/user/dataset_download_1.png" alt="SciCat Log In" style="width: 60%; border: 1px solid black;">
<p style="text-align: center;">Figure 1: SciCat Log In</p>
</div>

{% include }
{% include gallery.html image="/assets/img/documentation/user/dataset_download_1.png" alt="SciCat Log In" caption="Figure 1: SciCat Log In" width="60%" %}

### Select the dataset and add it to the cart

After logging in, the dataset view can be opened by clicking on the SciCat logo.

<div align="center">
<br>
<img src="/assets/img/documentation/user/dataset_download_2.png" alt="SciCat Open Dataset View" style="width: 60%; border: 1px solid black;">
<p style="text-align: center;">Figure 2: SciCat Open Dataset View</p>
</div>

<div align="center">
<br>
<img src="/assets/img/documentation/user/dataset_download_3.png" alt="SciCat Select Dataset and add to Cart" style="width: 60%; border: 1px solid black;">
<p style="text-align: center;">Figure 3: SciCat Select Dataset and add to Cart</p>
</div>
{% include gallery.html image="/assets/img/documentation/user/dataset_download_2.png" alt="SciCat Open Dataset View" caption="Figure 2: SciCat Open Dataset View" width="60%" %}
{% include gallery.html image="/assets/img/documentation/user/dataset_download_3.png" alt="SciCat Select Dataset and add to Cart" caption="Figure 3: SciCat Select Dataset and add to Cart" width="60%" %}

### Retrieve the dataset

As soon as a data set is in the shopping basket, actions can be called up. One action is called Retrieval, which can be used to request the download of a data set.

<div align="center">
<br>
<img src="/assets/img/documentation/user/dataset_download_4.png" alt="SciCat Open Cart" style="width: 60%; border: 1px solid black;">
<p style="text-align: center;">Figure 4: SciCat Open Cart</p>
</div>

<div align="center">
<br>
<img src="/assets/img/documentation/user/dataset_download_5.png" alt="SciCat Select Dataset in Cart" style="width: 60%; border: 1px solid black;">
<p style="text-align: center;">Figure 5: SciCat Select Dataset in Cart</p>
</div>

<div align="center">
<br>
<img src="/assets/img/documentation/user/dataset_download_6.png" alt="SciCat Retrieve Dataset" style="width: 60%; border: 1px solid black;">
<p style="text-align: center;">Figure 6: SciCat Retrieve Dataset</p>
</div>
{% include gallery.html image="/assets/img/documentation/user/dataset_download_4.png" alt="SciCat Open Cart" caption="Figure 4: SciCat Open Cart" width="60%" %}
{% include gallery.html image="/assets/img/documentation/user/dataset_download_5.png" alt="SciCat Select Dataset in Cart" caption="Figure 5: SciCat Select Dataset in Cart" width="60%" %}
{% include gallery.html image="/assets/img/documentation/user/dataset_download_6.png" alt="SciCat Retrieve Dataset" caption="Figure 6: SciCat Retrieve Dataset" width="60%" %}

The data record is now transferred from the long-term storage to a cache server. As soon as the transfer is complete, the user is informed by e-mail. A download link is provided in the e-mail.

Expand Down