Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is it possible to link from one slide to another? #251

Closed
heavysixer opened this issue Nov 27, 2017 · 11 comments
Closed

Is it possible to link from one slide to another? #251

heavysixer opened this issue Nov 27, 2017 · 11 comments

Comments

@heavysixer
Copy link

I see examples of external hyperlinks but I am wondering if you have an example of linking between slides?

@gitbrent
Copy link
Owner

Hi @heavysixer,

Unfortunately, linking between slides is not currently supported.

@gitbrent gitbrent self-assigned this Nov 28, 2017
@heavysixer
Copy link
Author

Hi @gitbrent looking through the code it looks like createHyperlinkRels might allow for relative links between slides. Is this something that could be exposed as a public function instead of being only used internally?

@gregdolley
Copy link

Actually, you CAN link to other slides easily. Any element that supports a hyperlink in its options object, just put "#3", "#4", etc. in the URL to link to that slide. For example:

slide.addImage({path: 'images/world.jpg', x: 1.0, y: 1.0, w: 2.0, h: 2.0,
hyperlink: {
url: '#4',
tooltip: 'Go to slide #4',
});

@gitbrent
Copy link
Owner

gitbrent commented Nov 30, 2017

@gregdolley: Holy cow, that worked! Today I Learned...

@heavysixer: Does this work for you?

var pptx = new PptxGenJS();

var slide = pptx.addNewSlide();
slide.addImage({
    data: LOGO_STARLABS, x: 1.0, y: 1.0, w: 2.0, h: 2.0,
    hyperlink: { url:'#2', tooltip:'Go to slide #2' }
});

var slide = pptx.addNewSlide();
slide.addText('Link goes here', { x:0.5, y:0.7, font_size:18 });

pptx.save('PptxGenJS-Links');

@gregdolley
Copy link

gregdolley commented Nov 30, 2017

@gitbrent We're using node, so I had to change the first line and LOGO_STARLABS wasn't defined, so I used an image on my machine. But, yeah, this version worked fine:

var pptx = require('pptxgenjs');

var slide = pptx.addNewSlide();
slide.addImage({
    path: '__test__/images/world.jpg', x: 1.0, y: 1.0, w: 2.0, h: 2.0,
    hyperlink: { url:'#2', tooltip:'Go to slide #2' }
});

var slide = pptx.addNewSlide();
slide.addText('Link goes here', { x:0.5, y:0.7, font_size:18 });

pptx.save('PptxGenJS-Links');

@heavysixer
Copy link
Author

@gitbrent unfortunately it does not work for me, but I am on a Mac using the official Microsoft version of Powerpoint. I will check on a PC to see if it works there.

@heavysixer
Copy link
Author

heavysixer commented Dec 1, 2017

I've noticed that MS generates the XML slightly different than what this tool produces.

This lib creates a link like this:

<a:r>
  <a:rPr lang="en-US" u="sng" dirty="0" smtClean="0">
  <a:solidFill><a:srgbClr val="CC0000"/></a:solidFill><a:hlinkClick r:id="rId2" tooltip="Go to slide 3"/></a:rPr>
  <a:t>This is slide 1. Click to go to slide 3</a:t>
</a:r>

MS generates it like this:

<a:r>
  <a:rPr lang="en-US" dirty="0" smtClean="0">
  <a:solidFill><a:srgbClr val="00CD00"/></a:solidFill><a:hlinkClick r:id="rId3" action="ppaction://hlinksldjump"/></a:rPr>
  <a:t>Linked By MS</a:t>
</a:r>

The key differences appears to be the action="ppaction://hlinksldjump" attributes.

@heavysixer
Copy link
Author

@gitbrent Is there a way to pass arbitrary attributes from the options hash to the link? If so we could easily add the support for action.

@gitbrent
Copy link
Owner

gitbrent commented Dec 4, 2017

Hi @heavysixer,

Having looked at the XML PowerPoint generates, I can see that while a hyperlink can be targeted to a slide may work, the correct code is what you've shown.

Therefore, i'll add a new "slide" option to hyperlinks so that slide links can be properly supported.

Slide XML:

<a:r>
  <a:rPr lang="en-US" dirty="0" smtClean="0">
    <a:hlinkClick r:id="rId3" action="ppaction://hlinksldjump" />
  </a:rPr>
  <a:t>Link to slide #2!</a:t>
</a:r>

Slide Ref:

<Relationship Id="rId3" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/slide" Target="slide2.xml"/>

@gitbrent gitbrent added this to the 2.0.0 milestone Dec 4, 2017
gitbrent pushed a commit that referenced this issue Dec 4, 2017
@gitbrent
Copy link
Owner

gitbrent commented Dec 4, 2017

Links to Slides within a Presentation are now supported in the main branch. Readme updated.

// EX: Hyperlink: Web
slide.addText(
    [{
        text: 'PptxGenJS Project',
        options: { hyperlink:{ url:'https://github.com/gitbrent/pptxgenjs', tooltip:'Visit Homepage' } }
    }],
    { x:1.0, y:1.0, w:5, h:1 }
);
// EX: Hyperlink: Slide in Presentation
slide.addText(
    [{
        text: 'Slide #2',
        options: { hyperlink:{ slide:'2', tooltip:'Go to Summary Slide' } }
    }],
    { x:1.0, y:2.5, w:5, h:1 }
);

screen shot 2017-12-03 at 23 01 45

@gitbrent gitbrent closed this as completed Dec 4, 2017
gitbrent pushed a commit that referenced this issue Dec 4, 2017
@heavysixer
Copy link
Author

great stuff @gitbrent !

ericrockey pushed a commit to WeTransfer/PptxGenJS that referenced this issue Mar 24, 2020
ericrockey pushed a commit to WeTransfer/PptxGenJS that referenced this issue Mar 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants