Replacing an image within a comment section using a third-party application tutorial

Question

Replacing an image within a comment section using a third-party application tutorial

I am facing a challenge with replacing an image in the comment section of my website. The comment section is hosted on a third-party server, and unfortunately, I do not have access to it.

Previously, images added by the comment provider HTML Comment Box were displaying correctly for about 6 months before suddenly showing up as "404" errors on their end.

Desperate to remedy this situation, I attempted to replace the broken image with one from my own server using the following code snippet:

<script>
$(document).ready(function() {
    document.getElementById("comment_14368294")[0].src = "team-conasuaga-east-cowpen-trail-4_480px.jpg";
});
</script>

Unfortunately, my attempts were unsuccessful. Upon inspecting the third party's code via Chrome Inspector, I discovered the HTML structure of the comment that needed modification:

<div class="comment" id="comment_14368294">
    <span class="date">(Apr 7, 2019) </span>
    <span class="author hcb-mod"><b class="author-name">Conrad Easley (mod) 
    </b>said:</span>
    <blockquote>
    <img align="left" class="gravatar"
    src="https://www.gravatar.com/avatar/2484aca7544b9b228bbd67c0be236137?      
s=40&amp;d=http%3A%2F%2Fhtmlcommentbox.com%2Fstatic%2Fimages%2Fgravatar.png">
    Team Conasauga Workday on East Cowpen Trail April 6th, 2019 
    </blockquote>                   
    <a href="https://www.htmlcommentbox.com/storage/lg_14368294_team-conasuaga-east-cowpen-trail-4_480px.jpg">
    <img src="https://www.htmlcommentbox.com/storage/14368294_team-conasuaga-east-cowpen-trail-4_480px.jpg">
    </a>
    <p class="hcb-comment-tb">
    <a class="hcb-flag" href="javascript:hcb.flag('14368294')">
    <img src="https://www.htmlcommentbox.com/static/images/flag.png">flag
    </a> 
    <a class="hcb-like" href="javascript:hcb.like('14368294')">
    <img src="https://www.htmlcommentbox.com/static/images/like.png">like</a> 
    </p>
    <div class="likes" style="display:none">
    <span>0 </span>
    <img src="https://www.htmlcommentbox.com/static/images/like.png">
    </div>
</div>

To address the issue, I eventually resorted to using CSS pseudo elements - specifically ::before and ::after. These can be utilized to display content only if the original image fails to load. Here's how I achieved this:

#comment_14368294 img {
    position: relative;
    width: 480px;
    height: 360px;
    display: inline-block;
    vertical-align: text-top;
}

#comment_14368294 img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    line-height: 200px;
    background-color: #fd0;
    background: url(https://cohuttawildernesshiking.com/team-conasuaga-east-cowpen-trail-4_480px.jpg) no-repeat;
    color: currentColor;
    text-align: center;
    border-radius: 2px;
    display: block;
    width: 480px;
    height: 360px;
    overflow: hidden;
}

javascript jquery css image css-selectors

Answer 1

Answer №1

Utilizing jQuery enables you to easily target the container holding your comments and search for the initial element that distinguishes each comment uniquely. Subsequently, you can iterate through the obtained array and modify the image. The main consideration then becomes whether to apply a consistent image or one that is distinct.

Here's an illustrative example I crafted for you. The comments container represents the designated element on your website where all comments are displayed. Within it, the first div specifies what sets each comment apart. In this scenario, I substituted various images with similar ones featuring cats.

$(document).ready(function() {

  var comments = $("#comments-container").find("div");

  //console.log(comments);

  $(comments).each(function(i, item) {

    // console.log(item);

    $(item).find('img').attr('src', 'https://loremflickr.com/220/200/cat');

  });


});

#comments-container>div {
  margin: 20px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='comments-container'>


  <div id="comment_1">
    <img src="https://loremflickr.com/320/240/dog" />
  </div>
  <div id="comment_2">
    <img src="https://loremflickr.com/320/240/girl" />
  </div>
  <div id="comment_3">
    <img src="https://loremflickr.com/320/240/boat" />
  </div>
  <div id="comment_4">
    <img src="https://loremflickr.com/320/240/statue" />
  </div>
  <div id="comment_5">
    <img src="https://loremflickr.com/320/240/guitar" />
  </div>



</div>

").find('img') .attr('src','steam-conasuaga-east-cowpen-trail-4_480px.jpg');

The rationale behind using an array in your code may not be entirely clear. Typically, an id is meant to be unique within a document. Utilizing getElementById() does not usually result in an array.

Answer 2

