Skip to content

refactor(many): batch update of alt text and title attributes for MD images #3500

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
115 commits
Select commit Hold shift + click to select a range
1fb80be
add alttexter.yml
jonathanalgar Mar 1, 2024
42d8ef4
trigger small batch to test
jonathanalgar Mar 1, 2024
108c95e
Update image alt and title attributes in docs/angular/your-first-app.md
invalid-email-address Mar 1, 2024
7c90a0b
Update image alt and title attributes in docs/angular/lifecycle.md
invalid-email-address Mar 1, 2024
79bd8f2
Update image alt and title attributes in docs/angular/your-first-app/…
invalid-email-address Mar 1, 2024
10187b3
Update image alt and title attributes in docs/angular/your-first-app/…
invalid-email-address Mar 1, 2024
68631d3
Update image alt and title attributes in docs/core-concepts/webview.md
invalid-email-address Mar 1, 2024
2b8bcdf
Update image alt and title attributes in docs/developer-resources/gui…
invalid-email-address Mar 1, 2024
685d6c7
Update image alt and title attributes in docs/developer-resources/gui…
invalid-email-address Mar 1, 2024
2d419e1
Update image alt and title attributes in docs/developer-resources/gui…
invalid-email-address Mar 1, 2024
8e7371f
Update image alt and title attributes in docs/developer-resources/gui…
invalid-email-address Mar 1, 2024
ac586bd
Update image alt and title attributes in docs/developer-resources/gui…
invalid-email-address Mar 1, 2024
5688802
trigger the rest with langsmith switched on
jonathanalgar Mar 1, 2024
6c9624d
Update image alt and title attributes in docs/intro/cli.md
invalid-email-address Mar 1, 2024
a61551a
Update image alt and title attributes in docs/developing/tips.md
invalid-email-address Mar 1, 2024
799dc03
Update image alt and title attributes in docs/react/quickstart.md
invalid-email-address Mar 1, 2024
a0fadfa
Update image alt and title attributes in docs/developer-resources/gui…
invalid-email-address Mar 1, 2024
f392447
Update image alt and title attributes in versioned_docs/version-v7/vu…
invalid-email-address Mar 1, 2024
c11478c
Update image alt and title attributes in docs/react/your-first-app.md
invalid-email-address Mar 1, 2024
0e91718
Update image alt and title attributes in docs/react/your-first-app/2-…
invalid-email-address Mar 1, 2024
ef39d7c
Update image alt and title attributes in docs/react/your-first-app/6-…
invalid-email-address Mar 1, 2024
3310eb3
Update image alt and title attributes in docs/vue/quickstart.md
invalid-email-address Mar 1, 2024
5573f51
Update image alt and title attributes in docs/vue/your-first-app.md
invalid-email-address Mar 1, 2024
9a460a7
Update image alt and title attributes in docs/vue/your-first-app/2-ta…
invalid-email-address Mar 1, 2024
c0b017d
Update image alt and title attributes in docs/vue/your-first-app/6-de…
invalid-email-address Mar 1, 2024
dce83dc
Update image alt and title attributes in versioned_docs/version-v5/an…
invalid-email-address Mar 1, 2024
6bb01cd
Update image alt and title attributes in versioned_docs/version-v5/an…
invalid-email-address Mar 1, 2024
ed9b002
Update image alt and title attributes in versioned_docs/version-v5/an…
invalid-email-address Mar 1, 2024
807c1c1
Update image alt and title attributes in versioned_docs/version-v5/co…
invalid-email-address Mar 1, 2024
692e4d6
Update image alt and title attributes in versioned_docs/version-v5/an…
invalid-email-address Mar 1, 2024
c12af1d
Update image alt and title attributes in versioned_docs/version-v5/de…
invalid-email-address Mar 1, 2024
9cd94bc
Update image alt and title attributes in versioned_docs/version-v5/de…
invalid-email-address Mar 1, 2024
6fe59d1
Update image alt and title attributes in versioned_docs/version-v5/de…
invalid-email-address Mar 1, 2024
7a0b749
Update image alt and title attributes in versioned_docs/version-v5/de…
invalid-email-address Mar 1, 2024
49b3e6e
Update image alt and title attributes in versioned_docs/version-v5/de…
invalid-email-address Mar 1, 2024
c5ff86a
Update image alt and title attributes in versioned_docs/version-v5/de…
invalid-email-address Mar 1, 2024
ada6877
Update image alt and title attributes in versioned_docs/version-v5/de…
invalid-email-address Mar 1, 2024
bb37f38
Update image alt and title attributes in versioned_docs/version-v5/de…
invalid-email-address Mar 1, 2024
4d519f3
Update image alt and title attributes in versioned_docs/version-v5/de…
invalid-email-address Mar 1, 2024
7f8a626
Update image alt and title attributes in versioned_docs/version-v5/de…
invalid-email-address Mar 1, 2024
9a85168
Update image alt and title attributes in versioned_docs/version-v5/in…
invalid-email-address Mar 1, 2024
fd63335
Update image alt and title attributes in versioned_docs/version-v5/re…
invalid-email-address Mar 1, 2024
4a50e46
Update image alt and title attributes in versioned_docs/version-v5/re…
invalid-email-address Mar 1, 2024
b7df029
Update image alt and title attributes in versioned_docs/version-v5/re…
invalid-email-address Mar 1, 2024
fe30557
Update image alt and title attributes in versioned_docs/version-v5/re…
invalid-email-address Mar 1, 2024
dcc920d
Update image alt and title attributes in versioned_docs/version-v5/vu…
invalid-email-address Mar 1, 2024
0589fea
Update image alt and title attributes in versioned_docs/version-v5/vu…
invalid-email-address Mar 1, 2024
d48717e
Update image alt and title attributes in versioned_docs/version-v5/vu…
invalid-email-address Mar 1, 2024
13152a1
Update image alt and title attributes in versioned_docs/version-v6/an…
invalid-email-address Mar 1, 2024
300a20e
Update image alt and title attributes in versioned_docs/version-v5/vu…
invalid-email-address Mar 1, 2024
ef277fe
Update image alt and title attributes in versioned_docs/version-v6/an…
invalid-email-address Mar 1, 2024
3150c18
Update image alt and title attributes in versioned_docs/version-v6/an…
invalid-email-address Mar 1, 2024
982ac01
Update image alt and title attributes in versioned_docs/version-v6/an…
invalid-email-address Mar 1, 2024
ffbe21f
Update image alt and title attributes in versioned_docs/version-v6/co…
invalid-email-address Mar 1, 2024
9022b4e
Update image alt and title attributes in versioned_docs/version-v6/de…
invalid-email-address Mar 1, 2024
0851753
Update image alt and title attributes in versioned_docs/version-v6/de…
invalid-email-address Mar 1, 2024
40794b9
Update image alt and title attributes in versioned_docs/version-v6/de…
invalid-email-address Mar 1, 2024
fb55911
Update image alt and title attributes in versioned_docs/version-v6/de…
invalid-email-address Mar 1, 2024
eb805ca
Update image alt and title attributes in versioned_docs/version-v6/de…
invalid-email-address Mar 1, 2024
000647a
Update image alt and title attributes in versioned_docs/version-v6/de…
invalid-email-address Mar 1, 2024
419b01d
Update image alt and title attributes in versioned_docs/version-v6/de…
invalid-email-address Mar 1, 2024
5bce2fe
Update image alt and title attributes in versioned_docs/version-v6/de…
invalid-email-address Mar 1, 2024
ff8949b
Update image alt and title attributes in versioned_docs/version-v6/de…
invalid-email-address Mar 1, 2024
d322a74
Update image alt and title attributes in versioned_docs/version-v6/in…
invalid-email-address Mar 1, 2024
692254c
Update image alt and title attributes in versioned_docs/version-v6/re…
invalid-email-address Mar 1, 2024
4094038
Update image alt and title attributes in versioned_docs/version-v6/re…
invalid-email-address Mar 1, 2024
af7cdf1
Update image alt and title attributes in versioned_docs/version-v6/re…
invalid-email-address Mar 1, 2024
12b0d1c
Update image alt and title attributes in versioned_docs/version-v6/re…
invalid-email-address Mar 1, 2024
c1bbf45
Update image alt and title attributes in versioned_docs/version-v6/vu…
invalid-email-address Mar 1, 2024
da22b1a
Update image alt and title attributes in versioned_docs/version-v6/vu…
invalid-email-address Mar 1, 2024
532d26e
Update image alt and title attributes in versioned_docs/version-v6/vu…
invalid-email-address Mar 1, 2024
438e80e
Update image alt and title attributes in versioned_docs/version-v6/vu…
invalid-email-address Mar 1, 2024
54d387f
Update image alt and title attributes in versioned_docs/version-v7/an…
invalid-email-address Mar 1, 2024
974d466
Update image alt and title attributes in versioned_docs/version-v7/an…
invalid-email-address Mar 1, 2024
530f6f7
Update image alt and title attributes in versioned_docs/version-v7/an…
invalid-email-address Mar 1, 2024
bd35439
Update image alt and title attributes in versioned_docs/version-v7/an…
invalid-email-address Mar 1, 2024
fcb80a8
Update image alt and title attributes in versioned_docs/version-v7/co…
invalid-email-address Mar 1, 2024
0bead52
Update image alt and title attributes in versioned_docs/version-v7/de…
invalid-email-address Mar 1, 2024
d920639
Update image alt and title attributes in versioned_docs/version-v7/de…
invalid-email-address Mar 1, 2024
55edfa4
Update image alt and title attributes in versioned_docs/version-v7/de…
invalid-email-address Mar 1, 2024
4fa0cb3
Update image alt and title attributes in versioned_docs/version-v7/de…
invalid-email-address Mar 1, 2024
af0e356
Update image alt and title attributes in versioned_docs/version-v7/de…
invalid-email-address Mar 1, 2024
0509a9c
Update image alt and title attributes in versioned_docs/version-v7/de…
invalid-email-address Mar 1, 2024
ffaba19
Update image alt and title attributes in versioned_docs/version-v7/de…
invalid-email-address Mar 1, 2024
f22c81c
Update image alt and title attributes in versioned_docs/version-v7/in…
invalid-email-address Mar 1, 2024
b24d4c6
Update image alt and title attributes in versioned_docs/version-v7/re…
invalid-email-address Mar 1, 2024
c1835a6
Update image alt and title attributes in versioned_docs/version-v7/re…
invalid-email-address Mar 1, 2024
11da541
Update image alt and title attributes in versioned_docs/version-v7/re…
invalid-email-address Mar 1, 2024
0a35161
Update image alt and title attributes in versioned_docs/version-v7/re…
invalid-email-address Mar 1, 2024
b9ead57
Update image alt and title attributes in versioned_docs/version-v7/vu…
invalid-email-address Mar 1, 2024
1a860de
Update image alt and title attributes in versioned_docs/version-v7/vu…
invalid-email-address Mar 1, 2024
c3913d3
Update image alt and title attributes in versioned_docs/version-v7/vu…
invalid-email-address Mar 1, 2024
1da0f47
trigger in-line images, mdx files
jonathanalgar Mar 2, 2024
a062b41
Update image alt and title attributes in docs/troubleshooting/native.md
invalid-email-address Mar 2, 2024
d0385b4
Update image alt and title attributes in docs/theming/advanced.md
invalid-email-address Mar 2, 2024
758f8b2
Update image alt and title attributes in docs/deployment/play-store.mdx
invalid-email-address Mar 2, 2024
45816f7
Update image alt and title attributes in docs/theming/dark-mode.md
invalid-email-address Mar 2, 2024
2ceda27
Update image alt and title attributes in versioned_docs/version-v7/de…
invalid-email-address Mar 2, 2024
af41a18
Update image alt and title attributes in versioned_docs/version-v7/th…
invalid-email-address Mar 2, 2024
d777c4a
Update image alt and title attributes in versioned_docs/version-v7/th…
invalid-email-address Mar 2, 2024
2800308
Update image alt and title attributes in versioned_docs/version-v7/tr…
invalid-email-address Mar 2, 2024
8aba128
Update image alt and title attributes in versioned_docs/version-v5/na…
invalid-email-address Mar 2, 2024
cf9d96f
Update image alt and title attributes in versioned_docs/version-v5/th…
invalid-email-address Mar 2, 2024
9448f81
Update image alt and title attributes in versioned_docs/version-v5/tr…
invalid-email-address Mar 2, 2024
b03b7fe
Update image alt and title attributes in versioned_docs/version-v6/de…
invalid-email-address Mar 2, 2024
6e15f4d
Update image alt and title attributes in versioned_docs/version-v6/th…
invalid-email-address Mar 2, 2024
c890cd2
Update image alt and title attributes in versioned_docs/version-v6/th…
invalid-email-address Mar 2, 2024
fa8764f
Update image alt and title attributes in versioned_docs/version-v6/tr…
invalid-email-address Mar 2, 2024
f0c2665
tweaks and consistent texts across versions
jonathanalgar Mar 2, 2024
a5b74e0
Revert "add alttexter.yml"
jonathanalgar Mar 2, 2024
5d86a08
lint
jonathanalgar Mar 2, 2024
b88dd0e
Remove "Screenshot of/with/showing"
jonathanalgar Apr 24, 2024
cfc153e
Replace & with and
jonathanalgar Apr 24, 2024
f7d3a3c
Requested removal of remaining "screenshot" mentions
jonathanalgar Apr 26, 2024
7069a7f
chore(many): run lint
thetaPC Apr 26, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Remove "Screenshot of/with/showing"
  • Loading branch information
