chore: Alt-Texte auf deutsch übersetzt.

content/about/contents+en.lr

@@ -4,7 +4,9 @@ title: Services
 ---
 meta_description: The WTF cooperative offers a lot of experience and know-how in information technology. Contact us!
 ---
-intro: Hello!
+intro:
+
+Hello!
 
 Get a job with us. This is what we do:
 ---
@@ -34,3 +36,77 @@ card_image: images/icon_connected_servers.svg
 card_text: After the project, we do not leave you out in the cold with the result, but offer you services for the operation of the completed project and the administration of the infrastructure beyond the project.
 ----
 image_credits: servers by IYIKON from <a href="https://thenounproject.com/browse/icons/term/servers/" target="_blank" title="servers Icons">Noun Project</a>
+----
+#### flow_icon_bubbles ####
+icon_path: Python_logo_and_wordmark.svg
+----
+icon_alt: Logo of the Python programming language
+#### flow_icon_bubbles ####
+icon_path: ISO_C++_Logo.svg
+----
+icon_alt: Logo of the C++ programming language
+#### flow_icon_bubbles ####
+icon_path: Tux.svg
+----
+icon_alt: Tux the penguin mascott of Linux
+#### flow_icon_bubbles ####
+icon_path: Unofficial_JavaScript_logo_2.svg
+----
+icon_alt: Logo of the JavaScript programming language
+#### flow_icon_bubbles ####
+icon_path: PHP-logo.svg
+----
+icon_alt: Logo of the PHP programming language
+#### flow_icon_bubbles ####
+icon_path: C_Programming_Language.svg
+----
+icon_alt: Logo of the C programming language
+#### flow_icon_bubbles ####
+icon_path: Ansible_logo.svg
+----
+icon_alt: Logo of the Ansible project
+#### flow_icon_bubbles ####
+icon_path: Postgresql_elephant.svg
+----
+icon_alt: Logo of the Postgres database
+#### flow_icon_bubbles ####
+icon_path: Java-Logo.svg
+----
+icon_alt: Logo of the Java programming language
+#### flow_icon_bubbles ####
+icon_path: Rust_programming_language_black_logo.svg
+----
+icon_alt: Logo of the Rust programming language
+#### flow_icon_bubbles ####
+icon_path: CSS3_logo_and_wordmark.svg
+----
+icon_alt: Logo of CSS3
+#### flow_icon_bubbles ####
+icon_path: Debian-OpenLogo.svg
+----
+icon_alt: Logo of the Debian operating system
+#### flow_icon_bubbles ####
+icon_path: MySQL_textlogo.svg
+----
+icon_alt: Logo of the MySQL database
+#### flow_icon_bubbles ####
+icon_path: Vue.js_Logo_2.svg
+----
+icon_alt: Logo of the Vue.js framework
+#### flow_icon_bubbles ####
+icon_path: LaTeX_logo.svg
+----
+icon_alt: Logo of the LaTeX typesetting language
+---
+kompetenzen_body:
+
+- Agile project management
+- Accessibility
+- Operations
+- Software Audits
+- Software Development
+- Project Management
+- User Experience
+- Translation & Internationalisation (i18n/l10n)
+---
+kompetenzen_heading: Expertise

content/about/contents.lr

@@ -4,7 +4,9 @@ title: Services
 ---
 meta_description: Die WTF Kooperative bietet viel Erfahrung und Know-how in der Informationstechnologie. Sprechen Sie uns an!
 ---
-intro: Hallo!
+intro:
+
+Hallo!
 
 Du kannst dich bei uns anstellen lassen. Und das ist was wir tun:
 ---
@@ -34,3 +36,76 @@ card_image: images/icon_connected_servers.svg
 card_text: Nach dem Projekt lassen wir Sie nicht mit dem Ergebnis im Regen stehen, sondern bieten Ihnen auch über das Projekt hinaus Services für den Betrieb des abgeschlossenen Projekts und die Administration der Infrastruktur.
 ----
 image_credits: servers by IYIKON from <a href="https://thenounproject.com/browse/icons/term/servers/" target="_blank" title="servers Icons">Noun Project</a>
