Submit a request

Embedding PDF's into a Content Page

Follow

Comments

7 comments

  • Avatar
    Marvin Hankins

    On mobile device it says "This plugin is not supported". Is there a fix for this?

  • Avatar
    Steve Babb

    Hey Marvin, this is a known issue when using Android. It actually happens to a lot of websites because the mobile browser does not have the capability to support adobe or some other PDF viewer. You could put in a link directly to the PDF that mobile users could click to download the PDF which will allow for viewing, but the embedded PDF may not work in all browsers.

  • Avatar
    Marvin Hankins

    Thanks Will. I'm trying to figure out how to show link to PDF if mobile device and otherwise embed.

  • Avatar
    Marvin Hankins

    OK check this out. Here's a workaround to show the embedded PDF on large displays only and link to PDF on smaller displays:

    This is the embedded PDF visible only on large displays:

    [<span class="visible-lg"><embed src="/documents/Specs_##ITEMNR##.pdf" width="100%" height="800px" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"></span>]

    This is a FontsAwesome icon with link to PDF the embedded PDF visible only on smaller displays:

    [<span class="hidden-lg"><p><i class="fa fa-file-pdf-o" aria-hidden="true"></i> <a href="/documents/Specs_##ITEMNR##.pdf" target="_blank">Print/Download</a>
    </p>]

    This is an embedded image of the PDF (from Google Drive) with link to the actual PDF visible only on smaller displays:

    [<p><a href="/documents/Specs_##ITEMNR##.pdf" target="_blank"><img src="https://docs.google.com/drawings/d/1TFhdik7-D3ou9Rnh9R6rzwrMk024UW4lEXPpoqDY4x8/pub?w=1000&h=1250" alt=""></a>
    </p></span>]

    The three sections of code are inside the brackets and would be placed together.

    Here is a link to the page - click on the "Specifications" tab.

  • Avatar
    Marvin Hankins

    Here's a simpler method that works great on all mobile devices except IOS - no idea why:

    [<object width="100%" height="800px" data="/documents/Specs_##ITEMNR##.pdf" type="application/pdf"><p><i class="fa fa-file-pdf-o" aria-hidden="true"></i> <a href="/documents/Specs_##ITEMNR##.pdf" target="_blank">Print/Download</a>
    </p>
    <p><a href="/documents/Specs_##ITEMNR##.pdf" target="_blank"><img src="https://docs.google.com/drawings/d/1TFhdik7-D3ou9Rnh9R6rzwrMk024UW4lEXPpoqDY4x8/pub?w=1000&h=1250"></a>
    </p></object>]

    (Just the part inside the square brackets)

  • Avatar
    Steve Babb

    Great find Marvin!

    Just to help make sure everything is clear for future users you will want to replace

    embed src="/documents/Specs_##ITEMNR##.pdf"
    a href="/documents/Specs_##ITEMNR##.pdf"

    with the link to your PDF. Remove the content between the quotation marks and put in the URL to your PDF. If you follow Marvin's steps and make the URL edits above you should be good to go.

    Thank you Marvin!

  • Avatar
    Marvin Hankins

    Thanks for the clarification Will! I think the examples were too complicated maybe because the main point was to show the two methods to present different content for desktop and mobile devices by using the and

    The ##ITEMNR## merges are optional but are used to automatically created the URLs to the PDFs for each product so you don't have to enter each one manually. I created a custom merge with the code in the first example.

Please sign in to leave a comment.