jonathanalgar committed Apr 24, 2024
commit b88dd0eec131a61df6608e84746cb43fe185ab39
2 changes: 1 addition & 1 deletion docs/angular/lifecycle.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fir

For `ionViewWillLeave` and `ionViewDidLeave`, `ionViewWillLeave` gets called directly before the transition away from the current page begins, and `ionViewDidLeave` does not get called until after the new page gets successfully transitioned into (after the new pages `ionViewDidEnter` fires).

![Animated sequence showing Ionic page life cycle events in a console log as a page transition occurs.](/img/guides/lifecycle/ioniclifecycle.gif 'Ionic Lifecycle Animation')
![Animated GIF showing Ionic page life cycle events in a console log as a page transition occurs.](/img/guides/lifecycle/ioniclifecycle.gif 'Ionic Lifecycle Animation')

## How Ionic Handles the Life of a Page

Expand Down
2 changes: 1 addition & 1 deletion docs/angular/your-first-app/2-taking-photos.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ Then, open `tab2.page.html` and call the `addPhotoToGallery()` function when the

Save the file, and if it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!

![Screenshot of a photo gallery app displaying a webcam selfie.](/img/guides/first-app-cap-ng/camera-web.png 'Webcam Selfie in Photo Gallery')
![A photo gallery app displaying a webcam selfie.](/img/guides/first-app-cap-ng/camera-web.png 'Webcam Selfie in Photo Gallery')

