From d5413a954f4f09ac1ce6620ec368d0a4e7fb7e12 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 30 Jun 2021 21:01:25 +0800
Subject: [PATCH] Update posts
- Set width and height for images
- Update the related tutorial
---
_posts/2019-08-08-text-and-typography.md | 17 +++++++----------
_posts/2019-08-08-write-a-new-post.md | 20 ++++++++++++--------
_posts/2019-08-09-getting-started.md | 2 +-
_posts/2021-01-03-enable-google-pv.md | 10 +++++-----
4 files changed, 25 insertions(+), 24 deletions(-)
diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md
index 4e16379..13c66e5 100644
--- a/_posts/2019-08-08-text-and-typography.md
+++ b/_posts/2019-08-08-text-and-typography.md
@@ -8,6 +8,8 @@ math: true
mermaid: true
image:
src: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png
+ width: 850
+ height: 585
---
This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
@@ -97,39 +99,34 @@ Click the hook will locate the footnote[^footnote], and here is another footnote
- Default (with caption)
-
+{: width="972" height="589" }
_Full screen width and center alignment_
-- Specify width
-
-{: width="400"}
-_400px image width_
-
- Shadow
-{: .shadow width="90%" }
+{: .shadow width="1548" height="864" style="max-width: 90%" }
_shadow effect (visible in light mode)_
- Left aligned
-{: width="350" .normal}
+{: width="972" height="589" style="max-width: 70%" .normal}
- Float to left
- {: width="240" .left}
+ {: width="972" height="589" style="max-width: 200px" .left}
"A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
- Float to right
- {: width="240" .right}
+ {: width="972" height="589" style="max-width: 200px" .right}
"A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index 97b25d4..86ea991 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -84,16 +84,21 @@ Then you can use it like other markdown language: surround the graph code with `
### Preview image
-If you want to add an image to the top of the post contents, specify the url and alt attribute for the image:
+If you want to add an image to the top of the post contents, specify the attribute `src`, `width`, `height` and `alt` for the image:
```yaml
---
image:
src: /path/to/image/file
+ width: 1000 # in pixels
+ height: 400 # in pixels
alt: image alternative text
---
```
+Except for `alt`, all other options are necessary, especially the `width` and `height`, which are related to user experience and web page loading performance. Later section ["Image size"](#image-size) will also mention this.
+
+
### Image caption
Add italics to the next line of an image，then it will become the caption and appear at the bottom of the image:
@@ -105,10 +110,10 @@ _Image Caption_
### Image size
-You can specify the width (and height) of a image with `width`:
+In order to prevent the page content layout from shifting when the image is loaded, we should set the width and height for each image:
```markdown
-{: width="400"}
+{: width="700" height="400" }
```
### Image position
@@ -120,19 +125,19 @@ By default, the image is centered, but you can specify the position by using one
Image will be left aligned in below sample:
```markdown
- {: .normal}
+ {: .normal }
```
- **Float to the left**
```markdown
- {: .left}
+ {: .left }
```
- **Float to the right**
```markdown
- {: .right}
+ {: .right }
```
> **Limitation**: Once you specify the position of an image, it is forbidden to add the image caption.
@@ -142,10 +147,9 @@ By default, the image is centered, but you can specify the position by using one
The screenshots of the program window can be considered to show the shadow effect, and the shadow will be visible in the `light` mode:
```markdown
-{: .shadow}
+{: .shadow }
```
-
### CDN URL
If you host the images on the CDN, you can save the time of repeatedly writing the CDN url by assigning the variable `img_cdn` of `_config.yml` file:
diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md
index e447ec5..00f8351 100644
--- a/_posts/2019-08-09-getting-started.md
+++ b/_posts/2019-08-09-getting-started.md
@@ -130,7 +130,7 @@ Now publish your Jekyll site by:
2. Browse to your repo's landing page on GitHub and select the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) through _Settings_ → _Options_ → _GitHub Pages_:
- 
+ {: width="850" height="153" }
3. Visit your website at the address indicated by GitHub.
diff --git a/_posts/2021-01-03-enable-google-pv.md b/_posts/2021-01-03-enable-google-pv.md
index 2ed5d47..865ee62 100644
--- a/_posts/2021-01-03-enable-google-pv.md
+++ b/_posts/2021-01-03-enable-google-pv.md
@@ -33,7 +33,7 @@ With your property created, you now need to set up Data Stream to track your blo
It should look like this:
-
+{: width="1086" height="542"}
Now, click on the new data stream and grab the **Measurement ID**. It should look something like `G-V6XXXXXXXX`. Copy this to your `_config.yml` file
@@ -48,7 +48,7 @@ google_analytics:
When you push these changes to your blog, you should start seeing the traffic on your Google Analytics. Play around with Google Analytics dashboard to get familiar with the options available as it takes like 5 mins to pickup your changes. You should now be able to monitor your traffic in realtime.
-
+{: width="616" height="557"}
## Setup Page Views
@@ -183,7 +183,7 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
If everything went good, you'll get this screen:
-
+{: width="1366" height="354"}
### Create Google Analytics Query
@@ -208,14 +208,14 @@ After Run Query, copy the generated contents of **API Query URI** at
After the query is saved on GAE, a **Public Endpoint** (public access address) will be generated, and we will get the query result in JSON format when accessing it. Finally, click Enable Endpoint in **Public Request Endpoint** to make the query effective, and click Start Scheduling in **Scheduling** to start the scheduled task.
-
+{: width="1100" height="126"}
## Configure Chirpy to Display Page View
Once all the hard part is done, it is very easy to enable the Page View on Chirpy theme. Your superProxy dashboard should look something like below and you can grab the required values.
-
+{: width="1210" height="694"}
Update the `_config.yml` file of [**Chirpy**][chirpy-homepage] project with the values from your dashboard, to look similar to the following: