I have done it (A fix for picture borders!)

[Nano]

I'll be bringing up the topic of borders around images once again, but not as a question this time.


So after asking around and then not really getting an answer that worked, I decided to experiment in private workshop with different kinds of images. I found out that the reason why the border appears around only certain images is due to the size of the image. If the image is not resized via code or using the shrink/expand option on the button editor, the border DOES NOT appear. If the image is resized using the html code or the shrink/expand option or simply does not fit within the given width of the post, the border DOES appear as if to indicate that you can left click on the image to get a preview of sorts on the full-sized image of the image. The below is one such example with the image on the left having been resized using the button editor while the image on the right was just shrunk down using photoshop, making the image that smaller size in the first place.

This seems like a pretty minor thing, but for certain images such as banners and other gfx used to decorate RPs, it's not really ideal to work on a smaller canvas (although this may possibly be a personal opinion) and there's bound to be times where you'll get the initial size wrong and have to shrink the image down anyway. When you shrink down an image, the quality of the image tends to go down by a lot due to the smaller resolution. This might not be an issue with general images, but for things like banners that may have words or smaller parts within the image, the fuzziness that results from shrinking the image down ruins the banner more often than not.


Would it be possible to remove the border or the image preview altogether? If not, perhaps you could switch back to the version of this from the old site where the image would enlarge itself by clicking on it rather than having a preview pop up? I'm not too sure how this site runs, so if all of these options are impossible, I guess I'll try to be understanding. :')

 

[Chordling]

Just a side note, the image will still "enlarge" when you click on it.  There's a cute pop up window that will open whenever you click on a picture from someone's post.

 

[A Murder Of Corviknight]

Just a side note, the image will still "enlarge" when you click on it.  There's a cute pop up window that will open whenever you click on a picture from someone's post.

I'm glad that you're so eager to help but that's NOT what @Nano was asking. >v>;;; Nano's issue was the fact that the border visibly exists NOT that she didn't know how to enlarge the image.


Edit: Okay apparently Nano wasn't even asking a question. She was making a suggestion for site improvement. >v> Oops.

 

[Chordling]

11 minutes ago, Birb said:



I'm glad that you're so eager to help but that's NOT what @Nano was asking. >v>;;; Nano's issue was the fact that the border visibly exists NOT that she didn't know how to enlarge the image.


Edit: Okay apparently Nano wasn't even asking a question. She was making a suggestion for site improvement. >v> Oops.




 

It's all good.

 

[ViAdvena]

This is maybe a bit late, but I figured that you can get rid of the border by adding style="border:none;" to the html image.

 

[Chordling]

This is maybe a bit late, but I figured that you can get rid of the border by adding style="border:none;" to the html image.

I think there were some situations where this wouldn't work and not just because users were unable to use the HTML.  It's a great idea though!

 

[Nano]

This is maybe a bit late, but I figured that you can get rid of the border by adding style="border:none;" to the html image.

Tried that already.

 

[Yunn]

Just why can't coding go smoothly. ;-;. Does someone know how to get rid of the border and the obnoxious pop up box thing  with the pic that shows up when you click it >_>.



.bobarcage {height:450px;
width:650px;
margin-left:150px;}

.bobart {height:375px;
width:240px;
background:white;}

.bobarcontainer {
margin: 10px auto;
height: auto;
width: auto;
border-left:25px solid powderblue;
padding:10px;
}

.bobartabs {
margin: 0px auto;
position: relative;
width: 600px;
height: 405px;
}

.bobartab {
float: left;
}

.bobartab label {
display: block; /* this lets you fix the label dimensions */
width: 70px;
height: 70px;
background: #eee;
border: 1px solid #ccc;
margin: 5px;
position: relative;
left: 0px;
top: 0px;
opacity:.5;
z-index: 3;
}

[type=radio]:checked ~ label {
background: white;
opacity:1;
z-index: 2;
}

input[type=radio] {
display: none; /* DON'T EDIT */
}

/* if you want tab transitions they go here */
.bobarcontent {
position: absolute;
top: -30px;
bottom: 0px;
left: 250px;
right: 0px;
border: 1px solid #ccc;
}

.bobarinfo {background-color:white;
height:390px;
width:295px;
margin:25px;
padding:5px;
opacity:0;
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;}

.bobarinfo:hover {opacity:1;
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;}

/* if you want tab transitions they also go here */
input[type=radio]:checked ~ label ~ .bobarcontent {
z-index: 1;
}




 



RELATIONSHIPS

PARK, SOOHYUN




I can't life.

tab two stuff

tab three stuff

 

[Nano]

The border and the pop-up thing is basically the new version of the "see full-sized image" or w.e. it was labeled (the old version had the image simply enlarge itself on the page). If you resize the image to the exact size that it'll be on the page, you won't encounter the border and the pop-up box since the image is displayed in its original size. If you right-click the image and then press "inspect" and then mouse over the highlighted portion of the code, it should show you the pixels that the image is currently being displayed. For example, The left-most picture is 68x68px (original or "natural" size being 148x148px), so to get rid of that border, you'd just have to resize the image to 68x68px.


Hope this helps. ovo

 

[Yunn]

The border and the pop-up thing is basically the new version of the "see full-sized image" or w.e. it was labeled (the old version had the image simply enlarge itself on the page). If you resize the image to the exact size that it'll be on the page, you won't encounter the border and the pop-up box since the image is displayed in its original size. If you right-click the image and then press "inspect" and then mouse over the highlighted portion of the code, it should show you the pixels that the image is currently being displayed. For example, The left-most picture is 68x68px (original or "natural" size being 148x148px), so to get rid of that border, you'd just have to resize the image to 68x68px.