_(Your selfie is probably much better than mine)_

Expand Down
6 changes: 3 additions & 3 deletions docs/angular/your-first-app/6-deploying-mobile.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ ionic cap open ios

In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."

![Screenshot of the Info.plist file in Xcode showing the NSCameraUsageDescription key added for camera access.](/img/guides/first-app-cap-ng/xcode-info-plist.png 'Xcode Info.plist Configuration')
![The Info.plist file in Xcode showing the NSCameraUsageDescription key added for camera access.](/img/guides/first-app-cap-ng/xcode-info-plist.png 'Xcode Info.plist Configuration')

Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."

Expand All @@ -70,7 +70,7 @@ Follow the same process to add the other two Keys required of the Camera plugin:

Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.

![Screenshot of the Xcode interface displaying the Signing & Capabilities tab for an iOS app project.](/img/guides/first-app-cap-ng/xcode-signing.png 'Xcode Signing & Capabilities')
![The Xcode interface displaying the Signing & Capabilities tab for an iOS app project.](/img/guides/first-app-cap-ng/xcode-signing.png 'Xcode Signing & Capabilities')

With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:

Expand Down Expand Up @@ -103,7 +103,7 @@ Scroll to the `Permissions` section and ensure these entries are included:

Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.

![Screenshot of the Android Studio interface with arrows pointing to the Run button and the connected device.](/img/guides/first-app-cap-ng/android-device.png 'Android Studio Run Configuration')
![The Android Studio interface with arrows pointing to the Run button and the connected device.](/img/guides/first-app-cap-ng/android-device.png 'Android Studio Run Configuration')

Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.

