When constructing a responsive website, all CMS entries are in markdown. It's not feasible to manually code the div into each new entry, so dynamic class addition is necessary.
The task at hand involves selecting an <img> within a post and wrapping it with a specific classed div for styling purposes. Otherwise, the original image width disrupts the layout.
After some trial and error, I discovered a solution by embedding a div around the image:
HTML
<div class="imgWrap">
<img>
</div>
CSS
.imgWrap {
margin: 0 auto 18px;
width: 100%;
}
.imgWrap img {
max-width: 96%;
}
However, the process needs to occur dynamically. My attempt using JavaScript was as follows:
<script>
var x=document.getElementsByTagName('div.post img')[0];
document.write("<div class='imgWrap'>");
document.write("<img>");
document.write("</div>");
</script>
In my search for answers, I came across resources like Javascript - How to add div class to createElement which led me to links such as HTML DOM className Property. While these provided some insight, I'm still puzzled about the next steps.
This site is being developed using Ruby with Jekyll. If you have any alternative strategies for tackling this issue, please share your suggestions!