TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-11-14 23:23:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: image gallery viewer (#905)

Browse Source 
* add assets, photoswipe html element to body

* add single script, gallery for multiple items

* update docs for image gallery

* fix relative links

* inject image script on mount

* replace inline script

* remove facebook, twitter, pinterest sharing

* fix hover on share

* fix start img aspect radio, reduce size

* right align json script

* right align go script

* change script background
This commit is contained in:
Max Peintner
2020-10-26 13:03:51 +01:00
committed by GitHub
parent 524a6d4467
commit 22d4c345be
28 changed files with 1181 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
site/docs/administrate/04-clients.en.md
View File

@@ -24,18 +24,51 @@ The wizard can be skipped for people who are needing special settings.
To create a new client start by browsing to your [project](administrate#Projects), this is normally something like [https://console.zitadel.ch/projects/78562301657017889](https://console.zitadel.ch/projects/78562301657017889)
<img src="img/console_projects_my_first_project.png" alt="Manage Clients" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_projects_my_first_project.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_projects_my_first_project.png" itemprop="thumbnail" alt="Manage Clients" />
</a>
<figcaption itemprop="caption description">Manage Clients</figcaption>
</figure>
</div>
Click the **New** button and a wizard will appear which will guide you through the process.
<img src="img/console_clients_my_first_spa_wizard_1.png" alt="Client Wizard" width="1000px" height="auto">
<img src="img/console_clients_my_first_spa_wizard_2.png" alt="Client Wizard" width="1000px" height="auto">
<img src="img/console_clients_my_first_spa_wizard_3.png" alt="Client Wizard" width="1000px" height="auto">
<img src="img/console_clients_my_first_spa_wizard_4.png" alt="Client Wizard" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_clients_my_first_spa_wizard_1.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_clients_my_first_spa_wizard_1.png" itemprop="thumbnail" alt="Client Wizard 1" />
</a>
<figcaption itemprop="caption description">Client Wizard 1</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_clients_my_first_spa_wizard_2.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_clients_my_first_spa_wizard_2.png" itemprop="thumbnail" alt="Client Wizard 2" />
</a>
<figcaption itemprop="caption description">Client Wizard 2</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_clients_my_first_spa_wizard_3.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_clients_my_first_spa_wizard_3.png" itemprop="thumbnail" alt="Client Wizard 3" />
</a>
<figcaption itemprop="caption description">Client Wizard 3</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_clients_my_first_spa_wizard_4.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_clients_my_first_spa_wizard_4.png" itemprop="thumbnail" alt="Client Wizard 4" />
</a>
<figcaption itemprop="caption description">Client Wizard 4</figcaption>
</figure>
</div>
When the wizard is complete, the clients configuration will be displayed and you can now use this client.
<img src="img/console_clients_my_first_spa_config.png" alt="Client Wizard" width="1000px" height="auto">
<div class="zitadel-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="img/console_clients_my_first_spa_config.png" itemprop="contentUrl" data-size="1920x1080">
<img src="img/console_clients_my_first_spa_config.png" itemprop="thumbnail" alt="Client Wizard Complete" />
</a>
<figcaption itemprop="caption description">Client Wizard Complete</figcaption>
</figure>
</div>