Utilizing jQuery enables you to easily target the container holding your comments and search for the initial element that distinguishes each comment uniquely. Subsequently, you can iterate through the obtained array and modify the image. The main consideration then becomes whether to apply a consistent image or one that is distinct.

Here's an illustrative example I crafted for you. The comments container represents the designated element on your website where all comments are displayed. Within it, the first div specifies what sets each comment apart. In this scenario, I substituted various images with similar ones featuring cats.

$(document).ready(function() {

  var comments = $("#comments-container").find("div");

  //console.log(comments);

  $(comments).each(function(i, item) {

    // console.log(item);

    $(item).find('img').attr('src', 'https://loremflickr.com/220/200/cat');

  });


});

#comments-container>div {
  margin: 20px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='comments-container'>


  <div id="comment_1">
    <img src="https://loremflickr.com/320/240/dog" />
  </div>
  <div id="comment_2">
    <img src="https://loremflickr.com/320/240/girl" />
  </div>
  <div id="comment_3">
    <img src="https://loremflickr.com/320/240/boat" />
  </div>
  <div id="comment_4">
    <img src="https://loremflickr.com/320/240/statue" />
  </div>
  <div id="comment_5">
    <img src="https://loremflickr.com/320/240/guitar" />
  </div>



</div>

").find('img') .attr('src','steam-conasuaga-east-cowpen-trail-4_480px.jpg');

The rationale behind using an array in your code may not be entirely clear. Typically, an id is meant to be unique within a document. Utilizing getElementById() does not usually result in an array.

Answer 3

Answer №2

The function document.getElementsById is throwing an error as it is not a valid function. It seems like you intended to use getElementByid instead, which only returns a single node rather than an array. You can try the following code snippet:

document.getElementById("comment_14368294").firstChild.src = "team-conasuaga-east-cowpen-trail-4_480px.jpg";

Answer 4

The function document.getElementsById is throwing an error as it is not a valid function. It seems like you intended to use getElementByid instead, which only returns a single node rather than an array. You can try the following code snippet:

document.getElementById("comment_14368294").firstChild.src = "team-conasuaga-east-cowpen-trail-4_480px.jpg";

Answer 5

Answer №3

If you need to adjust the image path only in case of a loading failure, one suggestion is to attach the onerror event to all images.

The following code will monitor any image error events and switch the path to your default image if it fails to load.

$(function(){   
    $(window).load("load",function(e){  
        var defImg = "default image url"; // Default image path
        $(".comment").find("img").bind("error",function(){
            $(this).attr("src",defImg);
        }); 
    })

})

I opted for using $window.load() to bind my event based on your question about integrating a third-party comment module. Sometimes, the third party may not finish rendering before the ready event triggers.

Hopefully this solution proves useful, and pardon any grammar errors.

Answer 6

If you need to adjust the image path only in case of a loading failure, one suggestion is to attach the onerror event to all images.

The following code will monitor any image error events and switch the path to your default image if it fails to load.

$(function(){   
    $(window).load("load",function(e){  
        var defImg = "default image url"; // Default image path
        $(".comment").find("img").bind("error",function(){
            $(this).attr("src",defImg);
        }); 
    })

})

I opted for using $window.load() to bind my event based on your question about integrating a third-party comment module. Sometimes, the third party may not finish rendering before the ready event triggers.

Hopefully this solution proves useful, and pardon any grammar errors.

Replacing an image within a comment section using a third-party application tutorial

Answer №1

Answer №2

Answer №3

Similar questions

Utilize JavaScript to assign a button with identical functionality as another button

Build an HTML table with immovable side columns on both the left and right sides

Is there a CSS property that is determined by the position of an element

Utilizing MongoDB arrays for efficient value retrieval within array attributes

Show both text and image inputs side by side within a table

What is the best way to send the article id to the pagination page using Ajax?

What is the best way to update specific values in a react multiselect component?

Vue dropdown component mistakenly triggers event on incorrect element

Error encountered in React and Redux: Unable to read properties of undefined (specifically 'region')

What is the best way to incorporate text within an ongoing animation?

extract the key identifier from the JSON reply

Having trouble with the mat-select dropdown not updating with patchvalue?

The "require" keyword cannot be used in a Node-RED Function node

A guide to showcasing a series of strings in a react element

A tutorial on preventing backbone.js from automatically adding /# when a dialog is closed

Assistance needed in optimizing my JQuery Fading Gallery for better efficiency

Incorporating a drag functionality to choose a range of dates from a calendar with the help of CLNDR.js

The state is not being processed properly

Is it necessary to remove event bindings and disable plugins before navigating away from a page in Jquery Mobile or Jquery?

When a Vue.js Directive is inserted or bound, it actually takes precedence over the click event