Bindery Theme -Display Slideshare shortcodes in portfolio gallery (on the right)

• 

  mid0nz · Member · Jun 13, 2017 at 3:34 pm

  • Copy link
  • Add topic to favorites

  I need a Slideshare shortcode/embed to display on the right hand side of a portfolio page just as a featured video or an image gallery does. (Right now it’s constrained w/in .entry-content rather than in .portfolio-gallery.)

  Here’s the slideshare short code: [slideshare id=76829918&doc=warnermellonpresentation-170610205732]

  Also– is it possible to reorder the portfolio gallery items so that video always appears above image galleries, etc.?

  Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jun 14, 2017 at 12:26 am

  • Copy link

  Bindery does not have a sidebar on a page set to the Portfolio Page Template. It shows the Portfolio Projects over the full width of the page. There is no way to add a slideshow to the right or left side of that page. You can add a Text Widget to the Portfolio Footer widget area and copy/paste your Slideshare code into that text widget.

  You can reorder the Portfolio items by changing the dates of them to be in the order you want them. Although this support page is talking about Scheduling posts (changing dates) the procedure is the same for Portfolio Items.

• 

  mid0nz · Member · Jun 14, 2017 at 3:57 pm

  • Copy link

  Thanks! I’m not sure I was particularly clear so I’ll rephrase to make sure I understand you.

  Here is the Slideshare in Bindery in action: https://scholarashuman.com/portfolio/sara-warner/

  On portfolio projects (not Pages with the portfolio template attached) Bindery processes [wpvideo] and [gallery] and classes them as `
  .portfolio-gallery .portfolio-gallery-items ` — in iframes that then appear on the right side of the screen.

  The Slideshare shortcode (and all other shortcodes I believe) are treated differently than videos and galleries. They appear in an iframe on the left in .entry-content

  So is there a way to style .entry-content iframe as `
  .portfolio-gallery .portfolio-gallery-items `?

  I tried this: `.entry-content iframe {
  position: absolute;
  bottom: 0;
  right: 0;
  top: 65%;
  left: 50%;
  }`

  but of course the positioning is absolute in relationship to .entry-content and not to .portfolio-gallery. And setting the ‘top’ attribute messes up the fixed header. So while it has the visual effect I want (‘floating’ the Slideshare, etc. to the right) it isn’t a real solution.

  The second part of my issue is that Bindery appears to give [gallery] precedence over [wpvideo] so galleries always appear above videos on the right. I can’t figure out a way to change that so I can control which assets appear in which order. I need video to appear at the top so I can’t even use galleries. I don’t suppose there is a way in CSS to do this?

  I’m not sure how WP.com theme dev works or how often themes get added features. I’d happily put in a couple of feature requests to the developer b/c these really are basic things I’d expect to be able to control in Customizer. I’ve seen other tickets where people have similar questions/needs.

  Thanks as always!!!

  On this page : https://scholarashuman.com/portfolio/sara-warner/

• 

  thesacredpath · Member · Jun 15, 2017 at 1:32 am

  • Copy link

  Hmmm, I looked at the the HTML, and there is no class assigned to the slideshare iframe. We can do this, but using something as broad as .entry-content iframe would affect every iframe in .entry content. In addition, once we do a position: absolute on it, it effectively loses its relationship to all other elements and floats independently, which means the space it was occupying in the HTML collapses and the slideshare iframe nearly disappears. We can add some padding at the bottom of .entry content, but things go pretty wacky on smaller screens. Of course, the slideshare iframe goes wacky even without the added CSS. Try the following. I’ve limited this to just the Sara Warner page by using a couple of CSS classes from the opening body html tag.

  .single-jetpack-portfolio.postid-67 .entry-content iframe {
  	position: absolute;
  	right: 0;
  }
  .single-jetpack-portfolio.postid-67 .entry-content {
  	padding-bottom: 500px;
  }