Help Wanted: Keep product images up-to-date

[cwarnermm]

Context

Screenshots and animated GIFs are great tools for visual learners. But they're only as great as they are current and up-to-date. Old screenshots introduce friction and confusion.

Docs request

See a product screenshot that's outdated? Help us keep them updated and featuring the latest product interface!

• Update the docs page with new product screenshots in PNG format.
• Review the docs and GitHub code for any other instances of these specific screenshots being outdated.
• Ensure that ALT text is updated as needed.

How you can help

• Ensure you're using the latest version of Mattermost. You're welcome to base your screenshots off of the Mattermost Community Server UI.
• Use the Desktop App, the standard Mattermost Denim theme, and US English for all official docs screenshots (Unless you're specifically creating a screenshot for the mobile app).
• Don't draw arrows, lines, or call outs on screenshot images.
• Replace existing screenshot filenames via /images.

[ayrotideysarkar]

Hi @cwarnermm can I work on this one?

[cwarnermm]

Hi @ayrotideysarkar! Absolutely! You're welcome to choose where you'd like to start.

[TheOne04]

I'd like to help with this too!
Also I've added images to a page in a fork of the repo, is there a way I can preview it as a webpage before creating a merge request?

[cwarnermm]

Thanks, @TheOne04! All contributions are welcome. Please coordinate with @ayrotideysarkar directly to avoid effort duplication :)

To generate a preview of your changes, you can add the preview-environment label to your docs PR. That label should kick off a build of the docs you can preview, and once the build is complete, you'll see a link in your docs PR to that preview instance.

Alternatively, you can build the docs locally. See the docs README for details on setting up your local development environment.

[cwarnermm]

@ayrotideysarkar @TheOne04 - Are you actively working on this ticket?

[ayrotideysarkar]

@cwarnermm I am not actively working on it now...sorry for replying late.

[TheOne04]

Sorry for the late reply, I haven't been as active lately, but I'll try to add a couple of new screenshots in the next week. Thanks for your patience!

[TheOne04]

@cwarnermm Actually due to current commitments I won't be able to address this for some time :( , I'll try to revisit when I have time. Appreciate your understanding!

[cwarnermm]

Completely understand, @TheOne04! Thanks for letting me know.

[yesbhautik]

I can help @cwarnermm. Please assign so i can start working on it.

[cwarnermm]

Thanks, @yesbhautik!

[yesbhautik]

Inside images folder nothing is organized, Everything is mashed up.

Amm, as I thing organising images is more important, it will be more professional and also helpful in future tasks.

[cwarnermm]

This ticket is requesting that old screenshot images across the docs site are re-captured to reflect the user's current product or third-party tool experience. Let me know if you're open to taking on this ticket as-is.

While I agree that organizing image files is generally a good idea, doing so at this time would also necessitate documentation source code updates to ensure the new image file paths are correct, which is beyond the scope of this docs issue. If this is something you feel passionate about, @yesbhautik, I am open to supporting such an initiative with a separate issue.

[chessmadridista]

Hi @cwarnermm, is this issue still open? May I take it up?

[cwarnermm]

Hi @chessmadridista! I'd love your help with this issue. Thank you!

[chessmadridista]

Hi @cwarnermm, here is the sheet for tracking the updation of images, GIFs, and videos throughout the Mattermost documentation.

Please let me know in case you have any feedback.

[cwarnermm]

Thank you, @chessmadridista! Really appreciate your systematic approach to this problem space!

When tracking image assets across the docs site, tracking the source file is higher priority than tracking the page title - both from a tracing perspective and a file type perspective (the docs site contains both RST and MD files).

In addition, not sure we need to track via column J (has everything been updated) since previous columns track assets by type. Thoughts?

[chessmadridista]

Thank you, @chessmadridista! Really appreciate your systematic approach to this problem space!

When tracking image assets across the docs site, tracking the source file is higher priority than tracking the page title - both from a tracing perspective and a file type perspective (the docs site contains both RST and MD files).

