Skip to content
This repository was archived by the owner on Feb 5, 2022. It is now read-only.

Commit a798455

Browse files
WholloranWholloran
authored
Merge pull request #478 from openforge/fix/perf-images
fix(): perf images
2 parents ed3f76a + f398bb5 commit a798455

File tree

16 files changed

+259
-247
lines changed

16 files changed

+259
-247
lines changed

‎src/components/app-blog-card/app-blog-card.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
flex-direction: row;
4242
align-items: center;
4343

44-
.profile-image {
44+
.profile-image img {
4545
height: 40px;
4646
width: 40px;
4747
object-fit: cover;

‎src/components/app-blog-card/app-blog-card.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export class AppBlogCard {
2222
<div class="col-md-12">
2323
<div class="blog-card-image">
2424
<stencil-route-link url={`/blog/${this.blogPost.slug}`}>
25-
<img src={this.blogPost.featured_image} alt={this.blogPost.title} />
25+
<app-img src={this.blogPost.featured_image} alt={this.blogPost.title} />
2626
</stencil-route-link>
2727
</div>
2828
<div class="blog-title">
@@ -31,7 +31,7 @@ export class AppBlogCard {
3131
</stencil-route-link>
3232
</div>
3333
<div class="author">
34-
<img class="profile-image d-none d-md-block" src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
34+
<app-img class="profile-image d-none d-md-block" src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
3535
<div>
3636
By &nbsp;
3737
<stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>

‎src/components/app-blog-content/app-blog-content.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
}
3838
}
3939

40-
&--main-image {
40+
&--main-image img {
4141
border-radius: 35px;
4242
padding: 2%;
4343
width: 100%;

‎src/components/app-blog-content/app-blog-content.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export class AppBlogContent {
8181
<div>
8282
<div class="header--author">
8383
<div class="author-img-container">
84-
<img class="d-none d-md-block" src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
84+
<app-img class="d-none d-md-block" src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
8585
<div>
8686
By &nbsp;
8787
<stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>
@@ -93,7 +93,7 @@ export class AppBlogContent {
9393
</div>
9494
</div>
9595
</div>
96-
<img class="header--main-image" src={this.blogPost.featured_image} alt={this.blogPost.title} />
96+
<app-img class="header--main-image" src={this.blogPost.featured_image} alt={this.blogPost.title} />
9797
</div>
9898
<div class="col-md-1 col-lg-2" />
9999
</div>
@@ -121,7 +121,7 @@ export class AppBlogContent {
121121
<div class="row">
122122
<div class="col-md-3 col-lg-2 offset-md-1 offset-lg-2 blog-content-author-image">
123123
<h5>About the Author</h5>
124-
<img src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
124+
<app-img src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
125125
</div>
126126
<div class="col-md-7 col-lg-6 blog-content-author-text">
127127
<h5>About the Author</h5>

‎src/components/app-blog-featured-home/app-blog-featured-home.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
letter-spacing: 1px;
7575
line-height: 19px;
7676

77-
.profile-image {
77+
.profile-image img {
7878
height: 54px;
7979
width: 54px;
8080
object-fit: cover;

‎src/components/app-blog-featured-home/app-blog-featured-home.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export class AppBlogFeaturedHome {
3737
</stencil-route-link>
3838
</div>
3939
<div class="author d-none d-md-flex">
40-
<img class="profile-image d-none d-md-block" src={this.blogPost.author.profile_image} />
40+
<app-img class="profile-image d-none d-md-block" src={this.blogPost.author.profile_image} />
4141
<div>
4242
By &nbsp;
4343
<stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>
@@ -48,7 +48,7 @@ export class AppBlogFeaturedHome {
4848
<div class="col-lg-6 col-md-4">
4949
<div class="featured-image">
5050
<stencil-route-link url={`/blog/${this.blogPost.slug}`}>
51-
<img src={this.blogPost.featured_image} alt={this.blogPost.title} />
51+
<app-img src={this.blogPost.featured_image} alt={this.blogPost.title} />
5252
</stencil-route-link>
5353
</div>
5454
<div class="author d-block d-sm-block d-md-none">
@@ -71,7 +71,7 @@ export class AppBlogFeaturedHome {
7171
</stencil-route-link>
7272
</div>
7373
<div class="author d-none d-md-flex">
74-
<img class="profile-image d-none d-md-block" src={this.blogPost1.author.profile_image} />
74+
<app-img class="profile-image d-none d-md-block" src={this.blogPost1.author.profile_image} />
7575
<div>
7676
By &nbsp;
7777
<stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>
@@ -82,11 +82,11 @@ export class AppBlogFeaturedHome {
8282
<div class="col-lg-6 col-md-4">
8383
<div class="featured-image">
8484
<stencil-route-link url={`/blog/${this.blogPost1.slug}`}>
85-
<img src={this.blogPost1.featured_image} alt={this.blogPost1.title} />
85+
<app-img src={this.blogPost1.featured_image} alt={this.blogPost1.title} />
8686
</stencil-route-link>
8787
</div>
8888
<div class="author d-block d-sm-block d-md-none">
89-
<img class="profile-image d-none d-md-block" src={this.blogPost1.author.profile_image} />
89+
<app-img class="profile-image d-none d-md-block" src={this.blogPost1.author.profile_image} />
9090
<div>
9191
By &nbsp;
9292
<stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>

‎src/components/app-blog-featured/app-blog-featured.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
text-decoration: underline;
7373
}
7474

75-
.profile-image {
75+
.profile-image img {
7676
height: 40px;
7777
width: 40px;
7878
object-fit: cover;

‎src/components/app-blog-featured/app-blog-featured.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export class AppBlogFeatured {
2525
</div>
2626
<div class="featured-image">
2727
<stencil-route-link url={`/blog/${this.blogPost.slug}`}>
28-
<img src={this.blogPost.featured_image} alt={this.blogPost.title} />
28+
<app-img src={this.blogPost.featured_image} alt={this.blogPost.title} />
2929
</stencil-route-link>
3030
</div>
3131
<div class="featured-post-title">
@@ -34,7 +34,7 @@ export class AppBlogFeatured {
3434
</stencil-route-link>
3535
</div>
3636
<div class="author">
37-
<img class="profile-image d-none d-md-block" src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
37+
<app-img class="profile-image d-none d-md-block" src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
3838
<div>
3939
By &nbsp;
4040
<stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>

‎src/pages/app-blog-post/app-blog-post.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ export class AppBlogPost {
161161
<div class="col-lg-12 col-md-4 col-sm-12">
162162
<div class="blog-card-image">
163163
<stencil-route-link url={`/blog/${post.slug}`}>
164-
<img src={post.featured_image} alt={post.title} />
164+
<app-img src={post.featured_image} alt={post.title} />
165165
</stencil-route-link>
166166
</div>
167167
<div class="blog-next-posts-title">

‎src/pages/app-home/app-home.scss‎

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -321,46 +321,55 @@
321321
}
322322

323323
.behind-left {
324-
position: relative;
325-
height: 350px;
326-
left: -60px;
327-
top: 30px;
324+
z-index: 0;
325+
img {
326+
position: relative;
327+
height: 350px;
328+
left: -60px;
329+
top: 30px;
328330

329-
@include media-breakpoint-down(md) {
330-
left: 60px;
331-
}
331+
@include media-breakpoint-down(md) {
332+
left: 60px;
333+
}
332334

333-
@include media-breakpoint-down(sm) {
334-
display: none;
335+
@include media-breakpoint-down(sm) {
336+
display: none;
337+
}
335338
}
336339
}
337340

338341
.behind-right {
339-
position: relative;
340-
height: 350px;
341-
right: -60px;
342-
top: 30px;
342+
z-index: 0;
343+
img {
344+
position: relative;
345+
height: 350px;
346+
right: -60px;
347+
top: 30px;
343348

344-
@include media-breakpoint-down(md) {
345-
right: 0;
346-
}
349+
@include media-breakpoint-down(md) {
350+
right: 0;
351+
}
347352

348-
@include media-breakpoint-down(sm) {
349-
display: none;
353+
@include media-breakpoint-down(sm) {
354+
display: none;
355+
}
350356
}
351357
}
352358

353359
.front-center {
354-
position: absolute;
355-
height: 400px;
356-
left: 0;
357-
right: 0;
358-
margin-left: auto;
359-
margin-right: auto;
360360
z-index: 1;
361+
img {
362+
position: absolute;
363+
height: 400px;
364+
left: 0;
365+
right: 0;
366+
margin-left: auto;
367+
margin-right: auto;
368+
z-index: 1;
361369

362-
@include media-breakpoint-down(sm) {
363-
position: relative;
370+
@include media-breakpoint-down(sm) {
371+
position: relative;
372+
}
364373
}
365374
}
366375

0 commit comments

Comments
 (0)