Home › Discussions › Feature Requests › Sidebar Images for Wiki Pages - Feature Requests Discussions on Obsidian Portal Community Forums
Sidebar Images for Wiki Pages
I'd like it if it were possible to add an image in the right sidebar for wiki pages like you can do for characters and items. Apologies if this has already been requested, my search didn't come up with anything.
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
Thanks for the request!
It's unlikely that we would make a change to the layout of the wiki pages, but I feel like putting an image on the right hand side of a Wiki Page is probably already doable with the Custom CSS, or possibly, just inline HTML/CSS in the Wiki Page.
For example, if you take a look at Terror at Thrushmoor, in the bottom right hand corner @gastoff has an "image" of a badge for the Campaign of the Month.
https://terroratthrushmoor.obsidianportal.com/
Obsidian Portal Developer
Alright, I'll play around with inline CSS for wiki pages and see if I can get it to place properly. Using the custom CSS for the whole campaign would require that it be the same image across the whole campaign, right? Seems a little clunky either way, but I'll see what I can do.
@seanbyram
You wouldn't need to use the same image across the whole site when using the custom CSS. In the example that @thaen gave with the image I have in the bottom corner of my home page, I used the custom CSS to specify how I wanted the image to behave, then applied that CSS coding to the image URL on the front page. I could add that same CSS behavior to a different image on a wiki, character page, or anywhere else on the site, but it would take on the same properties that I specified in the CSS. Namely, it would make it affixed to the bottom right corner with a set width of 10% of the screen.
I think this will get you most of the way there.
You can add a class to the Custom CSS to make placing the image uniform, like this:
.right-sidebar-image {
position: absolute;
right: -250px;
top: 150px;
width: 230px;
}
Then at the top of your wiki page, you put a textile div that uses that class. In the div, you put the image that you want to show on the right sidebar for that wiki page. For example...(that's an image from my test campaign, so you'll need to replace it with one of your images for it to show...)
div(right-sidebar-image). [[File:1048994 | class=media-item-align-none | jedi-on-tatooine.jpg]]
Then after having that line at the top of your wiki page, you just add whatever else you want to the wiki page below that and it should display as normal.
Obsidian Portal Developer
Hmmm yeah, that is a good starting place. Been poking at it for a bit... is there an existing frame to place it in that'd get it above the "last updated"? My hope is to also get it to auto resize and align to the large-3 columns sidebar like the character-avatar div class does.
I'm also concerned that manually positioning it in the custom CSS might allow for misalignment on other folks' screens, though I'm not sure.
@seanbyram, you'll definitely want to be aware of that, so good eye. Particularly for smaller screen like phones and tablets. If you go with something like the code that thaen supplied, you'll probably want to use some @media entries as well to adjust for those other screen sizes.
- Kallak
I tried playing around with the pseudo class of "::before" on the sidebar, and giving it a background-image, but it would be a block of Custom CSS for every wiki page that had an image, and it wouldn't get you auto resize, so there's not much benefit to that.
You could use the same solution I provided above, and shift the image up and shift the sidebar down, so they were flipped, but I don't see a way to do this that would get you the auto resize. The image would need to be a fixed height, so it didn't stretch down over the shifted down sidebar.
Kallak has a good point on the media entries. You can grab the side of your browser window and stretch it in and out to see how the different sizes of the screen would affect it. And in Chrome (and Firefox I think?), there is a setting in the "Inspect" where you can choose to look at the page as a bunch of different device sizes like phones and tablets.
Obsidian Portal Developer
Been screwing with it for a while now and can't get it to do exactly what I want, so I've totally removed it as its mere existence has become a painful reminder of my inability to make it bend to my whims. Unruly elements have no place in my demesne; I am a demanding tyrant. :P
I've extended the max width of the content body to make up the space, and created a class for images that floats right with a small margin. That way the image is in the main body and text wraps around it. Good enough.
"demesne" - oooh, great word!
Excellent solution!
Obsidian Portal Developer