Tabs, translations, todos, …

Author: adriendupuis

code_samples/back_office/images/config/packages/views.yaml

@@ -1,5 +1,5 @@
 parameters:
-    ibexa.<site_access>.image_asset_view_defaults:
+    ibexa.site_access.config.<scope>.image_asset_view_defaults:
         full:
             commons:
                 template: '@@ibexadesign/commons_asset_view.html.twig'

code_samples/back_office/images/src/Connector/Dam/Handler/WikimediaCommonsHandler.php

@@ -52,17 +52,17 @@ public function fetchAsset(string $id): Asset
 
         $jsonResponse = file_get_contents($metadataUrl);
         if ($jsonResponse === false) {
-            throw new \RuntimeException('TODO: Couldn\'t retrieve asset metadata');
+            throw new \RuntimeException('Couldn\'t retrieve asset metadata');
         }
 
         $response = json_decode($jsonResponse, true);
         if (!isset($response['query']['pages'])) {
-            throw new \RuntimeException('TODO');
+            throw new \RuntimeException('Couldn\'t parse asset metadata');
         }
 
         $pageData = array_values($response['query']['pages'])[0] ?? null;
         if (!isset($pageData['imageinfo'][0]['extmetadata'])) {
-            throw new \RuntimeException('TODO');
+            throw new \RuntimeException('Couldn\'t parse image asset metadata');
         }
 
         $imageInfo = $pageData['imageinfo'][0]['extmetadata'];

code_samples/back_office/images/translations/ibexa_fieldtypes_preview.en.yaml

@@ -0,0 +1,4 @@
+ezimageasset.dam_asset.page_url: Image page
+ezimageasset.dam_asset.author: Image author
+ezimageasset.dam_asset.license: License
+ezimageasset.dam_asset.license_url: License page

docs/content_management/images/add_image_asset_from_dam.md

@@ -94,9 +94,11 @@ To extend the DAM support built into [[= product_name =]], you must create a cus
 
 ###  Create DAM handler
 
-This class handles searching through Wikimedia Commons for images and fetching assets.
+This class handles searching through Wikimedia Commons for images and fetching image assets.
 
-In `src\Connector\Dam\Handler` folder, create the `WikimediaCommonsHandler.php` file that resembles the following example, which uses `search()` and `fetchAsset()` functions to query the server for images and return asset objects, respectively:
+In `src\Connector\Dam\Handler` folder, create the `WikimediaCommonsHandler.php` file that resembles the following example,
+which implements [`search()`](/api/php_api/php_api_reference/classes/Ibexa-Contracts-Connector-Dam-Handler-Handler.html#method_search) and [`fetchAsset()`](/api/php_api/php_api_reference/classes/Ibexa-Contracts-Connector-Dam-Handler-Handler.html#method_fetchAsset)
+functions to query the server for images and return asset objects, respectively:
 
 ```php
 [[= include_file('code_samples/back_office/images/src/Connector/Dam/Handler/WikimediaCommonsHandler.php') =]]
@@ -105,7 +107,7 @@ In `src\Connector\Dam\Handler` folder, create the `WikimediaCommonsHandler.php`
 Then, in `config\services.yaml`, register the handler as a service:
 
 ```yaml
-[[= include_file('code_samples/back_office/images/config/services.yaml', 9, 14) =]]
+[[= include_file('code_samples/back_office/images/config/services.yaml', 9, 12) =]]
 ```
 
 ### Create transformation factory
@@ -114,15 +116,14 @@ The transformation factory maps [[= product_name =]]'s image variations to corre
 
 In `src\Connector\Dam\Transformation` folder, create the `WikimediaCommonsTransformationFactory.php` file that resembles the following example:
 
-
 ```php
 [[= include_file('code_samples/back_office/images/src/Connector/Dam/Transformation/WikimediaCommonsTransformationFactory.php') =]]
 ```
 
 Then register the transformation factory as a service:
 
 ```yaml
-[[= include_file('code_samples/back_office/images/config/services.yaml', 15, 20) =]]
+[[= include_file('code_samples/back_office/images/config/services.yaml', 13, 16) =]]
 ```
 
 ### Register variations generator
@@ -141,25 +142,54 @@ When the user requests a specific variation of the image, for example, "large",
 For this to happen, register the variations generator as a service:
 
 ```yaml
-[[= include_file('code_samples/back_office/images/config/services.yaml', 21, 25) =]]
+[[= include_file('code_samples/back_office/images/config/services.yaml', 17, 21) =]]
+```
+
+### Set tab for "Select from DAM" modal
+
+To select an image from the DAM, a modal window pop in with tabs & panels for different search sub-interfaces.
+
+In this example, the search only use the main text input.
+Its tab and its corresponding panel are a service created by combining existing components (as many [back office tabs](back_office_tabs.md)).
+
+The tab service uses directly the dedicated base tab `GenericSearchTab`,
+passes it the dedicated base form `GenericSearchType`,
+links it to `commons` DAM source,
+is identified as `commons`,
+is tagged with `ibexa.admin_ui.tab` tag,
+and set in the `connector-dam-search` [tab group](back_office_tabs.md#tab-groups).
+
+```yaml
+[[= include_file('code_samples/back_office/images/config/services.yaml', 22, 33) =]]
 ```
 
-### Create Twig template for Admin UI
+### Create Twig template
 
-The template defines how images that come from Wikimedia Commons appear in the back office.
+The template defines how images that come from Wikimedia Commons appear.
 
-In `templates/bundles/WikimediaCommonsConnector/`, add the `commons_asset_view.html.twig` file that resembles the following example:
+In `templates/themes/standard/`, add the `commons_asset_view.html.twig` file that resembles the following example:
 
 ```html+twig
 [[= include_file('code_samples/back_office/images/templates/themes/standard/commons_asset_view.html.twig') =]]
 ```
 
-Then, register the template and a fallback template in configuration files:
+Then, register the template and a fallback template in configuration files
+(replace `<scope>` with [appropriate value](siteaccess_aware_configuration.md) like `default` so it's used everywhere including the back office):
 
 ```yaml
 [[= include_file('code_samples/back_office/images/config/packages/views.yaml') =]]
 ```
 
+### Provide back office translation
+
+In the back office, an image asset field is displayed followed by a table of metadata.
+
+As some new specific ones are used in this example, some new translation are needed.
+
+```yaml
+[[= include_file('code_samples/back_office/images/translations/ibexa_fieldtypes_preview.en.yaml') =]]
+```
+
 ### Add Wikimedia Commons connection to DAM configuration
 
 You can now configure a connection with Wikimedia Commons under the `ibexa.system.<scope>.content.dam` key: