Skip to content

Commit

Permalink
frontend: improve blog post image loading time
Browse files Browse the repository at this point in the history
  • Loading branch information
@khancyr
khancyr committed Nov 3, 2023
1 parent 432e639 commit 4396b2c
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 48 deletions.
6 changes: 6 additions & 0 deletions frontend/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,13 @@ html {

}

/*#blog_posts .row .col-md-4 a {*/
/* min-height: 485px; !* Modify to your preference *!*/
/*}*/

.col_min {
min-height: 300px;
}

.bg-dark {
/* background-color: #343a40 !important; */
Expand Down
2 changes: 1 addition & 1 deletion frontend/includes/_topbar.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<nav class="navbar navbar-expand-md navbar-dark bg-dark ">

<div class="container-fluid">
<div class="container">

<a class="navbar-brand ml-auto mr-auto" href="#">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" title="ArduPilot" class="img-fluid"
Expand Down
143 changes: 96 additions & 47 deletions frontend/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@

<main role="main" class="container">

<div class="container-fluid" style="max-width: 920px">
<div class="container" style="max-width: 920px">
<div id="carouselPictures" class="carousel slide">

<div class="carousel-inner" id="carousel_content">
Expand Down Expand Up @@ -117,7 +117,67 @@ <h1>Community</h1>

<div class="contentSection">
<h2>Latest posts on Community Blogs</h2>
<div class="row text-left text-lg-left" id="blog_posts">
<div id="blog_posts">
<div class="row">
<div class="col-md-4">
<a class="d-block mb-4 h-100 text-dark embed-responsive">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min">
Loading Blog post
</a>
</div>
<div class="col-md-4">
<a class="d-block mb-4 h-100 text-dark embed-responsive">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min">
Loading Blog post
</a>
</div>
<div class="col-md-4">
<a class="d-block mb-4 h-100 text-dark embed-responsive">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min">
Loading Blog post
</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a class="d-block mb-4 h-100 text-dark embed-responsive">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min">
Loading Blog post
</a>
</div>
<div class="col-md-4">
<a class="d-block mb-4 h-100 text-dark embed-responsive">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min">
Loading Blog post
</a>
</div>
<div class="col-md-4">
<a class="d-block mb-4 h-100 text-dark embed-responsive">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min">
Loading Blog post
</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a class="d-block mb-4 h-100 text-dark embed-responsive">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min">
Loading Blog post
</a>
</div>
<div class="col-md-4">
<a class="d-block mb-4 h-100 text-dark embed-responsive">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min">
Loading Blog post
</a>
</div>
<div class="col-md-4">
<a class="d-block mb-4 h-100 text-dark embed-responsive">
<img src="images/ArduPilot-Motto.png" alt="ArduPilot" class="img-fluid img-thumbnail col_min">
Loading Blog post
</a>
</div>
</div>
</div>
</div>
<br><br>
Expand Down Expand Up @@ -424,7 +484,7 @@ <h1>ArduPilot Documentation</h1>
<br><br>


<div class="container-fluid">
<div class="container">

<div class="page-header">
<h1>User Cases</h1>
Expand Down Expand Up @@ -503,18 +563,16 @@ <h1>User Cases</h1>
</div>


</div><!-- /.container-fluid -->
</div>

</main><!-- /.container-fluid -->
</main>

<br>

<footer>
<div id="footerID">
<br>
<!-- Footer -->
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container-fluid text-center">
<div class="container text-center">
© 2023 Copyright: &copy; <a href="https://www.ardupilot.org/"> ArduPilot.org</a>
</div>
</footer>
Expand All @@ -523,7 +581,6 @@ <h1>User Cases</h1>
</footer>

<script>
// TODO : make a grid 3x3 with static size for the blogs post. Create it on DOM loading and then defer filling
fetch('blog_posts.json', {
headers: {
"Pragma": "no-cache",
Expand All @@ -532,46 +589,38 @@ <h1>User Cases</h1>
})
.then(response => response.json())
.then(data => {
const blogPosts = document.getElementById('blog_posts');

data.forEach(val => {
let div = document.createElement('div');
let anchor = document.createElement('a');
let spam = document.createElement('spam');

div.classList.add("col-lg-4", "col-md-6", "col-12");
anchor.classList.add("d-block", "mb-4", "h-100", "text-dark");


anchor.href = val.link;
spam.textContent = val.title;

if (val.has_image) {
let img = document.createElement('img');

img.classList.add("img-fluid", "img-thumbnail");
img.src = val.image;
img.loading = "lazy";
img.alt = "";

anchor.appendChild(img);
} else {
let iframe = document.createElement('iframe');
anchor.classList.add("embed-responsive");
iframe.classList.add("embed-responsive-item", "img-thumbnail");
iframe.src = val.youtube_link;
iframe.title = val.title;
iframe.style.width = "100%";
iframe.style.height = "80%";

const blogPostNodes = document.querySelectorAll('#blog_posts .col-md-4');
data.forEach((val, index) => {
if (index < blogPostNodes.length) {
let anchor = blogPostNodes[index].querySelector("a");
let span = document.createElement('span');
anchor.href = val.link;
span.textContent = val.title;

if (val.has_image) {
let img = document.createElement('img');
img.classList.add("img-fluid", "img-thumbnail");
img.src = val.image;
img.loading = "lazy";
//img.alt = val.title;

anchor.innerHTML = '';
anchor.appendChild(img);
} else {
let iframe = document.createElement('iframe');
anchor.classList.add("embed-responsive");
iframe.classList.add("embed-responsive-item", "img-thumbnail");
iframe.src = val.youtube_link;
iframe.title = val.title;
iframe.style.width = "100%";
iframe.style.height = "80%";

anchor.innerHTML = '';
anchor.appendChild(iframe);
}

anchor.appendChild(iframe);
anchor.appendChild(document.createElement('br'));
anchor.appendChild(span);
}

anchor.appendChild(spam);
div.appendChild(anchor);
blogPosts.appendChild(div);
});
})
.catch(error => console.error('Error:', error));
Expand Down

0 comments on commit 4396b2c

Please sign in to comment.