Programatically modify an url to addend with "?example-text=50" and prefix with ""

Question

A beginner back end developer here.

I am basically trying to implement these instructions on my website forum so that my images aren't so huge for thumbnails slowing things down hugely: https://www.script-tutorials.com/how-to-resize-images-on-server-side/

I am on the second part.

Basically I have some code like this:

<a class="IndexImage" href="/forum/discussion/55/design-flaw-001-give-up"><img src="/forum/uploads/editor/dm/idnutwgmgaik.jpg" class="IndexImage"></a>

But I need the image src to change to

<img src="<?php loadImage('/forum/uploads/editor/dm/idnutwgmgaik.jpg', 50, 50) ?>"

I'm not sure if this would be possible with Javascript, or if at all? The logic I want to implement is basically iff .IndexImage img ---> then, prefix ~~<?php loadImage('~~ to img source and append ~~', 50, 50) ?>~~

It could be really easy, it could be impossible. Any feedback is appreciated. Thank you. I hope the question is very clear.

I have found this page explaining how you can change the src to something preset, https://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag#= , but I am trying to dynamically modify the code.

score 0 · Answer 1 · answered Jul 24 '19 at 06:04

If you want to change the source with javascript you can use jquery and $.attr() .attr('src','NEW SOURCE GOES HERE') https://jsfiddle.net/uv58rkb6/

Why would you want to input a php function as the source to an image?

<img src="<?php loadImage('/forum/uploads/editor/dm/idnutwgmgaik.jpg', 50, 50) ?>"

loadImage() is a php function that (based on the parameters) builds an html element from the inputs including height/width, you cannot edit the height or width within the src attribute. You would end up with invalid html something like:

<img src="<img src="idnutwgmgaik.jpg" width="50" height="50">">

Also you cannot call the loadImage() php function after the page has loaded. PHP runs once when the page loads. If you want to dynamically change your images on the backend using PHP use jquery's AJAX.

$.ajax({
    type: "POST",
    url: "loadimage.php",
    success: function(data) {
          //return the output of loadimage.php in the data callback
          $("#imageID").attr("src", data);
    }

});

Programatically modify an url to addend with "?example-text=50" and prefix with ""

1 Answers1