Tumblr Help Needed | 50 TBT Bell Reward

[Bowie]

Hi! So, I need a bit of help with my Tumblr, and I know a lot of you are good with Tumblr blogs.

I basically have a page on my Tumblr where people can see some examples of my GFX work. So, lots of very small graphics, pixel art, and all that good stuff. Unfortunately, my theme seems to think that it would be a good idea to sabotage my life by making these images gigantic.

The image above depicts the page I'm trying to make. The image I've added is the size of a collectible.

I have reason to believe that this piece of code is at least partially responsible for this:

{blockermalinkPage}
#content {
max-width: 700px;
}

body.permalink .grid > .item,
body.permalink .grid > .item-sizer {
width: 100%;
}
{/blockermalinkPage}

But, when I delete it, this happens:

My collectible is now to the very left of the page (it's supposed to be centered, like everything else on the blog), and it's only a tiny bit smaller. I tried messing with the "700 pixel maximum" thing in the code and I got very mixed results, some ranging from going smaller, to disappearing completely.

I am offering 50 TBT Bells in return for the first person to fix this problem for me. If you need the HTML, I can provide it privately.

 

[AnimalCrossingPerson]

Well, don't remove it. Change the values and experiment.

 

[Bowie]

Well, don't remove it. Change the values and experiment.

That's what I did. Nothing came out right.

 

[AnimalCrossingPerson]

That's what I did. Nothing came out right.

Oh. Well, I don't know much about Tumblr themes, but if you want to upscale pixel art, this shows how to do it with CSS without blurring: https://css-tricks.com/almanac/properties/i/image-rendering/

Doesn't solve your issue though, lol.

- - - Post Merge - - -

Just thinking... have you tried adding a width attribute to your image?

<img src="image.xyz" width="64px" height="auto">

 

[Bowie]

Oh. Well, I don't know much about Tumblr themes, but if you want to upscale pixel art, this shows how to do it with CSS without blurring: https://css-tricks.com/almanac/properties/i/image-rendering/

Doesn't solve your issue though, lol.

- - - Post Merge - - -

Just thinking... have you tried adding a width attribute to your image?

<img src="image.xyz" width="64px" height="auto">

I've tried that, yes. It doesn't change a thing.

 

[AnimalCrossingPerson]

I've tried that, yes. It doesn't change a thing.

Well... I blame Tumblr. All I can really think of now is if some JavaScript is doing something. I'm more competent with WordPress.

 

[Bowie]

Well... I blame Tumblr. All I can really think of now is if some JavaScript is doing something. I'm more competent with WordPress.

Thanks anyway!

 

[seliph]

But, when I delete it, this happens:

My collectible is now to the very left of the page (it's supposed to be centered, like everything else on the blog), and it's only a tiny bit smaller. I tried messing with the "700 pixel maximum" thing in the code and I got very mixed results, some ranging from going smaller, to disappearing completely.

I am offering 50 TBT Bells in return for the first person to fix this problem for me. If you need the HTML, I can provide it privately.

Does it show up that way on the actual page itself or just the text box? 'Cause the preview page itself isn't really accurate and the text box even less so. When I tweak themes and pages I constantly have to open them in new tabs to see if they actually look right.

Could you link your page? That'd make things way easier since every theme is different.

 

[Balverine]

I don't know if it will help at all, but this page shows how to resize pictures in your theme, but it may not help because I think it's mainly for how posts show up on the theme

(or, yeah, gyro might be able to help more lol)

 

[Bowie]

Does it show up that way on the actual page itself or just the text box? 'Cause the preview page itself isn't really accurate and the text box even less so. When I tweak themes and pages I constantly have to open them in new tabs to see if they actually look right.

Could you link your page? That'd make things way easier since every theme is different.

Here. I'm not sure how much of it you may need, so I just copied the whole thing.

And yes, the preview comes up the same way that the actual page does. I thought this may have been the case, but unfortunately it wasn't.

I don't know if it will help at all, but this page shows how to resize pictures in your theme, but it may not help because I think it's mainly for how posts show up on the theme

(or, yeah, gyro might be able to help more lol)

Thanks anyway!

 

[seliph]

Okay so!
You were right about this part:

{blockermalinkPage}
#content {
max-width: 700px;
}

body.permalink .grid > .item,
body.permalink .grid > .item-sizer {
width: 100%;
}
{/blockermalinkPage}

being a factor in it. First thing I did was change both width values to "auto" so that it became this:

{blockermalinkPage}
#content {
max-width: auto;
}

body.permalink .grid > .item,
body.permalink .grid > .item-sizer {
width: auto;
}
{/blockermalinkPage}

That will help with the sizing of the image. To center it, you need to go into your actual page options. Whether you uploaded the image via the uploader or HTML, hit the HTML button. Change your coding so that it appears like this:

For convenience:

<div style="margin-left: 150px;"><img src="IMAGE URL" /></div>

Of course change your image url to whatever yours is, and then play around with the margin number until your image is in the center. Mine ended up being 150px (I was still experimenting when I took the screencap) and if you want to see the final result it's here.

 

[Bowie]

Okay so!
You were right about this part:



being a factor in it. First thing I did was change both width values to "auto" so that it became this:



That will help with the sizing of the image. To center it, you need to go into your actual page options. Whether you uploaded the image via the uploader or HTML, hit the HTML button. Change your coding so that it appears like this:

For convenience:

<div style="margin-left: 150px;"><img src="IMAGE URL" /></div>

Of course change your image url to whatever yours is, and then play around with the margin number until your image is in the center. Mine ended up being 150px (I was still experimenting when I took the screencap) and if you want to see the final result it's here.

It worked, partially.

It works on pages (with a lot of experimenting), but on actual permalink posts or error messages, everything goes to the left from now on, and permalink images are huge like the page ones used to be. So, only a partial success.

I'm gonna send you your reward anyway, though. Thanks!

 

[KingKyle]

I do not know how Tumblr works but maybe contact support if it exists?