Patch to add image descriptions

Support for image descriptions in Pleroma Front-End

This patch adds support for image descriptions to Pleroma-FE. The basic functionality is there (adding descriptions) but there is currently no limit on the size of the description.

This addresses issue #136 (closed)

I have tested this by attaching 1, 2 and 3 image in the Pleroma FE and checking that the alt text shows up on the images in the timeline, as well as in the Mastodon web interface for Pleroma and for Mastodon. I also verified that alt text on existing images shows correctly.

Changes made to the Pleroma Front-End code:

For posting a status with images

• Added code for text input field in components/post_status_form/post_status_form.vue.

    <div class="img-desc-container">
        <label for="imageDescription">{{$t('post_status.image_description')}}
        </label>
        <input type="text" id="imageDescription"     
            :placeholder="$t('post_status.image_description')"
            v-model="newStatus.imageDescriptions[file.id]"
            class="form-img-desc">
    </div>

• This required a new entry image_description in i18n/en.json (other languages not done):

  "post_status": {
     ...
    "image_description": "Image description",
     ...
  }    

• Added newStatus.imageDescriptions in components/post_status_form/post_status_form.js. I changed addMediaFile() so this map gets initially populated with the filename for each file id:

  addMediaFile (fileInfo) {      
      this.newStatus.files.push(fileInfo)
      this.newStatus.imageDescriptions[fileInfo.id]
        =  fileInfo.url.split('/').pop()
      this.enableSubmit()
  },

• Changed postStatus in src/services/status_poster/status_poster.service.js and src/services/api/api.service.js to include the imageDescriptions map. The apiService adds this to the form to be osted:

    form.append('descriptions', JSON.stringify(imageDescriptions))

For displaying alt text on images

• Changed the Attachment template in src/components/attachment/attachment.vue to add the image description to the StillImage as title and alt:

    <a v-if="type === 'image' && (!hidden || preloadImage)"
    class="image-attachment"
    :class="{'hidden': hidden && preloadImage}"
    :href="attachment.url"
    target="_blank" :title="attachment.description">
        <StillImage
        :class="{'small': isSmall}"
        v-bind:alt="attachment.description"
        v-bind:title="attachment.description"
        referrerpolicy="no-referrer"
        :mimetype="attachment.mimetype"
        :src="attachment.large_thumb_url || attachment.url"
        />
    </a>

• Added imageDescription to data() in src/components/attachment/attachment.js but I think it is unused.

• Changed the StillImage template in src/components/still-image/still-image.vue to add the image description to the StillImage as title and alt:

    <template>
          <div class='still-image' :class='{ animated: animated }' >
            <canvas ref="canvas" v-if="animated"></canvas>
            <img v-bind:alt="description"
            v-bind:title="description"
            ref="src" :src="src"
            :referrerpolicy="referrerpolicy"
            v-on:load="onLoad"
            />
          </div>
    </template>

• Added description to props: in src/components/still-image/still-image.js

Changes made to the Pleroma Back-End code:

This is a separate patch, pleroma!626 (merged)

Most of the code was already in place, all I did was change the function attachments_from_ids() in lib/pleroma/web/common_api/utils.ex to take the image descriptions as argument and add them to the name field of the attachments.

def attachments_from_ids(ids, descs_str) do
  {_,descs}=Jason.decode(descs_str)
  Enum.map(ids || [], fn media_id ->
      Map.put(Repo.get(Object, media_id).data,"name",descs[media_id])
  end)
end

The call to this function in post() in CommonAPI (web/common_api/common_api.ex) was changed to take data["descriptions"] as a second argument.

def post(user, %{"status" => status} = data) do
    visibility = get_visibility(data)
    limit = Pleroma.Config.get([:instance, :limit])
    with status <- String.trim(status),
         attachments <- attachments_from_ids(data["media_ids"],data["descriptions"]),
         ...

src/components/attachment/attachment.vue

@@ -10,7 +10,7 @@
       <a href="#" @click.prevent="toggleHidden()">Hide</a>
     </div>
     <a v-if="type === 'image' && (!hidden || preloadImage)" class="image-attachment" :class="{'hidden': hidden && preloadImage}" :href="attachment.url" target="_blank" :title="attachment.description">
-      <StillImage :class="{'small': isSmall}" referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
+      <StillImage :class="{'small': isSmall}" v-bind:alt="attachment.description" v-bind:title="attachment.description" referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
     </a>
 
     <video :class="{'small': isSmall}" v-if="type === 'video' && !hidden" @loadeddata="onVideoDataLoad" :src="attachment.url" controls :loop="loopVideo" playsinline></video>