JGLWEB-1835 add local alt text and caption overrides

bundle/Controller/Configuration.php

@@ -117,6 +117,10 @@ private function resolveTranslations(): array
             'preview_alternate_text_info' => $this->translator->trans('ngrm.edit.vue.preview.alternate_text_info', [], 'ngremotemedia'),
             'preview_caption' => $this->translator->trans('ngrm.edit.vue.preview.caption', [], 'ngremotemedia'),
             'preview_caption_info' => $this->translator->trans('ngrm.edit.vue.preview.caption_info', [], 'ngremotemedia'),
+            'preview_alternate_text_override' => $this->translator->trans('ngrm.edit.vue.preview.alternate_text_override', [], 'ngremotemedia'),
+            'preview_alternate_text_override_info' => $this->translator->trans('ngrm.edit.vue.preview.alternate_text_override_info', [], 'ngremotemedia'),
+            'preview_caption_override' => $this->translator->trans('ngrm.edit.vue.preview.caption_override', [], 'ngremotemedia'),
+            'preview_caption_override_info' => $this->translator->trans('ngrm.edit.vue.preview.caption_override_info', [], 'ngremotemedia'),
             'preview_tags' => $this->translator->trans('ngrm.edit.vue.preview.tags', [], 'ngremotemedia'),
             'preview_tags_info' => $this->translator->trans('ngrm.edit.vue.preview.tags_info', [], 'ngremotemedia'),
             'preview_watermark_text' => $this->translator->trans('ngrm.edit.vue.preview.watermark_text', [], 'ngremotemedia'),

bundle/Controller/Location/SelectedImage.php

@@ -54,6 +54,8 @@ public function __invoke(int $locationId): JsonResponse
             'alternateText' => $remoteResource->getAltText(),
             'caption' => $remoteResource->getCaption(),
             'watermarkText' => $remoteResourceLocation->getWatermarkText(),
+            'altTextOverride' => $remoteResourceLocation->getAltTextOverride(),
+            'captionOverride' => $remoteResourceLocation->getCaptionOverride(),
             'tags' => $remoteResource->getTags(),
             'size' => $remoteResource->getSize(),
             'variations' => $this->service->resolveCropSettingsJson($remoteResourceLocation),

bundle/DependencyInjection/Configuration.php

@@ -237,6 +237,14 @@ private function addNamedObjectsConfiguration(ArrayNodeDefinition $rootNode): vo
                                     ->scalarNode('watermark_text')
                                         ->defaultValue(null)
                                     ->end()
+                                    ->scalarNode('alt_text')
+                                        ->info('Alt text override local to the location')
+                                        ->defaultValue(null)
+                                    ->end()
+                                    ->scalarNode('caption')
+                                        ->info('Caption override local to the location')
+                                        ->defaultValue(null)
+                                    ->end()
                                 ->end()
                             ->end()
                         ->end()

bundle/Resources/config/doctrine/RemoteResourceLocation.orm.xml

@@ -12,6 +12,8 @@
         <field name="source" column="source" type="string" length="255" nullable="true" />
         <field name="cropSettings" column="crop_settings" type="array" />
         <field name="watermarkText" column="watermark_text" type="text" length="1000" nullable="true" />
+        <field name="altTextOverride" column="alt_text_override" type="text" length="1000" nullable="true" />
+        <field name="captionOverride" column="caption_override" type="text" length="1000" nullable="true" />
         <field name="createdAt" column="created_at" type="datetime_immutable" />
         <field name="updatedAt" column="updated_at" type="datetime_immutable" />
 

bundle/Resources/public/js/ckeditor-plugin/constants.js

