Image style HTML Stop working when Image auto-resize is Enabled.

Hi! Me and one of my forum member notice that the image style html specially "border-radius" stopped working after i enabled the image auto-resize and i set it to 800x600. any idea how to make css work even if the image auto-resize is enabled?

My Forum: http://habbopinasboard.forumotion.com/

Note: HTML is enabled in my forum as well as Always allow HTML in profile preferences.
here's the code he used.

Code:

<img src="https://2img.net/u/3714/38/07/04/avatars/6-90.jpg" style="border-radius:10px;"/>


I temporarily disabled image auto resize.

Where did you add that line of code?

SLGray wrote:Where did you add that line of code?

Forum regular thread post.

it works till i enabled auto-resize.

Activate image resize again and post a link to a post that guests can see that contains this code.

SLGray wrote:Activate image resize again and post a link to a post that guests can see that contains this code.

You mean i should activate the image resize again then just provide the code that i used?

We want the images style code woks in the forum post. it always works until i enabled that auto resize in forum settings.

Activate it again and give us a link to a post that contains the code so we can see it.

SLGray wrote:Activate it again and give us a link to a post that contains the code so we can see it.

Here:
http://habbopinasboard.forumotion.com/t74-html-image-code-test#261

Guests can not see it.

SLGray wrote:Guests can not see it.

Im sorry, there you go, i fixed it. Guest should be able to see that certain forum.

The image does not look like it is resized. Do you mean the option in AP or a code that you added?

SLGray wrote:The image does not look like it is resized. Do you mean the option in AP or a code that you added?

The option in AP, i know the image didnt exceed 800 x 600 but im not sure why the html image style code didnt work on it.

Ok. Turn off the image resize and let us look at the post again.

SLGray wrote:Ok. Turn off the image resize and let us look at the post again.

Done,
here's the same link just in case: http://habbopinasboard.forumotion.com/t74-html-image-code-test

Do you have any coding that relates to posts/topics?

SLGray wrote:Do you have any coding that relates to posts/topics?

i never touched the html / css part of the forum theme so i dont think it will conflict.

I only added / change some of the icons and logo but i used the "simple" mode cause im planning to change the whole theme when i get the chance.

So, do you have any idea why its like that?

The auto resize option in AP is very useful cause most of my members post uncropped images and it very sore to the eyes if you know what i mean and that feature was requested by some of our members so i would like to have both auto resize and the image style coding if possible.

Do you have any JavaScripts?

SLGray wrote:Do you have any JavaScripts?

I got a radio widget with a request box using the widget module but it doesnt have to do with the forum post.

here:

Code:

<center style="text-align: left;">
                   <iframe style="width: 300px; height: 170px;" allowfullscreen="" frameborder="0" src="https://player.twitch.tv/?channel=habbopinas"></iframe>
</center>
             
<!--              Start of Tawk.to Script              --><script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5976b7a15dfc8255d623ebdd/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--              End of Tawk.to Script              --> <script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '113151806059848',
      cookie    : true,
      xfbml      : true,
      version    : 'v2.8'
    });
    FB.AppEvents.logPageView(); 
  };

  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});
{
    status: 'connected',
    authResponse: {
        accessToken: '...',
        expiresIn:'...',
        signedRequest:'...',
        userID:'...'
    }
}
</script>

Turn off JavaScript Management and see if the issue is there.

SLGray wrote:Turn off JavaScript Management and see if the issue is there.

It's been off the whole time. i never turned it on.

could you turn the resize back on so i can look

Done.

the javascript is overwriting the inline style element so you have 3 choices one of these css codes

set maax size for image in post without the option to see bigger

Code:


.postbody .content img {
    max-height: 200px;
    max-width: 200px;
}


or set all images in the post content to have a border radius

Code:

.postbody .content img {
border-radius:10px;
}

or add a class to the image so only images with that class are effected

Code:

<img src="https://2img.net/u/3714/38/07/04/avatars/6-90.jpg" class="ImgClass"/>

then use this css

Code:

.ImgClass {
border-radius:10px;
}

i personally think this should be listed as a bug because it shouldn't overwrite inline css it should add to it

_Twisted_Mods_ wrote:the javascript is overwriting the inline style element so you have 3 choices one of these css codes

set maax size for image in post without the option to see bigger

Code:


.postbody .content img {
    max-height: 200px;
    max-width: 200px;
}


or set all images in the post content to have a border radius

Code:

.postbody .content img {
border-radius:10px;
}

or add a class to the image so only images with that class are effected

Code:

<img src="https://2img.net/u/3714/38/07/04/avatars/6-90.jpg" class="ImgClass"/>

then use this css

Code:

.ImgClass {
border-radius:10px;
}

I tried the 3rd option first and it didnt work but can you double check the code i used.

Code:

<style>.ImgClass {
border-radius:10px;
}</style>
<img src="https://2img.net/u/3714/38/07/04/avatars/6-90.jpg" class="ImgClass"/>

Does the css in 3rd option goes directly in the forum template?

_Twisted_Mods_ wrote:i personally think this should be listed as a bug because it shouldn't overwrite inline css it should add to it

Which JavaScript are you referring?

the script that auto resizes images it overwrites inline css it does not add to it

@SLGray, the javascript that deals with resizing images. That javascript removes the style attribute from the images for some reason that I don't understand. Actually, I don't understand why they used javascript for that thing when they could do it with CSS in a simpler, faster and better way.

@Chonoy Habbo, the CSS code can be placed in the templates if you want to but it's best to place it in the CSS file(it's called CSS file because it's the place where you put CSS).