Hope this helps. ovo

lajsdlije ty you wonderful creation of god

 

[JustAlexandra]

Is there a way to make an outline not be on a picture? 


Example: 

 

[Kaerri]

Do either of these help?


[Edit note: There were links here that referred to threads that have been merged with this one.  Those links don't work now because of the merge, but now everything's in one place!]

 

[JustAlexandra]

@Kaerri a little bit, but it basically is saying that I can't do anything unless I use HTML, and even then it doesn't always work I don't have 500 content yet

 

[call me rae]

So yeah you might just upload it to like photobucket or whatever and insert it using 

• Insert Other Media - Insert Image from URL 
  

That seems to take away the outline.

 

[Nano]

Uhh...as I explained in those two places, the reason why the border appears is because you aren't using the original size of the picture. Basically, all you have to do is go on some photo editor or program that can shrink down images (the image itself and not the file size, just for clarification) and shrink it down to whatever size you intend it to be.


Edit: This does not require html. In fact, if you shrink the iamge using html by inputting a set size, you still get that border issue since it isn't the original size of the image. :\

 

[call me rae]

That doesn't necessarily work because I did just that and when I uploaded the picture the outline was still there. But if you insert the url that seems to take it off.

 

[Nano]

URL inserts are more convenient, but you can still get by with a file upload. As long as the image is already the size you want it to be, you can remove that annoying border by highlighting the image and then pressing "Remove Format" (the right-most button on the button editor). Err...basically, URL inserts are fine as long as it's the right size, but file uploads require one more step which is pressing that remove format button. =)

 

[IctoraPost]

I HAVE DONE IT.


I think.


Hopefully.


So, you know all those questions about resized images having borders and how to get rid of them?


Yeah, you just add border:0px; to the image. Found that out from other people.


But there's still the problem of clicking them - they continue to do that pop-up thing. We don't want that.


And here's the thing I found out there in the interwebs. To get rid of it, you put the image into a div, then add pointer-events: none; to said div.


So:


<div style="pointer-events: none;" >
<img src="https://www.rpnation.com/uploads/monthly_2016_08/rpncrest17.png.58fe3b813c84826b06de1077bd1919bd.png" style="width: 200px; height: auto; border: 0px;"/>
</div>






Actually, now that I think about it, no one probably cares about this, except maybe people dealing with images in HTML. But whatever.


Oh, and the two other solutions I know of are to resize the image on Photoshop or MSPaint or something and upload it without resizing it on the site, then highlight it and click the "remove formatting" button (courtesy of @Nano), or by putting it in a spoiler.


Demo:


Nothing done to it

Resized on-site

Resized off-site


/monthly_2016_11/rpncrest17.png.58fe3b813c84826b06de1077bd1919bd.png.188373e2114182deca6330f6fba4785a.png


Spoiler

Spoiler

HTML method


See below

 

[Nano]

OMGOMGOMGOMGOMGOMGOMGOMG
IT WORKSSSSS
Bless your freaking soul. You have no clue how happy I am right now.


....right. Proof:


Resized using @IctoraPost's method:

It's way too early for me to be looking at a screen, and my eyes are crying in agony, but THIS....I have nothing more to say. *gives you a cookie*

 

[Kaerri]

Merged in all the threads that asked about this.   Nicely done, @IctoraPost!

 

[The Mechanist]

I HAVE DONE IT.


I think.


Hopefully.


So, you know all those questions about resized images having borders and how to get rid of them?


Yeah, you just add border:0px; to the image. Found that out from other people.


But there's still the problem of clicking them - they continue to do that pop-up thing. We don't want that.


And here's the thing I found out there in the interwebs. To get rid of it, you put the image into a div, then add pointer-events: none; to said div.


So:



<div style="pointer-events: none;" >
<img src="https://www.rpnation.com/uploads/monthly_2016_08/rpncrest17.png.58fe3b813c84826b06de1077bd1919bd.png" style="width: 200px; height: auto; border: 0px;"/>
</div>






Actually, now that I think about it, no one probably cares about this, except maybe people dealing with images in HTML. But whatever.


Oh, and the two other solutions I know of are to resize the image on Photoshop or MSPaint or something and upload it without resizing it on the site (courtesy of @Nano), or by putting it in a spoiler.


Demo:


Nothing done to it





Resized on-site





Resized off-site...


View attachment 199088


...which obviously doesn't work, now that I've come to present it.


Spoiler

Spoiler

HTML method


I can't actually show this because I don't have enough posts. And I don't know if it actually works on here becuase I can't test it. Could someone with HTML please try it?

You get extra cookies and punch

 

[IctoraPost]

OMGOMGOMGOMGOMGOMGOMGOMG
IT WORKSSSSS
Bless your freaking soul. You have no clue how happy I am right now.


....right. Proof:


Resized using @IctoraPost's method:




It's way too early for me to be looking at a screen, and my eyes are crying in agony, but THIS....I have nothing more to say. *gives you a cookie*

Merged in all the threads that asked about this.   Nicely done, @IctoraPost!

You get extra cookies and punch

Yess it works


Thanks! Had to do quite a bit of googling to find it. Hope people find it useful!


*noms on cookies*