How can I add width and height to each img tag in string?-CodePudding

I have a string containing both text and multiple IMG tags, but I have to add the attribute width="20" and height="20" to each of these IMG tags.

The script that adds the IMG tags to the initial string is value = emojione.toImage(value) and I have tried different variations of adding the width="20" and height="20"to IMG tags in the string, but my last try was:

value = $(value).foreach(img).attr("width", "20");
value = $(value).foreach(img).attr("height", "20")

For a better understanding, here is my script:

$("#UserSpecificMessageText").change(function () { //INPUT FIELD # 1 //
  var value = $(this).val();
  value = emojione.toImage(value);

  // HERE I NEED TO ADD WIDTH AND HEIGHT //

                                          
  $("#UserSpecificMessageTextToEmail").val(value); // ANOTHER INPUT FIELD
});

None of the solutions I have been able to find here and on google works .. how can I make this work? :-)

NOTE! Unfortunately it is not an option to use CSS class, that I tried at first, but the string is used in a HTML mail that should be displayed in Outlook; and img.emojione {width: 20px !important; height: 20px !important;} have no effect on the html in the string.

Example of string:

<img  title=":wink:" src="[URL]"/> Some text <img  title=":relieved:" src="[URL]"/> Some other text <img  title=":rofl:" src="[URL]"/>

CodePudding user response：

foreach() is a Higher Order Function in Javascript. It's equivalent function in JQuery is each(). So img is used wrongly. Use a callback within foreach().

Something like this:

$(value).each(img =>{
   img.attr("width", "20");
   img.attr("height","20");
});

Note: I am assuming your value object is returning an array of images

CodePudding user response：

You don't need to even loop over the images with jQuery, try this

$(value).find(img).attr("width", "20").attr("height", "20");

$(value).find(img).width(20).height(20);

I assume that value is some sort of CSS selector or raw HTML string?

Also please note that if this is for an email, you won't be able to run any JS scripts, let alone bring in library like jQuery. I assume you are doing some sort of pre processing for email templates?

CodePudding user response：

foreach() is not a function.

You might be thinking of forEach() in JavaScript or each() in jQuery. Here is a working solution using jQuery, since you have this question tagged as jQuery()...

$("#resize").on('click', function(e) {
    img = $('.img');
    value = $('.img').each(function(index) {
       $(this).attr('width', '50px');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="resize">Resize</button><br>

<img  width="200" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Bogolyubovo_asv2019-01_img02_Intercession_Church.jpg/1000px-Bogolyubovo_asv2019-01_img02_Intercession_Church.jpg">