rob/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add blog image JS to list page.

Browse source
This commit is contained in:
Robert Marshall 2020-03-15 11:51:33 +00:00
parent ab8745a418
commit b506baa76d
3 changed files with 33 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

30
Website/Views/Blog/Entry.cshtml
View file

@ -10,32 +10,4 @@
<small>Posted on @Model.Timestamp</small> <small>Posted on @Model.Timestamp</small>
<script type="text/javascript"> <partial name="_ImageJs" />
function adornImage(image, append) {
var parent = image.parentNode;
parent.removeChild(image);
image.className = "blog-post__image-container--image";
var tagLine = document.createElement("span");
tagLine.className = "blog-post__image-container--tagline";
tagLine.innerText = image.getAttribute("alt");
var container = document.createElement("div");
container.className = "blog-post__image-container";
container.appendChild(image);
container.appendChild(tagLine);
var containerContainer = document.createElement("div");
containerContainer.className = "blog-post__image-container--container";
containerContainer.appendChild(container);
if (append)
parent.appendChild(containerContainer);
else
parent.prepend(containerContainer);
}
document.querySelectorAll("p>img:only-child,p>img:first-child").forEach(image => adornImage(image, false));
document.querySelectorAll("p>img:last-child").forEach(image => adornImage(image, true));
</script>

2
Website/Views/Blog/Page.cshtml
View file

@ -21,3 +21,5 @@
<a href="/blog/page/@(Model.Page + 1)" class="round-button blog-navigation__next"><img src="/images/next.svg" alt="Next"/></a> <a href="/blog/page/@(Model.Page + 1)" class="round-button blog-navigation__next"><img src="/images/next.svg" alt="Next"/></a>
} }
</div> </div>
<partial name="_ImageJs" />

29
Website/Views/Blog/_ImageJs.cshtml Normal file
View file

@ -0,0 +1,29 @@
<script type="text/javascript">
function adornImage(image, append) {
var parent = image.parentNode;
parent.removeChild(image);
image.className = "blog-post__image-container--image";
var tagLine = document.createElement("span");
tagLine.className = "blog-post__image-container--tagline";
tagLine.innerText = image.getAttribute("alt");
var container = document.createElement("div");
container.className = "blog-post__image-container";
container.appendChild(image);
container.appendChild(tagLine);
var containerContainer = document.createElement("div");
containerContainer.className = "blog-post__image-container--container";
containerContainer.appendChild(container);
if (append)
parent.appendChild(containerContainer);
else
parent.prepend(containerContainer);
}
document.querySelectorAll("p>img:only-child,p>img:first-child").forEach(image => adornImage(image, false));
document.querySelectorAll("p>img:last-child").forEach(image => adornImage(image, true));
</script>