Thanks for nothing, Kinja.

Yes, Kinja has a new layout, and it finally hit every Kinja blog, including TAY. I was kind of OK with images and such being wider than the text for like maybe 5 minutes, then I changed my mind. I hate it. Hate. It. Here’s how to fix some of it so that the text, images, and video widths all match up!

Fixing Images

This one is rather simple. If you want it to be better aligned with the text, make it 636 pixels wide. Any wider and it will start to expand outside the width of the text, up to a maximum of 800 pixels where it will then shrink it to fit. If you go a little smaller than 636 then it will stay centered but be somewhat thinner than the text of your article.


To make an image display smaller and to the left of the text, I found that the threshold is somewhere between 400 and 350, with 400 being centered and 350 being left aligned. As you can see, even at 350 it’s extending outside of the text area, so you may need to experiment if you want the image to be perfectly aligned. I haven’t investigated this quite yet.

Fixing YouTube Video Embeds

This one was difficult for me to figure out. Editing the width in the HTML Editor wouldn’t work as Kinja ignored it. Pasting embed code provided by YouTube itself wouldn’t work either - I wound up with the video in an extra frame with scroll bars. However, I was on the right track. Here’s what you need to do: paste the YouTube link as normal and it will create the embed at the maximum of 800 pixels.


Then, go to the bar at the top, and click the HTML button.

Once in HTML Editor mode, find where your video is and remove some needless extra Kinja related crap.


Switch back to the regular edit mode by clicking the HTML button again and your video should look like the one below!



Extra stuff!

So I figured out a few more things while writing this guide. They might be useful, especially the first one, so I’ll put them here.


One: The Bold button is broken, at least for me. To make text bold, I had to go into the HTML editor and put <b>bold tags</b> around my text for this guide.

Two: You don’t necessarily have to resize your images! If you go into the HMTL editor and find an image you want to align left even though Kinja considers it “too big”, you can change the class of the uid tag surrounding the image from “has-image media-medium” to “has-image media-small”, and it will left align regardless. Since it’s too big, it will extend past the left edge of the text, but it’s there if you want to use it. Changing the class to “has-image media-large” did not seem to be any different from medium.

That’s it!

I haven’t figured out anything else useful in the abysmal new layout, but if I do I’ll add them to the guide. See you around, folks!