+#### flow_icon_bubbles ####
+icon_path: Python_logo_and_wordmark.svg
+----
+icon_alt: Logo der Programmiersprache Python
+#### flow_icon_bubbles ####
+icon_path: ISO_C++_Logo.svg
+----
+icon_alt: Logo der Programmiersprache C++
+#### flow_icon_bubbles ####
+icon_path: Tux.svg
+----
+icon_alt: Tux der Pinguin, Maskottchen von Linux
+#### flow_icon_bubbles ####
+icon_path: Unofficial_JavaScript_logo_2.svg
+----
+icon_alt: Logo der Programmiersprache JavaScript
+#### flow_icon_bubbles ####
+icon_path: PHP-logo.svg
+----
+icon_alt: Logo der Programmiersprache PHP
+#### flow_icon_bubbles ####
+icon_path: C_Programming_Language.svg
+----
+icon_alt: Logo der Programmiersprache C
+#### flow_icon_bubbles ####
+icon_path: Ansible_logo.svg
+----
+icon_alt: Logo des Ansible-Projekts
+#### flow_icon_bubbles ####
+icon_path: Postgresql_elephant.svg
+----
+icon_alt: Logo der Datenbank Postgres
+#### flow_icon_bubbles ####
+icon_path: Java-Logo.svg
+----
+icon_alt: Logo der Programmiersprache Java
+#### flow_icon_bubbles ####
+icon_path: Rust_programming_language_black_logo.svg
+----
+icon_alt: Logo der Programmiersprache Rust
+#### flow_icon_bubbles ####
+icon_path: CSS3_logo_and_wordmark.svg
+----
+icon_alt: CSS3 Logo
+#### flow_icon_bubbles ####
+icon_path: Debian-OpenLogo.svg
+----
+icon_alt: Logo des Betriebssystems Debian
+#### flow_icon_bubbles ####
+icon_path: MySQL_textlogo.svg
+----
+icon_alt: Logo MySQL-Datenbank
+#### flow_icon_bubbles ####
+icon_path: Vue.js_Logo_2.svg
+----
+icon_alt: Logo des Vue.js-Frameworks
+#### flow_icon_bubbles ####
+icon_path: LaTeX_logo.svg
+----
+icon_alt: Logo der Programmiersprache LaTeX typesetting language
+---
+kompetenzen_body:
+
+- Agiles Projektmanagement
+- Barrierefreiheit
+- Operations
+- Software-Audits
+- Softwareentwicklung
+- Projektmanagement
+- User Experience
+- Übersetzung & Internationalisierung (i18n/l10n)
+---
+kompetenzen_heading: Kompetenzen

flowblocks/flow_claim_boxes.ini

@@ -1,6 +1,6 @@
 [block]
 name = Claim Box Card
-button_label = Claim Box Card
+button_label = Add Claim Box Card
 label = {{ this.card_title }}
 
 [fields.card_title]

flowblocks/flow_icon_bubbles.ini

@@ -0,0 +1,17 @@
+[block]
+name = Icon Bubbles
+button_label = Add Icon Bubble
+label = {{ this.card_title }}
+
+[fields.icon_path]
+label = Icon Pfad
+description = Iconpfad z. B. /images/logos/Ansible_logo.svg
+type = select
+source = record.attachments.images
+width = 1/2
+
+[fields.icon_alt]
+label = Icon-Alt-Text
+description = Icon Alt Text z. B. Logo of the Ansible project
+type = string
+width = 1/2

flowblocks/flow_services_cards.ini

@@ -1,21 +1,25 @@
 [block]
 name = Services Card
-button_label = Services Card
+button_label = Add Services Card
 label = {{ this.card_title }}
 
 [fields.card_title]
 label = Card Titel
 type = string
+width = 1/2
 
 [fields.card_image]
 label = Card Icon
 description = Icon Pfad zB. images/circle_icon_fist.svg
 type = string
+width = 1/2
 
 [fields.card_text]
 label = Card Text
 type = markdown
+width = 1/2
 
 [fields.image_credits]
 label = Image Credits
 type = markdown
+width = 1/2

flowblocks/flow_text_image_section.ini

@@ -1,6 +1,6 @@
 [block]
 name = Flow Text Image (50/50) Section
-button_label = Flow Text Image (50/50) Section
+button_label = Add Flow Text Image (50/50) Section
 label = {{ this.title }}
 
 [fields.title]

models/about_page.ini

@@ -21,4 +21,12 @@ type = string
 [fields.section]
 label = Sections
 type = flow
-flow_blocks = flow_services_cards
+flow_blocks = flow_services_cards, flow_icon_bubbles
+
+[fields.kompetenzen_heading]
+label = Kompetenzen Überschrift
+type = string
+
+[fields.kompetenzen_body]
+label = Kompetenzen Inhalt
+type = markdown

templates/about_page.html

@@ -23,7 +23,9 @@
           <h1>{{ this.title }}</h1>
           <div class="services_card_box">
             {% for card in this.section.blocks %}
-              {{ render_services_card(card, loop.index) }}
+              {% if card._flowblock == "flow_services_cards" %}
+                {{ render_services_card(card, loop.index) }}
+              {% endif %}
             {% endfor %}
           </div>
         </div>
@@ -32,84 +34,21 @@
 
       <div class="content__box">
           <div class="content__inner_box">
-              <h1 class="big_heading">Kompetenzen</h1>
+              <h1 class="big_heading">{{ this.kompetenzen_heading }}</h1>
           </div>
       </div>
       <section class="content">
       <div class="content__box">
           <div class="bubble_grid">
+            {% for icon_bubble in this.section.blocks %}
+              {% if icon_bubble._flowblock == "flow_icon_bubbles" %}
+                {{ icon_bubble }}
+              {% endif %}
 
-            <div class="bubble_grid__bubble">
-              <img src="/images/logos/Python_logo_and_wordmark.svg" alt="Logo of the Python programming language">
-            </div>
-
-            <div class="bubble_grid__bubble">
-              <img src="{{ '/images/logos/ISO_C++_Logo.svg'|asseturl }}" alt="Logo of the C++ programming language">
-            </div>
-
-            <div class="bubble_grid__bubble">
-              <img src="{{ '/images/logos/Tux.svg'|asseturl }}" alt="Tux the penguin mascott of Linux">
-            </div>
-
-            <div class="bubble_grid__bubble">
-              <img src="{{ '/images/logos/Unofficial_JavaScript_logo_2.svg'|asseturl }}" alt="Logo of the JavaScript programming language">
-            </div>
-
-            <div class="bubble_grid__bubble">
-              <img src="{{ '/images/logos/PHP-logo.svg'|asseturl }}" alt="Logo of the PHP programming language">
-            </div>
-
-            <div class="bubble_grid__bubble">
-              <img src="{{ '/images/logos/C_Programming_Language.svg'|asseturl }}" alt="Logo of the C programming language">
-            </div>
-
-            <div class="bubble_grid__bubble">
-              <img src="{{ '/images/logos/Ansible_logo.svg'|asseturl }}" alt="Logo of the Ansible project">
-            </div>
-
-            <div class="bubble_grid__bubble">
-              <img src="{{ '/images/logos/Postgresql_elephant.svg'|asseturl }}" alt="Logo of the Postgres database">
-            </div>
-
-            <div class="bubble_grid__bubble">
-              <img src="{{ '/images/logos/Java-Logo.svg'|asseturl }}" alt="Logo of the Java programming language">
-            </div>
-
-            <div class="bubble_grid__bubble">
-              <img src="{{ '/images/logos/Rust_programming_language_black_logo.svg'|asseturl }}" alt="Logo of the Rust programming language">
-            </div>
-
-            <div class="bubble_grid__bubble">
-              <img src="{{ '/images/logos/CSS3_logo_and_wordmark.svg'|asseturl }}" alt="Logo of CSS3">
-            </div>
-
-            <div class="bubble_grid__bubble">
-              <img src="{{ '/images/logos/Debian-OpenLogo.svg'|asseturl }}" alt="Logo of the Debian operating system">
-            </div>
-
-            <div class="bubble_grid__bubble">
-              <img src="{{ '/images/logos/MySQL_textlogo.svg'|asseturl }}" alt="Logo of the MySQL database">
-            </div>
-
-            <div class="bubble_grid__bubble">
-              <img src="{{ '/images/logos/Vue.js_Logo_2.svg'|asseturl }}" alt="Logo of the Vue.js framework">
-            </div>
-
-            <div class="bubble_grid__bubble">
-              <img src="{{ '/images/logos/LaTeX_logo.svg'|asseturl }}" alt="Logo of the LaTeX typesetting language">
-            </div>
+            {% endfor %}
 
             <div class="bubble_grid__card">
-              <ul>
-                <li>Agiles Projektmanagement</li>
-                <li>Barrierefreiheit</li>
-                <li>Operations</li>
-                <li>Software-Audits</li>
-                <li>Softwareentwicklung</li>
-                <li>Projektmanagement</li>
-                <li>User Experience</li>
-                <li>Übersetzung & Internationalisierung (i18n/l10n)</li>
-              </ul>
+              {{ this.kompetenzen_body }}
             </div>
 
         </div>

templates/blocks/flow_icon_bubbles.html

@@ -0,0 +1,4 @@
+            <div class="bubble_grid__bubble">
+              {% set icon = record.attachments.images.get(this.icon_path) %}
+              <img src="{{ icon|url }}" alt="{{ this.icon_alt }}">
+            </div>