Expand Down
8 changes: 4 additions & 4 deletions docs/deployment/play-store.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -69,15 +69,15 @@ If you haven't made the switch to Android app bundles yet, you will need to opt
First, create a new app in the Google Play Console. In order to enable app signing, you'll need to navigate to the new release screen, on one of the Production, Open testing, closed testing, or internal testing pages.
Select the Create new release button as seen below (it doesn't matter which release type, since you don't have to actually go through with creating a new release right now):

![Screenshot of Google Play Console's Production tab with arrow pointing to the 'Create new release' button.](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-release-1024x561.png "Google Play Console New Release Creation")
![Google Play Console's Production tab with arrow pointing to the 'Create new release' button.](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-release-1024x561.png "Google Play Console New Release Creation")

Under the App integrity section, click the **Change app signing key** button:

![Screenshot of Google Play Console's App integrity section with the 'Change app signing key' button highlighted.](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-signingkey.png "Google Play Console Change App Signing Key Option")
![Google Play Console's App integrity section with the 'Change app signing key' button highlighted.](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-signingkey.png "Google Play Console Change App Signing Key Option")

Next, select the **Export and upload a key from Java Keystore** option. This is the only way in which you can retain the key and have Google Play use it for signing. If you're using Appflow to build Android apps in the cloud, this is also the required option so you can upload the keystore file to Appflow.

![Screenshot of the Google Play Console showing the option to 'Export and upload a key from Java Keystore'.](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-export-1024x564.png "Google Play Console Export and Upload Key Option")
![The Google Play Console showing the option to 'Export and upload a key from Java Keystore'.](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-export-1024x564.png "Google Play Console Export and Upload Key Option")

Follow the instructions on the screen to generate the Keystore and you can use the same Keystore file to sign your app in the Appflow dashboard as well. If you need any help generating the Keystore file, you can refer to our docs [here](https://ionic.io/docs/appflow/package/credentials#android-certificates).
Once the generated zip file has been uploaded, you're all set! Build an AAB binary signed with the keystore file then upload it to Google Play.
Expand Down Expand Up @@ -140,7 +140,7 @@ Making a developer account with Google Play costs $25 USD.

Once a developer account has been created, go ahead and click the `Create an Application`

![Screenshot of the Google Play Store Developer Console with the 'CREATE APPLICATION' button highlighted.](/img/publishing/newAppGPlay.png "Google Play Store Create Application Button")
![The Google Play Store Developer Console with the 'CREATE APPLICATION' button highlighted.](/img/publishing/newAppGPlay.png "Google Play Store Create Application Button")

Be sure to fill out the description for the app along with providing screenshots and additional info.
When ready, upload the signed release AAB/APK that was generated and publish the app.
Expand Down
2 changes: 1 addition & 1 deletion docs/developer-resources/guides/first-app-v3/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after:

![Screenshot showing the Ionic app's transformation from a blank 'Tab Two' to a 'Photo Gallery' with images.](/img/guides/first-app-v3/gallery-combined.png 'Ionic App Before and After Photo Gallery')
![An Ionic app's transformation from a blank 'Tab Two' to a 'Photo Gallery' with images.](/img/guides/first-app-v3/gallery-combined.png 'Ionic App Before and After Photo Gallery')

It’s easy to get started. Reference code for this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ $ git push ionic master

Log into the [Appflow dashboard](https://dashboard.ionicframework.com) and navigate to Deploy -> Builds. You’ll see this newest commit begin to build immediately. Since we assigned the Appflow plugin to the Master branch (the one we always Git Push to), the Channel label will also point to this commit, effectively auto-deploying this change to all app users:

![Screenshot showing the Deploy Builds section in the Appflow dashboard.](/img/guides/first-app-v3/deploy-channel.png 'Appflow Deploy Builds')
![The Deploy Builds section in the Appflow dashboard.](/img/guides/first-app-v3/deploy-channel.png 'Appflow Deploy Builds')

A Channel points to a specific JavaScript Build or Snapshot of your app that will be shared with devices listening to that channel for updates. You can change which Build a Channel points to whenever you’d like.

Expand All @@ -180,7 +180,7 @@ What if you deploy a change, then realize that there is a bug? Or perhaps you’

On the Deploy Builds page, click the “Assign to Channel” button on the previous commit, then click “Deploy.” App users will be reverted to the previous version, and our “Photo Gallery” name has been restored.

![Screenshot of the Deploy Builds section in Appflow with a commit labeled 'set name to Photo Gallery' being assigned to the master channel for rollback.](/img/guides/first-app-v3/deploy-revertChange.png 'Appflow Deploy Revert Change')
![The Deploy Builds section in Appflow with a commit labeled 'set name to Photo Gallery' being assigned to the master channel for rollback.](/img/guides/first-app-v3/deploy-revertChange.png 'Appflow Deploy Revert Change')

This was just a taste of what you can do with Appflow Live Updates! You can also set up multiple deployment channels to send targeted updates to specific groups of users. Use it to run A/B tests, or target the distribution of updates by audience, geography, or test group.

Expand Down
2 changes: 1 addition & 1 deletion docs/developer-resources/guides/first-app-v3/theming.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ imports: [

Now, the iOS version of our app has a Material Design skin!

![Screenshot showing an Ionic app with Material Design styling applied on an iOS device.](/img/guides/first-app-v3/ion-lab-md-styling.png 'Ionic Material Design Styling on iOS')
![An Ionic app with Material Design styling applied on an iOS device.](/img/guides/first-app-v3/ion-lab-md-styling.png 'Ionic Material Design Styling on iOS')

Creating gorgeous-looking Ionic apps is easy with Sass variables and platform-specific styling. You now have everything you need to get started with Ionic. Go forth and build great apps!

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ ionic serve

Tap on the Gallery tab, then the camera button. A runtime error should occur. In a browser, head over to the [Appflow dashboard](https://dashboard.ionicframework.com), then Monitor -> Monitoring. After a few minutes, the error should appear:

![Screenshot of an event showing error 'takePhoto is not a function' with status 'New'.](/img/guides/first-app-v3/monitoring-event.png 'Ionic Monitoring Event Overview')
![An event showing error 'takePhoto is not a function' with status 'New'.](/img/guides/first-app-v3/monitoring-event.png 'Ionic Monitoring Event Overview')

Clicking on the event gives us lots of details surrounding what happened, such as a full stack trace. In this instance, we see that the error occurred three times on Mac OS X in the Chrome web browser.

Expand Down
2 changes: 1 addition & 1 deletion docs/developer-resources/guides/first-app-v4/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after:

![Screenshot showing the Ionic app's transformation from a blank 'Tab Two' to a 'Photo Gallery' with images.](/img/guides/first-app-v3/gallery-combined.png 'Ionic App Before and After Photo Gallery')
![An Ionic app's transformation from a blank 'Tab Two' to a 'Photo Gallery' with images.](/img/guides/first-app-v3/gallery-combined.png 'Ionic App Before and After Photo Gallery')

It’s easy to get started. Note that all code referenced in this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4/).

Expand Down
2 changes: 1 addition & 1 deletion docs/developer-resources/guides/first-app-v4/theming.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ imports: [

Now, the iOS version of our app has a Material Design skin!

![Screenshot showing an Ionic app with Material Design styling applied on an iOS device.](/img/guides/first-app-v3/ion-lab-md-styling.png 'Ionic Material Design Styling on iOS')
![An Ionic app with Material Design styling applied on an iOS device.](/img/guides/first-app-v3/ion-lab-md-styling.png 'Ionic Material Design Styling on iOS')

Creating gorgeous-looking Ionic apps is easy with CSS variables and platform-specific styling. You now have everything you need to get started with Ionic.

Expand Down
2 changes: 1 addition & 1 deletion docs/developing/tips.md
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ By default, when an app is viewed in the browser, Ionic will apply the `md` mode
This will not change which platform the browser sees being used. The platform is determined by device detection and inspecting the user-agent. To change the platform, the user-agent must be changed. To do this, open up Chrome DevTools with <kbd>Ctrl+Shift+I</kbd>(<kbd>Cmd+Option+I</kbd> on Mac), and then toggle device mode on with <kbd>Ctrl+Shift+M</kbd>(<kbd>Cmd+Option+M</kbd> on Mac).
:::

![Screenshot of Chrome DevTools showing the device mode with iPhone X selected.](/img/faq/tips/change-device-platform.png 'Chrome DevTools Device Mode')
![Chrome DevTools showing the device mode with iPhone X selected.](/img/faq/tips/change-device-platform.png 'Chrome DevTools Device Mode')

Selecting devices from the device dropdown will change the user-agent, as well as the dimensions of the viewport.

Expand Down
2 changes: 1 addition & 1 deletion docs/react/quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ Now the `App` does not really have a lot to modify here. It's a basic example of

Currently, the `Home` component looks like so:

![Screenshot of the Home component displayed in a web browser with the text 'The world is your oyster'.](/img/guides/react/first-app/home-route.png 'Ionic React Home Component')
![The Home component displayed in a web browser with the text 'The world is your oyster'.](/img/guides/react/first-app/home-route.png 'Ionic React Home Component')

```tsx
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
Expand Down
2 changes: 1 addition & 1 deletion docs/react/your-first-app/2-taking-photos.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const Tab2: React.FC = () => {

Save the file, and if you’re not already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!

![Screenshot of a photo gallery app displaying a webcam selfie.](/img/guides/first-app-cap-ng/camera-web.png 'Webcam Selfie in Photo Gallery')
![A photo gallery app displaying a webcam selfie.](/img/guides/first-app-cap-ng/camera-web.png 'Webcam Selfie in Photo Gallery')

_(Your selfie is probably much better than mine)_

Expand Down
6 changes: 3 additions & 3 deletions docs/react/your-first-app/6-deploying-mobile.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ ionic cap open ios

In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."

![Screenshot of the Info.plist file in Xcode showing the NSCameraUsageDescription key added for camera access.](/img/guides/first-app-cap-ng/xcode-info-plist.png 'Xcode Info.plist Configuration')
![The Info.plist file in Xcode showing the NSCameraUsageDescription key added for camera access.](/img/guides/first-app-cap-ng/xcode-info-plist.png 'Xcode Info.plist Configuration')

Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."

Expand All @@ -63,7 +63,7 @@ Follow the same process to add the other two Keys required of the Camera plugin:

Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.

![Screenshot of the Xcode interface displaying the Signing & Capabilities tab for an iOS app project.](/img/guides/first-app-cap-ng/xcode-signing.png 'Xcode Signing & Capabilities')
![The Xcode interface displaying the Signing & Capabilities tab for an iOS app project.](/img/guides/first-app-cap-ng/xcode-signing.png 'Xcode Signing & Capabilities')

With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:

Expand Down Expand Up @@ -96,7 +96,7 @@ Scroll to the `Permissions` section and ensure these entries are included:

Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.

![Screenshot of the Android Studio interface with arrows pointing to the Run button and the connected device.](/img/guides/first-app-cap-ng/android-device.png 'Android Studio Run Configuration')
![The Android Studio interface with arrows pointing to the Run button and the connected device.](/img/guides/first-app-cap-ng/android-device.png 'Android Studio Run Configuration')

Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.

Expand Down
Loading