Twitter feed at the right side of the main page

[ManuThomasen]

Hi Vincent Rubinetti and others contributors

First of all, Its a very nice template and easy to set up! Thanks!

I'm on a task to add a twitter feed to our main page, before publishing it.
The twitter feed should appear on the right side of the page from the start of the section (Sorta like a header/footer, but just on the side)

How can i do this? I have tried to edit the index.md but without luck.

Any help is very much appreciated

bw, Manuel

[vincerubinetti]

Hi Manuel,

Does the cols component meet your need:
https://greene-lab.gitbook.io/lab-website-template-docs/basics/components/cols

It can make it so there are two equal-width columns of content running down the page (however long you want it). There is also the float component where you could control the width of the feed <iframe> element (which you get from Twitter).

If you'd like to have the feed be an "aside", where it's actually outside and adjacent to the main column of page content, that is certainly possible, but it will require some custom CSS. If you provide a little sketch or dummy screenshot of what you're trying to accomplish, I can help you with that.

[ManuThomasen]

Hi Vincent,

Thanks for the fast reply!

Can I control the sizes of the columns from the cols component? - say that I want to have the main content of the page to be centered , and the Twitter feed on the right side, but with a smaller width ?

They way I have done it with col component, makes the columns equal size in width, which i'm not interested in.

I might need to go with the solutions to create som custom CSS. But I have no experience with that.
I have attached a sketch

[vincerubinetti]

Here's how you can do that. Create a _styles/aside.scss file with the following contents:

---
---

// match with vars at top of section.scss
$page: 1000px;
$padding: 40px;

// screen width breakpoint
$screen: 1800px;

// if the screen is wide enough
@media (min-width: $screen) {
  // float aside next to section content
  aside {
    // position relative to containing section (nearest ancestor with position: relative)
    position: absolute;
    // distance from screen edge. can change to "left" to switch side.
    right: 40px;
    // distance from section top
    top: 60px;
    // distance from section bottom. remove to let span over multiple sections.
    bottom: 60px;
    // width = space on side of section, minus some padding
    width: calc(max($padding, (100% - $page) / 2) - 100px);
  }

  // override twitter styles to fit to aside container
  .twitter-timeline {
    width: 100% !important;
    height: 100% !important;
  }

  // override twitter styles to fit to aside container
  .twitter-timeline > iframe {
    width: 100% !important;
  }

  // select sections that contain an aside element. :has doesn't currently work in some browsers but it's a pain to do this without it.
  section:has(aside) {
    // put section on top of other sections in stacking order. only needed if aside spans over multiple sections.
    z-index: 99 !important;
  }
}

// if the screen is small
@media (max-width: $screen) {
  aside {
    // optionally hide completely on small screen
    // display: none;
  }
}

.twitter-timeline {
  // optionally limit timeline height
  max-height: 1000px;
  // scrollbar if timeline taller than containing aside
  overflow-y: auto;
}

Then on your homepage (or wherever), just put your Twitter timeline inside an <aside> tag like this:

<aside>
  <a class="twitter-timeline" href="https://twitter.com/youyuxi?ref_src=twsrc%5Etfw">Tweets by youyuxi</a>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</aside>

Notes:

• This will "stick" the aside to the top of whatever page section you put it in.
• This will limit the height of the aside to the height of the section that it is in, so it doesn't overflow the section. Personally I don't think it looks good to have the aside span over multiple sections, because of the alternating white/light-gray background colors. But if you want it to do this, see the associated comments above. But be aware this won't work in certain browsers yet. Without using :has, it becomes more of a pain; you'd have to use JavaScript.
• When the screen size gets too small to fit the timeline, it goes inline with the rest of the page content. That is, it appears wherever you put it down the page.
• If you wanted to completely hide the aside on smaller screens, see the associated comment above.
• If you wanted to put it on the left side of the screen, you'd just change right to left.
• Some of this code is specific to the Twitter timeline embed. Putting other embeds in <aside> may require different CSS rules. In fact, Twitter could change the embed widget at any time and different/new CSS rules would be needed.

---

I've considered adding this as a built-in component, but things can get hairy and complicated depending on what you want and what content you're putting inside it. I still may add it in the future, so stay on the lookout for a new "aside" component.

[ManuThomasen]

A huge thanks to you Vincent! I will try to implement this to our webpage, and see how it fits.

You have done way to much to help me. Let me know if there is anything I can do in return ;)

bw
Manuel