@@ -124,6 +124,10 @@ export const defaultValue = {
       'preview_alternate_text_info': 'preview_alternate_text_info',
       'preview_caption': 'preview_caption',
       'preview_caption_info': 'preview_caption_info',
+      'preview_alternate_text_override': 'preview_alternate_text_override',
+      'preview_alternate_text_override_info': 'preview_alternate_text_override_info',
+      'preview_caption_override': 'preview_caption_override',
+      'preview_caption_override_info': 'preview_caption_override_info',
       'preview_tags': 'preview_tags',
       'preview_tags_info': 'preview_tags_info',
       'preview_watermark_text': 'preview_watermark_text',
@@ -148,6 +152,8 @@ export const defaultValue = {
       type: 'type',
       altText: 'altText',
       caption: 'caption',
+      altTextOverride: 'altTextOverride',
+      captionOverride: 'captionOverride',
       tags: 'tags[]',
       cropSettings: 'cropSettings',
       source: 'source',
@@ -176,6 +182,8 @@ export const defaultValue = {
     alternateText: '',
     caption: '',
     watermarkText: '',
+    altTextOverride: '',
+    captionOverride: '',
     tags: [],
     size: '',
     variations: {},

bundle/Resources/translations/ngremotemedia.en.yaml

@@ -35,6 +35,10 @@ ngrm:
                 alternate_text_info: 'Alt text is stored directly in Cloudinary on a resource so updating it here will also update it on all other locations which are using that same resource.'
                 caption: 'Caption'
                 caption_info: 'Caption is stored directly in Cloudinary on a resource so updating it here will also update it on all other locations which are using that same resource.'
+                alternate_text_override: 'Alternate text override'
+                alternate_text_override_info: 'Alt text override is stored only on this location and takes precedence over the alt text stored in Cloudinary. Leave it empty to use the alt text from Cloudinary.'
+                caption_override: 'Caption override'
+                caption_override_info: 'Caption override is stored only on this location and takes precedence over the caption stored in Cloudinary. Leave it empty to use the caption from Cloudinary.'
                 tags: 'Tags'
                 tags_info: 'Tags are stored directly in Cloudinary on a resource so updating them here will also update them on all other locations which are using that same resource.'
                 watermark_text: 'Watermark text'

bundle/Resources/translations/ngremotemedia.hr.yaml

@@ -35,6 +35,10 @@ ngrm:
                 alternate_text_info: 'Alternativni tekst se sprema direktno na resurs u oblaku. Ukoliko se promjeni ovdje, promjenit će se i na svim ostalim lokacijama koje koriste taj resurs.'
                 caption: 'Naslov'
                 caption_info: 'Naslov se sprema direktno na resurs u oblaku. Ukoliko se promjeni ovdje, promjenit će se i na svim ostalim lokacijama koje koriste taj resurs.'
+                alternate_text_override: 'Zamjenski alternativni tekst'
+                alternate_text_override_info: 'Zamjenski alternativni tekst sprema se samo na ovu lokaciju i ima prednost pred alternativnim tekstom iz oblaka. Ostavite prazno kako bi se koristio alternativni tekst iz oblaka.'
+                caption_override: 'Zamjenski naslov'
+                caption_override_info: 'Zamjenski naslov sprema se samo na ovu lokaciju i ima prednost pred naslovom iz oblaka. Ostavite prazno kako bi se koristio naslov iz oblaka.'
                 tags: 'Tagovi'
                 tags_info: 'Tagovi se spremaju direktno na resurs u oblaku. Ukoliko se promjene ovdje, promjenit će se i na svim ostalim lokacijama koje koriste taj resurs.'
                 watermark_text: 'Tekst vodenog žiga'

bundle/Resources/translations/ngremotemedia.no.yaml

@@ -35,6 +35,10 @@ ngrm:
                 alternate_text_info: 'Alt text is stored directly to the resource in the cloud. Changing it here will also change it on all other locations which are using that same resource.'
                 caption: 'Caption'
                 caption_info: 'Caption is stored directly to the resource in the cloud. Changing it here will also change it on all other locations which are using that same resource.'
+                alternate_text_override: 'Alt text override'
+                alternate_text_override_info: 'Alt text override is stored only on this location and takes precedence over the alt text stored in the cloud. Leave it empty to use the alt text from the cloud.'
+                caption_override: 'Caption override'
+                caption_override_info: 'Caption override is stored only on this location and takes precedence over the caption stored in the cloud. Leave it empty to use the caption from the cloud.'
                 tags: 'Tags'
                 tags_info: 'Tags are stored directly to the resource in the cloud. Changing them here will also change them on all other locations which are using that same resource.'
                 watermark_text: 'Watermark text'

bundle/Resources/views/app/interactions.html.twig

@@ -98,6 +98,10 @@
         'preview_alternate_text_info': 'ngrm.edit.vue.preview.alternate_text_info'|trans,
         'preview_caption': 'ngrm.edit.vue.preview.caption'|trans,
         'preview_caption_info': 'ngrm.edit.vue.preview.caption_info'|trans,
+        'preview_alternate_text_override': 'ngrm.edit.vue.preview.alternate_text_override'|trans,
+        'preview_alternate_text_override_info': 'ngrm.edit.vue.preview.alternate_text_override_info'|trans,
+        'preview_caption_override': 'ngrm.edit.vue.preview.caption_override'|trans,
+        'preview_caption_override_info': 'ngrm.edit.vue.preview.caption_override_info'|trans,
         'preview_tags': 'ngrm.edit.vue.preview.tags'|trans,
         'preview_tags_info': 'ngrm.edit.vue.preview.tags_info'|trans,
         'preview_watermark_text': 'ngrm.edit.vue.preview.watermark_text'|trans,
@@ -167,6 +171,8 @@
     'alternateText': location and location.remoteResource.altText ? location.remoteResource.altText : '',
     'caption': location and location.remoteResource.caption ? location.remoteResource.caption : '',
     'watermarkText': location and location.watermarkText ? location.watermarkText : '',
+    'altTextOverride': location and location.altTextOverride ? location.altTextOverride : '',
+    'captionOverride': location and location.captionOverride ? location.captionOverride : '',
     'tags': location ? location.remoteResource.tags : [],
     'size': location ? location.remoteResource.size : 0,
     'variations': '%VARIATION_SETTINGS%',

bundle/Resources/views/app/view_resource.html.twig

@@ -7,7 +7,7 @@
     {% if variation_name %}
         {{ ngrm_remote_resource_variation_html_tag(location, variation_group, variation_name)|raw }}
     {% else %}
-        {{ ngrm_remote_resource_html_tag(location.remoteResource)|raw }}
+        {{ ngrm_remote_resource_location_html_tag(location)|raw }}
     {% endif %}
     </div>
 {% else %}

bundle/Templating/Twig/Extension/RemoteMediaExtension.php

@@ -57,6 +57,10 @@ public function getFunctions(): array
                 'ngrm_remote_resource_html_tag',
                 [RemoteMediaRuntime::class, 'getRemoteResourceHtmlTag'],
             ),
+            new TwigFunction(
+                'ngrm_remote_resource_location_html_tag',
+                [RemoteMediaRuntime::class, 'getRemoteResourceLocationHtmlTag'],
+            ),
             new TwigFunction(
                 'ngrm_remote_resource_variation_html_tag',
                 [RemoteMediaRuntime::class, 'getRemoteResourceVariationHtmlTag'],

bundle/Templating/Twig/Runtime/RemoteMediaRuntime.php

@@ -107,6 +107,11 @@ public function getRemoteResourceHtmlTag(RemoteResource $resource, array $htmlAt
         return $this->provider->generateHtmlTag($resource, $htmlAttributes, $forceVideo, $useThumbnail);
     }
 
+    public function getRemoteResourceLocationHtmlTag(RemoteResourceLocation $location, array $htmlAttributes = [], bool $forceVideo = false, bool $useThumbnail = false): string
+    {
+        return $this->provider->generateLocationHtmlTag($location, $htmlAttributes, $forceVideo, $useThumbnail);
+    }
+
     public function getRemoteResourceVariationHtmlTag(
         RemoteResourceLocation $location,
         string $variationGroup,

docs/CHANGELOG.md

@@ -6,6 +6,8 @@
 
 * `cloudinary.use_asset_folder_as_public_id_prefix` option which prefixes the public ID with the asset folder in `dynamic` folder mode, so the same file can be uploaded to different folders
 * upload error for an existing resource now names the folder when the conflict is limited to that folder
+* alt text and caption overrides on `RemoteResourceLocation` (`alt_text_override` and `caption_override` columns), editable in the interface and configurable for named locations (`alt_text` and `caption`), which take precedence over the values stored on the cloud
+* `ngrm_remote_resource_location_html_tag` TWIG function and `ProviderInterface::generateLocationHtmlTag()` which render the resource of a location with its overrides
 
 ### Changed
 

docs/FORM.md

@@ -49,6 +49,23 @@ The above example will make sure that, when you select a new resource in the for
 
 The reason why we're using `OneToOne` relation here is because the idea is that every usage of a remote resource has it's own location. Things such as cropping settings or watermark text are stored in a location, and you want to have different cropping settings for the same eg. image used on different places.
 
+## Alt text and caption overrides
+
+Alt text and caption entered in the interface are stored on the resource in the cloud, so changing them updates every location which uses that resource. Each location can additionally have its own alt text and caption override (`altTextOverride` and `captionOverride` fields of the form), stored only on that location and never sent to the cloud. An empty override means that the value from the cloud is used.
+
+`RemoteResourceLocation::getAltText()` and `RemoteResourceLocation::getCaption()` return the override when it's set and the value from the cloud otherwise, so use them (eg. `location.caption` in TWIG) instead of the ones on the resource when rendering a location:
+
+```twig
+{{ ngrm_remote_resource_variation_html_tag(location, 'default', 'wide') }}
+{{ ngrm_remote_resource_location_html_tag(location) }}
+
+{% if location.caption is not empty %}
+    <figcaption>{{ location.caption }}</figcaption>
+{% endif %}
+```
+
+Both TWIG functions render the overrides as `alt` and `title` attributes of images and video thumbnails, unless those attributes are explicitly provided. `ngrm_remote_resource_html_tag` receives only the resource, so it always uses the values from the cloud.
+
 ## Add field to your form
 
 Now when we have the entity configured properly, it's time to add the form field:

docs/NAMED_OBJECTS.md

@@ -19,11 +19,13 @@ netgen_remote_media:
 
 ### Remote resource location
 
-If you also need a location for that resource, it's possible by using configuration for locations. Configuration consists of key, value pairs, where key is the desired name (eg. `my_resource_location`) and value is another array which accepts three keys:
+If you also need a location for that resource, it's possible by using configuration for locations. Configuration consists of key, value pairs, where key is the desired name (eg. `my_resource_location`) and value is another array which accepts the following keys:
 
 - `resource_remote_id` - remote ID of the resource on the cloud
 - `source` (optional) - text that will be used for the location source (eg. `named_my_resource_location`)
 - `watermark_text` (optional) - watermark text which can be used if a watermaked variation gets built from that location
+- `alt_text` (optional) - alt text override for the location, used instead of the alt text stored on the cloud
+- `caption` (optional) - caption override for the location, used instead of the caption stored on the cloud
 
 Example:
 
@@ -35,6 +37,7 @@ netgen_remote_media:
                 resource_remote_id: 'upload|image|folder/my_resource'
                 source: 'named_my_resource_location'
                 watermark_text: 'Netgen.io'
+                alt_text: 'Netgen logo'
 ```
 
 ## Usage

docs/UPGRADE.md

@@ -36,6 +36,9 @@ Also, there were a lot of changes during the decoupling from eZ to make things c
    * `public static function createFromCloudinaryResponse(array $response): self`
 * The bundle was using eZ's `ezpublish.cache_pool` cache pool for caching while it was depending on eZ. Now it requires cache pool to be provided in order to work. See [Install instructions](INSTALL.md) for more info.
 * Parameter for cache TTL `netgen_remote_media.cloudinary.cache_ttl` has been removed in favour of semantic configuration for cache. See [Install instructions](INSTALL.md) for more info.
+* `RemoteResourceLocation` can hold alt text and caption overrides which take precedence over the values stored on the cloud (see [Form documentation](FORM.md#alt-text-and-caption-overrides)). If you already created the database tables for 3.0, add the new columns with `php bin/console doctrine:schema:update` (check the output of `--dump-sql` first), or manually:
+    * MySQL: `ALTER TABLE ngrm_remote_resource_location ADD alt_text_override TEXT DEFAULT NULL, ADD caption_override TEXT DEFAULT NULL;`
+    * PostgreSQL: `ALTER TABLE ngrm_remote_resource_location ADD alt_text_override TEXT DEFAULT NULL, ADD caption_override TEXT DEFAULT NULL;`
 
 ### Code changes
 

frontend/src/components/Interactions.vue

@@ -152,6 +152,8 @@ export default {
         alternateText: item.altText,
         caption: item.caption,
         watermarkText: this.selectedImage.watermarkText,
+        altTextOverride: '',
+        captionOverride: '',
         tags: item.tags,
         size: item.size,
         variations: {},
@@ -187,6 +189,8 @@ export default {
         alternateText: item.altText,
         caption: item.caption,
         watermarkText: this.selectedImage.watermarkText,
+        altTextOverride: '',
+        captionOverride: '',
         tags: item.tags,
         size: item.size,
         variations: {},
@@ -215,6 +219,8 @@ export default {
         alternateText: '',
         caption: '',
         watermarkText: this.selectedImage.watermarkText,
+        altTextOverride: '',
+        captionOverride: '',
         tags: [],
         size: 0,
         variations: {},

frontend/src/components/Preview.vue

@@ -58,6 +58,36 @@
           >
         </div>
 
+        <div class="ngremotemedia-alttext-override">
+          <span class="help-block description">
+              {{this.config.translations.preview_alternate_text_override}}
+              <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right" :title="this.config.translations.preview_alternate_text_override_info"></i>
+          </span>
+
+          <input type="text"
+               :name="this.config.inputFields.altTextOverride"
+               v-model="selectedImage.altTextOverride"
+               v-debounce:500ms="() => dispatchChangeEvent(this.config.inputFields.altTextOverride)"
+               :placeholder="selectedImage.alternateText"
+               class="media-alttext-override data"
+          >
+        </div>
+
+        <div class="ngremotemedia-caption-override">
+          <span class="help-block description">
+              {{this.config.translations.preview_caption_override}}
+              <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right" :title="this.config.translations.preview_caption_override_info"></i>
+          </span>
+
+          <input type="text"
+               :name="this.config.inputFields.captionOverride"
+               v-model="selectedImage.captionOverride"
+               v-debounce:500ms="() => dispatchChangeEvent(this.config.inputFields.captionOverride)"
+               :placeholder="selectedImage.caption"
+               class="media-caption-override data"
+          >
+        </div>
+
         <div class="ngremotemedia-tags">
           <span class="help-block description">
               {{this.config.translations.preview_tags}}

frontend/src/main.js

@@ -35,6 +35,8 @@ const initInteractionsVue = (el) => {
                     'type': 'type',
                     'altText': 'altText',
                     'caption': 'caption',
+                    'altTextOverride': 'altTextOverride',
+                    'captionOverride': 'captionOverride',
                     'tags': 'tags[]',
                     'cropSettings': 'cropSettings',
                     'source': 'source',
@@ -63,6 +65,8 @@ const initInteractionsVue = (el) => {
                 alternateText: '',
                 caption: '',
                 watermarkText: '',
+                altTextOverride: '',
+                captionOverride: '',
                 tags: [],
                 size: '',
                 variations: {},

frontend/src/scss/ngremotemedia.scss

@@ -143,7 +143,7 @@
       color: #737373;
     }
 
-    input.media-alttext, input.media-caption, input.media-watermarktext, input.media-css-class {
+    input.media-alttext, input.media-caption, input.media-alttext-override, input.media-caption-override, input.media-watermarktext, input.media-css-class {
       width: 100%;
       border-radius: 0;
       border: 1px solid #e4e4e4;