Commit 8c3c1979 authored by Ciarán Ainsworth's avatar Ciarán Ainsworth

Resolve "Add alt tags to existing images"

parent 0a93aec8
......@@ -6,9 +6,9 @@
<div class="ui six wide column current-track">
<div class="ui basic segment" id="player">
<template v-if="currentTrack">
<img ref="cover" v-if="currentTrack.cover && currentTrack.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.medium_square_crop)">
<img ref="cover" v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.medium_square_crop)">
<img class="ui image" v-else src="../assets/audio/default-cover.png">
<img ref="cover" alt="" v-if="currentTrack.cover && currentTrack.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.medium_square_crop)">
<img ref="cover" alt="" v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.medium_square_crop)">
<img class="ui image" alt="" v-else src="../assets/audio/default-cover.png">
<h1 class="ui header">
<div class="content ellipsis">
<router-link class="small header discrete link track" :to="{name: 'library.tracks.detail', params: {id: currentTrack.id }}">
......@@ -159,9 +159,9 @@
<i class="grip lines icon"></i>
</td>
<td class="image-cell" @click="$store.dispatch('queue/currentIndex', index)">
<img class="ui mini image" v-if="track.cover && track.cover.original" :src="$store.getters['instance/absoluteUrl'](track.cover.medium_square_crop)">
<img class="ui mini image" v-else-if="track.album && track.album.cover && track.album.cover.original" :src="$store.getters['instance/absoluteUrl'](track.album.cover.medium_square_crop)">
<img class="ui mini image" v-else src="../assets/audio/default-cover.png">
<img class="ui mini image" alt="" v-if="track.cover && track.cover.original" :src="$store.getters['instance/absoluteUrl'](track.cover.medium_square_crop)">
<img class="ui mini image" alt="" v-else-if="track.album && track.album.cover && track.album.cover.original" :src="$store.getters['instance/absoluteUrl'](track.album.cover.medium_square_crop)">
<img class="ui mini image" alt="" v-else src="../assets/audio/default-cover.png">
</td>
<td colspan="3" @click="$store.dispatch('queue/currentIndex', index)">
<button class="title reset ellipsis" :title="track.title" :aria-label="labels.selectTrack">
......
......@@ -8,7 +8,7 @@
</i>
</router-link>
<router-link v-if="!$store.state.auth.authenticated" class="logo-wrapper" :to="{name: logoUrl}" :title="'Funkwhale'">
<img src="../assets/logo/text-white.svg" />
<img src="../assets/logo/text-white.svg" alt="" />
</router-link>
<nav class="top ui compact right aligned inverted text menu">
<template v-if="$store.state.auth.authenticated">
......@@ -78,7 +78,7 @@
</router-link>
<div class="item">
<div class="ui user-dropdown dropdown" >
<img class="ui avatar image" v-if="$store.state.auth.profile.avatar && $store.state.auth.profile.avatar.square_crop" :src="$store.getters['instance/absoluteUrl']($store.state.auth.profile.avatar.square_crop)" />
<img class="ui avatar image" alt="" v-if="$store.state.auth.profile.avatar && $store.state.auth.profile.avatar.square_crop" :src="$store.getters['instance/absoluteUrl']($store.state.auth.profile.avatar.square_crop)" />
<actor-avatar v-else :actor="{preferred_username: $store.state.auth.username, full_username: $store.state.auth.username}" />
<div class="menu">
<router-link class="item" :to="{name: 'profile.overview', params: {username: $store.state.auth.username}}"><translate translate-context="*/*/*/Noun">Profile</translate></router-link>
......
......@@ -73,7 +73,7 @@
<div v-if="values[setting.identifier]">
<div class="ui hidden divider"></div>
<h3 class="ui header"><translate translate-context="Content/Settings/Title/Noun">Current image</translate></h3>
<img class="ui image" v-if="values[setting.identifier]" :src="$store.getters['instance/absoluteUrl'](values[setting.identifier])" />
<img class="ui image" alt="" v-if="values[setting.identifier]" :src="$store.getters['instance/absoluteUrl'](values[setting.identifier])" />
</div>
</div>
</div>
......
<template>
<router-link class="artist-label ui image label" :to="route">
<img :class="[{circular: artist.content_category != 'podcast'}]" v-if="artist.cover && artist.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](artist.cover.small_square_crop)" />
<img :class="[{circular: artist.content_category != 'podcast'}]" alt="" v-if="artist.cover && artist.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](artist.cover.small_square_crop)" />
<i :class="[artist.content_category != 'podcast' ? 'circular' : 'bordered', 'inverted violet users icon']" v-else />
{{ artist.name }}
</router-link>
......
......@@ -5,6 +5,7 @@
</div>
<img
@click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
alt=""
class="channel-image image"
v-if="cover && cover.original"
v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
......@@ -14,11 +15,13 @@
v-else-if="entry.artist.content_category === 'podcast'">#{{ entry.position }}</span>
<img
@click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
alt=""
class="channel-image image"
v-else-if="entry.album && entry.album.cover && entry.album.cover.original"
v-lazy="$store.getters['instance/absoluteUrl'](entry.album.cover.square_crop)">
<img
@click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
alt=""
class="channel-image image"
v-else
src="../../assets/audio/default-cover.png">
......
<template>
<div class="channel-serie-card">
<div class="two-images">
<img @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" v-if="cover.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
<img @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" v-else src="../../assets/audio/default-cover.png">
<img @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" v-if="cover.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
<img @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" v-else src="../../assets/audio/default-cover.png">
<img @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" alt="" v-if="cover.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
<img @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" alt="" v-else src="../../assets/audio/default-cover.png">
<img @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" alt="" v-if="cover.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
<img @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" alt="" v-else src="../../assets/audio/default-cover.png">
</div>
<div class="content ellipsis">
<strong>
......
......@@ -10,9 +10,9 @@
<div class="controls track-controls queue-not-focused desktop-and-up">
<div class="ui tiny image" @click.stop.prevent="$router.push({name: 'library.tracks.detail', params: {id: currentTrack.id }})">
<img ref="cover" v-if="currentTrack.cover && currentTrack.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.medium_square_crop)">
<img ref="cover" v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.medium_square_crop)">
<img v-else src="../../assets/audio/default-cover.png">
<img ref="cover" alt="" v-if="currentTrack.cover && currentTrack.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.medium_square_crop)">
<img ref="cover" alt="" v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.medium_square_crop)">
<img v-else src="../../assets/audio/default-cover.png" alt="">
</div>
<div @click.stop.prevent="" class="middle aligned content ellipsis">
<strong>
......@@ -30,9 +30,9 @@
</div>
<div class="controls track-controls queue-not-focused tablet-and-below">
<div class="ui tiny image">
<img ref="cover" v-if="currentTrack.cover && currentTrack.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.medium_square_crop)">
<img ref="cover" v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.medium_square_crop)">
<img v-else src="../../assets/audio/default-cover.png">
<img ref="cover" alt="" v-if="currentTrack.cover && currentTrack.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.medium_square_crop)">
<img ref="cover" alt="" v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.medium_square_crop)">
<img v-else src="../../assets/audio/default-cover.png" alt="">
</div>
<div class="middle aligned content ellipsis">
<strong>
......
......@@ -4,8 +4,8 @@
<play-button :class="['basic', {vibrant: currentTrack && isPlaying && track.id === currentTrack.id}, 'icon']" :discrete="true" :is-playable="playable" :track="track"></play-button>
</td>
<td>
<img class="ui mini image" v-if="track.album && track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.small_square_crop)">
<img class="ui mini image" v-else src="../../../assets/audio/default-cover.png">
<img class="ui mini image" alt="" v-if="track.album && track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.small_square_crop)">
<img class="ui mini image" alt="" v-else src="../../../assets/audio/default-cover.png">
</td>
<td colspan="6">
<router-link class="track" :to="{name: 'library.tracks.detail', params: {id: track.id }}">
......
......@@ -7,8 +7,8 @@
<div v-if="count > 0" class="ui divided unstackable items">
<div :class="['item', itemClasses]" v-for="object in objects" :key="object.id">
<div class="ui tiny image">
<img v-if="object.track.album && object.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.track.album.cover.medium_square_crop)">
<img v-else src="../../../assets/audio/default-cover.png">
<img alt="" v-if="object.track.album && object.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.track.album.cover.medium_square_crop)">
<img alt="" v-else src="../../../assets/audio/default-cover.png">
<play-button class="play-overlay" :icon-only="true" :button-classes="['ui', 'circular', 'tiny', 'vibrant', 'icon', 'button']" :track="object.track"></play-button>
</div>
<div class="middle aligned content">
......
<template>
<img v-if="actor.icon && actor.icon.original" :src="actor.icon.small_square_crop" class="ui avatar circular image" />
<img alt="" v-if="actor.icon && actor.icon.original" :src="actor.icon.small_square_crop" class="ui avatar circular image" />
<span v-else :style="defaultAvatarStyle" class="ui avatar circular label">{{ actor.preferred_username[0]}}</span>
</template>
......
......@@ -12,8 +12,8 @@
</span>
<div class="ui stackable grid row">
<div class="three wide column">
<img :class="['ui', imageClass, 'image']" v-if="value && value === initialValue" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${value}/proxy?next=medium_square_crop`)" />
<img :class="['ui', imageClass, 'image']" v-else-if="attachment" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${attachment.uuid}/proxy?next=medium_square_crop`)" />
<img alt="" :class="['ui', imageClass, 'image']" v-if="value && value === initialValue" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${value}/proxy?next=medium_square_crop`)" />
<img alt="" :class="['ui', imageClass, 'image']" v-else-if="attachment" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${attachment.uuid}/proxy?next=medium_square_crop`)" />
<div :class="['ui', imageClass, 'static', 'large placeholder image']" v-else></div>
</div>
<div class="eleven wide column">
......
......@@ -3,6 +3,7 @@
<template v-if="avatar">
<img
class="ui tiny circular avatar"
alt=""
v-if="user.avatar && user.avatar.small_square_crop"
v-lazy="$store.getters['instance/absoluteUrl'](user.avatar.small_square_crop)" />
<span v-else :style="defaultAvatarStyle" class="ui circular label">{{ user.username[0]}}</span>
......
......@@ -11,10 +11,10 @@
<div class="ui two column grid" v-if="isSerie">
<div class="column">
<div class="large two-images">
<img class="channel-image" v-if="object.cover && object.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
<img class="channel-image" v-else src="../../assets/audio/default-cover.png">
<img class="channel-image" v-if="object.cover && object.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
<img class="channel-image" v-else src="../../assets/audio/default-cover.png">
<img class="channel-image" alt="" v-if="object.cover && object.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
<img class="channel-image" alt="" v-else src="../../assets/audio/default-cover.png">
<img class="channel-image" alt="" v-if="object.cover && object.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
<img class="channel-image" alt="" v-else src="../../assets/audio/default-cover.png">
</div>
</div>
<div class="ui column right aligned">
......@@ -53,8 +53,8 @@
</header>
</div>
<div v-else class="ui center aligned text padded basic segment">
<img class="channel-image" v-if="object.cover && object.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
<img class="channel-image" v-else src="../../assets/audio/default-cover.png">
<img class="channel-image" alt="" v-if="object.cover && object.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
<img class="channel-image" alt="" v-else src="../../assets/audio/default-cover.png">
<div class="ui hidden divider"></div>
<header>
<h2 class="ui header" :title="object.title">
......
......@@ -54,7 +54,7 @@
<td v-if="field.diff">
<template v-if="field.config.type === 'attachment' && field.oldRepr">
<img class="ui image" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.oldRepr}/proxy?next=medium_square_crop`)" />
<img class="ui image" alt="" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.oldRepr}/proxy?next=medium_square_crop`)" />
</template>
<template v-else>
<span v-if="!part.added" v-for="part in field.diff" :class="['diff', {removed: part.removed}]">
......@@ -68,7 +68,7 @@
<td v-if="field.diff" :title="field.newRepr">
<template v-if="field.config.type === 'attachment' && field.newRepr">
<img class="ui image" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.newRepr}/proxy?next=medium_square_crop`)" />
<img class="ui image" alt="" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.newRepr}/proxy?next=medium_square_crop`)" />
</template>
<template v-else>
<span v-if="!part.removed" v-for="part in field.diff" :class="['diff', {added: part.added}]">
......@@ -78,7 +78,7 @@
</td>
<td v-else :title="field.newRepr">
<template v-if="field.config.type === 'attachment' && field.newRepr">
<img class="ui image" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.newRepr}/proxy?next=medium_square_crop`)" />
<img class="ui image" alt="" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${field.newRepr}/proxy?next=medium_square_crop`)" />
</template>
<template v-else>
{{ field.newRepr }}
......
......@@ -4,7 +4,7 @@
<section class="ui vertical stripe segment">
<div class="ui stackable grid row container">
<div class="six wide column">
<img class="image" v-if="cover && cover.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
<img class="image" alt="" v-if="cover && cover.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
<template v-if="upload">
<h3 class="ui header">
<translate key="1" v-if="track.artist.content_category === 'music'" translate-context="Content/*/*">Track Details</translate>
......
......@@ -3,7 +3,7 @@
<div
@click="$router.push({name: 'library.playlists.detail', params: {id: playlist.id }})"
:class="['ui', 'head-image', 'squares']">
<img v-lazy="url" v-for="(url, idx) in images" :key="idx" />
<img alt="" v-lazy="url" v-for="(url, idx) in images" :key="idx" />
<play-button :icon-only="true" :is-playable="playlist.is_playable" :button-classes="['ui', 'circular', 'large', 'vibrant', 'icon', 'button']" :playlist="playlist"></play-button>
</div>
<div class="content">
......
......@@ -64,8 +64,8 @@
<tr v-for="(plt, index) in plts" :key="`${index}-${plt.track.id}`">
<td class="left aligned">{{ plt.index + 1}}</td>
<td class="center aligned">
<img class="ui mini image" v-if="plt.track.album && plt.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.small_square_crop)">
<img class="ui mini image" v-else src="../../assets/audio/default-cover.png">
<img alt="" class="ui mini image" v-if="plt.track.album && plt.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.small_square_crop)">
<img alt="" class="ui mini image" v-else src="../../assets/audio/default-cover.png">
</td>
<td colspan="4">
<strong>{{ plt.track.title }}</strong><br />
......
......@@ -9,8 +9,8 @@
<div class="ui column">
<div class="segment-content">
<h2 class="ui header">
<img v-if="object.artist.cover && object.artist.cover.square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.artist.cover.square_crop)">
<img v-else src="../../assets/audio/default-cover.png">
<img alt="" v-if="object.artist.cover && object.artist.cover.square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.artist.cover.square_crop)">
<img alt="" v-else src="../../assets/audio/default-cover.png">
<div class="content">
{{ object.artist.name | truncate(100) }}
<div class="sub header">
......
......@@ -9,8 +9,8 @@
<div class="ui column">
<div class="segment-content">
<h2 class="ui header">
<img v-if="object.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
<img v-else src="../../../assets/audio/default-cover.png">
<img alt="" v-if="object.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
<img alt="" v-else src="../../../assets/audio/default-cover.png">
<div class="content">
{{ object.title | truncate(100) }}
<div class="sub header">
......
......@@ -9,8 +9,8 @@
<div class="ui column">
<div class="segment-content">
<h2 class="ui header">
<img v-if="object.cover && object.cover.square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
<img v-else src="../../../assets/audio/default-cover.png">
<img alt="" v-if="object.cover && object.cover.square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
<img alt="" v-else src="../../../assets/audio/default-cover.png">
<div class="content">
{{ object.name | truncate(100) }}
<div class="sub header">
......
......@@ -9,8 +9,8 @@
<div class="ui column">
<div class="segment-content">
<h2 class="ui header">
<img v-if="object.cover && object.cover.square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
<img v-else src="../../../assets/audio/default-cover.png">
<img alt="" v-if="object.cover && object.cover.square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.square_crop)">
<img alt="" v-else src="../../../assets/audio/default-cover.png">
<div class="content">
{{ object.title | truncate(100) }}
<div class="sub header">
......
......@@ -27,7 +27,7 @@
</div>
<h1 class="ui center aligned icon header">
<i v-if="!object.icon" class="circular inverted user success icon"></i>
<img class="ui big circular image" v-else v-lazy="$store.getters['instance/absoluteUrl'](object.icon.square_crop)" />
<img alt="" class="ui big circular image" v-else v-lazy="$store.getters['instance/absoluteUrl'](object.icon.square_crop)" />
<div class="ellispsis content">
<div class="ui very small hidden divider"></div>
<span>{{ displayName }}</span>
......
......@@ -9,7 +9,7 @@
<div class="seven wide column">
<div class="ui two column grid">
<div class="column">
<img class="huge channel-image" v-if="object.artist.cover" :src="$store.getters['instance/absoluteUrl'](object.artist.cover.medium_square_crop)">
<img alt="" class="huge channel-image" v-if="object.artist.cover" :src="$store.getters['instance/absoluteUrl'](object.artist.cover.medium_square_crop)">
<i v-else class="huge circular inverted users violet icon"></i>
</div>
<div class="ui column right aligned">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment