Dynamic Image Attribute

[Bradley_Mitchell]

Is there a way to add a dynamic attribute to an image in wappler? I’ve played around a bit with some of the dynamic styling attributes, but that doesn’t seem to do what I need it to. So, I have a javascript that transforms an empty profile image into the user’s initials. All works well if I insert a first name and last name, but when I try to dynamically set the user’s first name and last name, the image won’t load correctly. Here is what I have for the code:

Where you see profileimg=“My Name” the javascript outputs an image with MN as the initials in the image. All works great, but how can I dynamically set the ‘My Name’ portion to be the user’s first name and last name. I’ve tried entering it dynamically based on user’s first name, but that won’t work. Any ideas? Thanks for any tips.

[mebeingken]

Try using dmx-bind:profileimg=“YOUR-DYNAMIC-STUFF”

[Bradley_Mitchell]

Thanks so much for helping to point me in the direction. I have added what I think is the correct code and it appears to work on the surface, but I’m still running into an issue. This may be an issue with the javascript that I am using and not necessarily wappler at this point, but I am unsure.

I have added the code as follows:

When I check it in the browser, I now can see that the profileimg now is equal to the logged in user’s first name and last name; however, the image that I get is this:

However, I would expect to see this:

When I take a look at the code in the code inspector, I can see a bit of a difference between the two images:

I am just not quite sure how to solve it as what you suggested does appear to bind the user’s first name and last name to the image as I was hoping to do.

My javascript that I am using is based on this codepen: https://codepen.io/arturheinze/pen/ZGvOMw. I am not completely familiar with javascript to change the code too much to get it to work, so I was hoping to do what was needed on the wappler side, but it appears that it may not work.

Any other ideas that I could try? Thanks so much!

[mebeingken]

I just downloaded the codepen stuff and it works fine in Wappler so you probably have just missed something.

Here is a quick sample using that code (I haven’t touched their javascrip[t or css.)

<input id="text1" type="text" name="full_name" value="Ken Truesdale">

<img class="round" width="60" height="60" dmx-bind:avatar="text1.value">

This just grabs the value of text1 and uses it in the bmx-bind:avatar which is what the js is looking for. If you want to use profileimg then you need to change the js to support.

[Bradley_Mitchell]

Thanks for looking at this for me. Yes, I am getting the same result when I use a static value, but when I run into an issue is when I use a dynamic value. I did something very similar to what you did in your code above:

So, I have an input on the page that pulls in the logged in user’s full name. I double checked this step and it displays correctly.

I then used this value to populate the image. When I do this, I get the following response:

When I view it in the code inspector, I see the following:

It appears that the alt is blank when I use a dynamic value.

When I enter a static value as you have above, all works fine, see below:

I then get the following, which I would expect:

So, it seems to be something to do with the dynamic value for some reason. I do notice that with a static value, I can see the alt tag is no longer missing as it is when you use a dynamic value.

I’ve also tried forcing in an alt tag, but that didn’t seem to help either. For safety’s sake, I also went back and changed the javascript back to the original with no changes at all to be sure that I didn’t alter something in the javascript code, but that didn’t have any change in the outcome. From what I can tell, it appears that when a dynamic value is passed that the javascript views it as blank.

I have been trying to figure out a way to trick it into seeing a static value and not a dynamic value, but I have no idea if that is even possible. I think that would solve the issue, but maybe there is a better way.

[mebeingken]

You are changing to profileimg instead of avatar. If you stick with their js as-is, and use my sample (which is dynamic) it does work.

[Bradley_Mitchell]

hmmm… I thought that might be the issue as well, so redownloaded the javascript and didn’t seem to make any difference:

Here is the result:

[mebeingken]

You might have a timing issue. Make sure the script runs after the page has loaded.

[Bradley_Mitchell]

That very well could be the case. How do I ensure that it runs after the page is loaded? They are likely running at the same time from what I can tell.

[mebeingken]

$(document).ready(function(){
// your code
});

[mebeingken]

And if that doesn’t work, you can just turn their code into a static function and call it on success of the action returning the data.

[Bradley_Mitchell]

$(document).ready(function(){
// your code
});

I tried this, but apparently I don’t know how to insert it. No matter what I try I couldn’t get this to work for me. Where would I put this code to make it work correctly?

How could I turn their code into a static function? I am fairly new at working with wappler, so I don’t think that this is something I have tried to do yet with a javascript. Thanks again for your help!

[mebeingken]

Hey Bradley,

First, an apology…I was over-simplifying your request. Took a close look this morning and now have the solution.

So the js provided runs immediately by design and creates some functions. It then runs the primary function LetterAvatar.transform. However, our dmx server connect has not yet run, so it comes up empty. What you can do is call that function anytime you want. The function spins through all the img elements with avatar as a parameter.

So, keeping the original css and js, we just use the following to trigger the function when the server connect has successfully completed.

<dmx-serverconnect id="serverconnect1" url="dmxConnect/api/list.php" onsuccess="setTimeout(function(){ LetterAvatar.transform(); }, 1);"></dmx-serverconnect>

	<h1>Letter Avatars</h1>

	<div>
		<img class="round" width="60" height="60" dmx-bind:avatar="serverconnect1.data.query1[0].username">
	</div>

You’ll notice a one millisecond delay function was added. I have had to use this a few times to get the timing right when coordinating dmx things and js.

Anyhow, this is working for me–looking up values in the database, and using them to create the initials. Let me know if your specific implementation still has trouble !

–Ken

[Bradley_Mitchell]

No need to apologize. I greatly appreciate the assistance. I have used the code that you inserted above and it does in fact work perfectly. As you thought yesterday, there was in fact a timing issue and the code that you provided solved the issue perfectly. I appreciate the help!!