In addition, not sure we need to track via column J (has everything been updated) since previous columns track assets by type. Thoughts?

Hi @cwarnermm, I have changed the column name.

For column J, I included it because it will make it easier for the eyes to track all the changes at once. I tend to be verbose in these types of things, for clarity related to the overall status of the tasks and to speed things up. I have removed the respective column in the other sheet. Would you like me to remove it in this one as well?

[Rutam21]

@cwarnermm Do you have any specific pages in mind that have outdated screenshots?
I would suggest that we treat this ticket as the parent and create child tickets for each page where any contributor can contribute.
With that, I am also willing to work on up to 5 such child tickets if you have a list of such pages.

[yesbhautik]

@cwarnermm I already suggested before, we just have to organize the things, this updation of images and some things are just task of few hours, but still this issue is opened from last 1 year.
We can discuss it in detail if you wish. I have many of ideas as per industry standards for sure.

[cwarnermm]

@Rutam21 @yesbhautik - You both make excellent points and suggestions on how to tackle an issue as wide in scope such as this.

I see the following key outcomes as top priorities for product screenshots where community contributions are most welcome:

1. Remove all legacy image files that are no longer referenced anywhere in the Mattermost Product Documentation. I suspect that this effort would drastically reduce the number of images to maintain across future product releases.
2. Review and update image files referenced on a single docs page to align with standard screenshot expectations and the latest Mattermost interface.
3. (If needed) Identify and globally define any remaining image files that are used across multiple documentation pages, rather than defining repeatedly per page.
4. Identify a process to review and update all product screenshots annually aligned with Mattermost major releases.

I'm envisioning that this issue would be closed and replaced with the 4 issues listed above. Thoughts? Concerns?

[yesbhautik]

Assign me, let me try.

[yesbhautik]

hi, @cwarnermm. I need access to the Mattermost server to capture updated screenshots and other tasks, if you provide credential then it will be very helpful for me. Additionally, I've sent you a direct message on LinkedIn; please check it at your convenience.

[cwarnermm]

Thanks, @yesbhautik!! I'll review the list of potential images we can delete to confirm whether or not they're worth keeping/moving. I'll also identify any other caches of images we may need to review.

[yesbhautik]

Hello, @cwarnermm. I have reviewed the codebase and found that there are a total of 868 images in the ./source/images directory, with 443 of them being unused.

• Could you please confirm whether these images are utilized outside of this documentation codebase? If they are not, I can proceed with deleting the unused images.
• Additionally, could you verify if there are images stored in any other directories, excluding ./source/images?

List of unused images:

