<h2 class="section-header" id="blogs">Blogs</h2>
<section class="blog-section">
<h3>Medium Feed</h3>
<div id="medium-widget" aria-label="medium story feed"></div>
</section>
<script src="https://medium-widget.pixelpoint.io/widget.js"></script>
<script>
MediumWidget.Init({
renderTo: '#medium-widget',
params: {
"resource": "https://medium.com/@bryanguner/",
"postsPerLine": 2,
"limit": 10,
"picture": "small",
"fields": ["description", "author", "publishAt"],
"ratio": "square"
}
})
</script>
<div id="retainable-rss-embed" data-rss="https://medium.com/feed/@username" data-maxcols="3" data-layout="grid" data-poststyle="inline" data-readmore="Read the rest" data-buttonclass="btn btn-primary" data-offset="-100"></div>
((d, w) => {
// select the static HTML element that all this DOM manipulation will be contained to
let widget = d.getElementById("medium-widget");
const mainImgObserver = new MutationObserver(() => {
// if these elements have been rendered in the DOM
if (
widget.getElementsByClassName("medium-widget-article__image")
.length > 0
) {
// get the <a> link elements from the DOM, then map to get the child <img> elements
let imgElements = Array.from(
widget.getElementsByClassName("medium-widget-article__image")
).map((a) => a.firstElementChild);
// get the article description elements, then map to get the textConent of those elements
let texts = Array.from(
widget.getElementsByClassName(
"medium-widget-article__description"
)
).map((val) => val.textContent);
// loop over the imgElements and set the alt text to the text from the description elements
imgElements.forEach((img, i) => {
img.alt = texts[i];
});
// stop observing
mainImgObserver.disconnect();
}
});
const avatarObserver = new MutationObserver(() => {
if (
widget.getElementsByClassName(
"medium-widget-article__avatar-picture"
).length > 0
) {
let imgElement = Array.from(
widget.getElementsByClassName(
"medium-widget-article__avatar-picture"
)
);
// since the avatar is a picture of the author and the authors name is adjacent to the avatar img, you can just set alt=""
imgElement.forEach((img) => {
img.alt = "";
});
// stop observing
avatarObserver.disconnect();
}
});
let options = {
attributes: false,
childList: true,
characterData: false,
subtree: true
};
// initiate the observations
mainImgObserver.observe(widget, options);
avatarObserver.observe(widget, options);
})(document, window);
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.