access_tokens_additional_roles.png
access_token_enable.png
access_token_manage_roles.png
access_token_settings.png
account-plus-outline_F0801.svg
Ack-Button-Active.svg
Ack-Button-Default.svg
add_members.png
add_members_pop.png
Add_Team_Or_Channel.png
advanced_permissions.png
AD_LDAP_SSO.png
alert-circle-outline_F05D6.svg
align1.jpg
align2.png
align3.jpg
align4.png
align5.jpg
all-plans-badge.png
app-bar.png
apps_F003B.svg
arrow-down-bold-circle-outline_F0048.svg
asset-guidelines-gitter-correct.png
asset-guidelines-gitter-incorrect.png
asset-guidelines-no-logo.png
asset-guidelines-visible-gaps.png
asset-guidelines-wavy-lines.png
attachment-icon.png
attachments-author.png
attachments-color.png
attachments-example.png
attachments-fields.png
attachments-footer.png
attachments-image.png
attachments-pretext.png
attachments-text.png
attachments-thumb.png
attachments-titles.png
avatar-online-status-218x247.png
away.png
AzureApp_App_Directory_IDs.png
AzureApp_Copy_Client_ID.png
AzureApp_Copy_Secret.png
AzureApp_SetupMenu.png
blackberry_step2.png
blackberry_step3.png
blackberry_step4.png
blackberry_step5a1.png
blackberry_step5a2.png
blackberry_step5b1.png
blackberry_step5b2.png
boards-whats-new-01.png
boards-whats-new-02.png
boards-whats-new-03.png
boards-whats-new-04.png
boards-whats-new-05.png
boards-whats-new-06.png
boards-whats-new-07.png
boards-whats-new-08.png
boards-whats-new-09.png
boards-whats-new-10.png
Boards_Hero.png
bookmark-outline_F00C3.svg
browser_notification.png
buttonDesign.png
buttonPlacement1.png
buttonPlacement2.png
buttonPlacement3.png
calls-deployment-image1.png
channel-info.png
channel-preferences.png
channel-purpose.png
check-circle-green.svg
choices1.png
choices2.png
cloud-badge.png
code-tags_F0174.svg
compliance_reports.png
confirm1.jpg
confirm2.jpg
Convert-to-OpenID-Connect.png
copilot-AI-RHS.png
create-new-channel.png
Create_private_channel.png
creation-outline_F1C2B copy.svg
creation-outline_F1C2B.svg
crt-more-actions.png
crt-new-unread-threads.gif
crt-new-unread-threads.png
crt-thread-view.png
custom-emoji.png
custom-status-expiry.png
Custom-Status-Marketing-Animation.gif
Customer_Portal_Subscriptions.png
custom_branding.png
custom_emojis.png
data_retention.png
deep_linking.png
Denim.png
deploy-mm-aws.png
deploy-third-party-aws.png
desktop-bookmark-add-details.png
desktop-server-add2.png
desktop_apps.png
desktop_notification.png
developer-toolkit-appcenter.png
developer-toolkit-jira.png
developer-toolkit-map.png
documentationTable.png
dots-horizontal_F01D8.svg
dots-vertical_F01D9.svg
download-outline_F0B8F.svg
edit-on-github.png
email_notification.png
Emoji1.png
emoticon-outline_F01F2.svg
emoticon-plus-outline_E80F.svg
enterprise-badge.png
enterprise_edition_support.png
enterprise_search.png
error1.png
error2.png
esr-graphic.png
esr.graphic.2.png
esr.png
ESR2021.png
ESR20212.png
ESR20213.png
ESR20214.png
ESR2_update.png
ESR_graphic.png
ESR_graphic12.png
ESR_graphic2.png
ESR_update.png
eye-outline_F06D0.svg
fav.gif
favorite_channels_desktop.png
favorite_channels_sidebar.png
fav_channel_mobile_app.gif
file-image-outline-large_E905.svg
file-text-outline_F09EE.svg
file_sharing.png
flag.png
flagicon.png
flaglist.png
format-bold_F0264.svg
format-header_E81D.svg
format-italic_F0277.svg
format-letter-case_F0B34.svg
format-list-bulleted_F0279.svg
format-list-numbered_F027B.svg
format-quote-open_F0757.svg
format-strikethrough-variant_F0281.svg
fx-guidelines-even-whitespace.png
fx-guidelines-read-outloud.png
fx-guidelines-sufficient-whitespace.png
fx-guidelines-visual-gaps.png
gear-icon.png
github-mark-20px.png
gitlabTable.png
globe-icon.png
globe_E805.svg
google_1_credentials.png
google_2_oauth_consent_screen.png
google_3_oauth_client_id.png
google_3_oauth_consent_screen.png
google_4_web_app.png
google_5_client_id_secret.png
google_authorised_domains.png
google_enable_api.png
header1.png
header2.png
IC-access-control.gif
IC-ad-hoc-tasks.gif
incident-overview.png
incident-response-app-fields.png
incident-response-app-intro-image-fullpage.png
incident-response-app-intro-image.png
incident-response-app-post-action.png
incident-response-app-statistics.png
incident-response-app-transitions.png
incoming_webhooks_create_simple.png
incoming_webhooks_full_example.png
incoming_webhooks_markdown_formatting.png
incoming_webhooks_override_username.png
incoming_webhooks_sample.png
Indigo.png
information-outline_F02FD.svg
inputBehaviour1.png
inputBehaviour2.png
inputBehaviour3.png
inputField1.png
inputField2.png
interactive-dialog-bool.png
interactive-dialog-complete-example.png
interactive-dialog-error.png
interactive-dialog-example.png
interactive-dialog-radio.png
interactive-dialog-select-menu.png
interactive-dialog-select.png
interactive-dialog-text.png
interactive-messages.png
interactive_message.gif
jira_administration_menu.png
jira_sample.png
jira_system_console.png
jira_webhook-configuration.png
LDAP-assign-roles.png
link-variant_F0339.svg
lock-icon.png
lock-outline_F0341.svg
login-office365.png
macosemojiskintones.png
magnify_F0349.svg
manage-sidebar-expand.gif
markdownMath.png
mattermost-cloud-dedicated-byok-architecture.png
message-actions.png
message-formatting-toolbar.png
message-menus.png
Message-Priority-Animated-optimized.gif
messaging.png
MFA.png
mobileiron_step10.png
mobileiron_step2.png
mobileiron_step4.png
mobileiron_step6.png
mobileiron_step7.png
mobileiron_step8.png
mobileiron_step9.png
mobile_apps.png
mobile_manual_mpns.png
mobile_push_contents.png
mobile_SDK_Platforms.png
mobile_SDK_Tools.png
ms-calendar-grant-admin-consent.png
ms-teams-channel-sync-feb-2024.gif
multi-language_support.png
multi-team_support.png
myinsights_teaminsights.gif
network_diagram-old.png
OAuth20Deprecated.png
oauth2_app_screen.png
oauth2_authorization_screen.png
oauth2_confirmation_screen.png
oauth2_deauthorize_app.png
oauth2_regenerate_secret.png
office_1_add_app.png
office_2_generate_password.png
office_3_platform.png
office_4_application_id.png
offline.png
online-status.png
online.png
Onyx.png
outgoing_webhooks_token.png
paperclip_F03E2.svg
performance_monitoring.png
pin-icon-black.png
pinned-icon.png
Playbook-dashboard.png
Playbook-keyword-monitoring.png
plugin_framework.png
plus_F0415.svg
poll.gif
poll.png
post_list_ada.gif
Priority-Message-Icon.svg
products_E82F.svg
professional-badge.png
push_notification.png
Quartz.png
recent-direct-group-messages.png
reduce1.png
reduce2.png
reduce3.png
reply-arrow.png
reply-icon.png
reply-outline_F0F20.svg
replyIcon.png
restore_F099B.svg
review-all-search-results.png
SAML_based_SSO.png
Sapphire.png
save-icon.png
save1.png
scaling-1.png
scaling-2.png
scaling-3.png
search-pop.png
section_loop.gif
selectemoji.png
self-hosted-badge.png
self-managed-badge.png
send_F048A.svg
server-menu.png
server-variant_E81F.svg
set-custom-status.png
set-your-availability.png
settings-outline_F08BB.svg
sidebar-phase-1.gif
sidebar-phase-2.gif
sidebar_ga.gif
sidebar_nav.gif
sign-in-gitlab.png
sign-in-google-apps.png
sign-in-office365.png
sign-in_with_email.png
sign-in_with_gitlab.png
sign-in_with_google_apps.png
sign-in_with_ldap.png
sign-in_with_office_365.png
sign-in_with_saml.png
Site_Statistics.png
slash-commands.gif
slashCommandsAutocomplete.png
slashCommandsTable1.png
slashCommandsTable2.png
slash_commands.png
slash_commands_token.png
smile-icon.png
SSO-SAML-ADFS_create-claim-rules_006.png
SSO-SAML-ADFS_export-id-provider-cert_002.png
star-outline_F04D2.svg
Steve-jobs-screenshot.png
survey-setup.png
systemnotice1.png
systemnotice2.png
team-scheme-list.png
team-sidebar-notifications.png
team-sidebar.gif
team-sidebar.png
test-image.jpg
theme1.png
theme2.png
theme3.png
theme4.png
themeGruvboxDark.png
themeOneDark.png
themeSolarizedDark.png
theme_colors.png
threaded_conversations.png
translations_download.png
ui2.png
ui_channels5.png
ui_messages.png
ui_notifications.png
ui_search.png
ui_teams.png
unflag.png
upload-team-icon.png
valid1.png
valid2.png
weatherBot.png
web-notification-prompt.png
web-service-table.png
webhooks.png
webhooksTable.png
webrtc-header.png
webrtc-popover.png
webrtc_full_settings.png
websocket.png
windows10emojiskintones.png
windows_1_expected_directory_structure.png
windows_2_platform_exe_test.png
windows_3_confirm_mattermost_browser.png
windows_4_IIS_manager.png
windows_5_iis_manager_url_rewrite.png
windows_6_http_to_https_redirect.png
zapier-ch1.png
zapier-ch2.png
zapier-deauthorize.png
zapier-dynamic-fields.png
zapier-error1.png
zapier-error2.png
zapier-error3.png
zapier-error4.png
zapier-oauth.png
zapier-trailing-space-error.png
zoom_api_key.png
zoom_channel_header2.png
zoom_system-console_management.png
zoom_system_console.png
zoom_webhook.png
mobile\androidemojiskintones.png
mobile\appleemojiskintones.png
mobile\app_groups.png
mobile\code_signing.png
mobile\farebase_server_key.png
mobile\firebase_cloud_messaging.png
mobile\firebase_console.png
mobile\firebase_dashboard.png
mobile\firebase_google_services.png
mobile\firebase_project.png
mobile\firebase_register_app.png
mobile\firebase_sdk.png
mobile\firebase_settings.png
mobile\ios_account.png
mobile\ios_appid.png
mobile\ios_create_push_certificate.png
mobile\ios_csr.png
mobile\ios_edit_appid.png
mobile\ios_icloud.png
mobile\ios_keychain_create_cert_request.png
mobile\ios_keychain_export.png
mobile\ios_keychain_export_password.png
mobile\ios_keychain_export_save.png
mobile\ios_keychain_request_certificate.png
mobile\ios_keychain_save_cert_request.png
mobile\ios_keychain_select.png
mobile\ios_type.png
mobile\ios_upload_csr.png
mobile\proxy-config.png
mobile\running_ios.png
mobile\xcode_preferences.png
recipe\prod-vuln-incident1.png
recipe\prod-vuln-incident10.png
recipe\prod-vuln-incident2.png
recipe\prod-vuln-incident3.png
recipe\prod-vuln-incident4.png
recipe\prod-vuln-incident5.png
recipe\prod-vuln-incident6.png
recipe\prod-vuln-incident7.png
recipe\prod-vuln-incident8.png
recipe\prod-vuln-incident9.png

[yesbhautik]

Thanks, @yesbhautik!! I'll review the list of potential images we can delete to confirm whether or not they're worth keeping/moving. I'll also identify any other caches of images we may need to review.

Thanks @cwarnermm for quick responce, give me confirmation. SO, I can move forward to 2nd milestone of #6658.

[cwarnermm]

@yesbhautik - All SVG files in your list should not be deleted. SVG files are defined via /source/conf.py and are actively used across the docs set. Any image defined in conf.py is defined globally once and reused often using a shortcode. SVG files are typically product icon images. I'm going to pull all of the SVG files out of your list and confirm that they're all globally defined via conf.py.

Please omit all image files with a path of recipe/ from deletion. These files should not be deleted because they're actively being used in the code base.

Also, the following image files, defined via conf.py should not be deleted:

• online.png
• away.png
• dnd.png
• offline.png

No other image repositories need a review at this time. Thank you again for this comprehensive list! You're welcome to create a docs PR to remove all image files in your list except the SVG files and the recipe/ files.

[yesbhautik]

Hey, @cwarnermm. Anything remaining in this issue?