ADT Posted September 28, 2016 Share Posted September 28, 2016 We have a weekly bulletin that we access via Frog!! This is a PDF file uploaded to a shared folder in school documents the file name includes the current week date!!! I want to know how I could display this on a page rather than staff having to download it!!! And before anyone asks yes this was probably answered on the old Forum but as that is dying............. Link to comment Share on other sites More sharing options...
Corinne Posted September 28, 2016 Share Posted September 28, 2016 This doesn't use the shared folder but you can use a link to file and html widget to display a pdf. Add pdf to widget, uncheck force download - this will then open the file in a browser tab. Copy the address and put this into the following code, in a HTML widget: <embed src="https://....WebAddressHere...." width="580" height="530" type='application/pdf'> You can then hide the link to file widget so the user only sees the file embedded. Link to comment Share on other sites More sharing options...
mmclaughlin Posted September 28, 2016 Share Posted September 28, 2016 A good work around is also to use a link to file widget and set it for not forcing download. This will send you to a web addressed version of it. You then can embed the website in your page creating a viewable .pdf Link to comment Share on other sites More sharing options...
Graham Quince Posted September 28, 2016 Share Posted September 28, 2016 Hi @ADT, There's a bunch of different ways you can do this: Using this HTML code as a starting point: <embed src="copied_link" width="500" height="375" type='application/pdf'> You can display a PDF in a site. 1) We could use the File Drop widget tutorial: https://www.frogcommunity.com/filedrop to read all files in a File Drop and display them using the above 2) We could use the code in Understanding APIs tutorial https://www.frogcommunity.com/understanding-api to read the contents of a folder and display using the above 3) @John Elliott posted this option on the old forum: Quote My example below attempts to make an A4 sized PDF fit fully on the screen, regardless of how wide the column you put it in. You don't need pixel widths because its the same width as the column on Frog that you put the 'link to file' widget in. Another bonus about this script is that you don't need to find the file's UUID, all you need to do is put a Link to File widget on a page as well as a very short HTML Widget to initiate the larger script (placed likely on a shared dashboard, can be on multiple dashboards if not all users share one). Larger Script to place on a shared dashboard(or multiple: students, staff, etc if not shared): I'd just put this at the very bottom of the page somewhere so the margins associated with the HTML widget don't interfere with the look of your dashboard. If you don't want A4 height on the resulting iFrame, but would prefer the pdf to fit more 16/9 ratio, just reduce the padding-bottom % in line 2 of the HTML below. 56% should give you roughly 16/9 ratio, but you can change it how you want. For the purposes of this demo though, you can't really have different heights on different pages. It's fairly possible though. <style> div.pdf_viewer { position: relative; padding-bottom: 130%; height: 0; overflow: hidden; } div.pdf_viewer iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> <script> if (typeof PDF_To_Viewer !== 'object') { //just in case this is on multiple dashboards, only really want to instantiate it once. PDF_To_Viewer = { base_url: Frog.Utilities.getBaseUrl() + '/app/', init: function(anchor) { this.anchor = 'view_anchor_'+ Math.floor((Math.random() *10000) + 1); $('#'+ anchor).attr('id', this.anchor); //allow this element ID to be re-used on other pages. this.buckets = $('#'+ this.anchor).parents('div.sites_page').data('controllers').sites_page.page_pre_save_state.buckets; this.find_link_to_file(); }, find_link_to_file: function() { for (i=0; i<this.buckets.length; i++) { for (uuid in this.buckets[i]) { if (typeof this.buckets[i][uuid].widget.namespace == "widget.filelink") {//is this a link to file this.is_a_pdf(i, uuid); } } } }, is_a_pdf: function(i, uuid) { var context = {bucket: this.buckets[i][uuid], anchor: this.anchor}; $.ajax(this.buckets[i][uuid].prefs.resource_url, {type: "HEAD", context: context}).complete(function(xhr) { if (xhr.getResponseHeader('Content-Type') == 'application/pdf') PDF_To_Viewer.replace_with_viewer(this); }); }, replace_with_viewer: function(data) { var html = "<iframe src="https://docs.google.com/gview?url="+ encodeURIComponent(this.base_url + data.bucket.prefs.resource_url) +"&embedded=true" frameborder='0'></iframe>"; $('#'+ data.anchor).parents('.sites_page').find('div[data-content-uuid="'+ data.bucket.uuid +'"] div.widget_filelink').addClass('pdf_viewer').html(html); } }; } </script> Quote Now, on the page that you have a 'Link to File' widget that points to a PDF, put this inside an HTML widget(again, likely best to just put it at the bottom of the page): <div id='something_somewhat_unique'></div> <script> PDF_To_Viewer.init('something_somewhat_unique'); </script> Quote From the above script, you can see that I used the same text in the id of the div as I did in the init function. You'll probably also realise that this doesn't use any APIs but rather depends on the DOM. Frog don't support use of the DOM, but I couldn't find any reliable APIs to use to get the visible PDFs on a specific page. If there is a viable api that I skipped over, i'd be willing to alter this so that it worked with that instead. If not, the only problem with this code would be if Frog changed some major core parts of their code and even then, all that would happen would be that the 'link to file' widgets would just stay normal, they wouldn't change to iFrames. 4) @emoseley posted this idea: Quote Most PDF's I use are about 4 or less pages. I open them in Acrobat and save the file as a .png. Acrobat renders each page as an image. I use a table in the text widget to easily make the size uniform and upload one image per cell. 5) And this one: Quote 1 - On your site, drag in a the Link to file widget 2 - upload your PDF and uncheck the Force download option 3 - Save and close the editor 4 - Click on the link, the PDF should now open in a browser tab 5 - Copy the address Paste this address into the "Embed Website" Widget Thanks for posting this. I was wondering how best to share these. If you need me to elaborate on any of these (especially the top two), just let me know. From your original description, 2) seems the closest match, but... if youy check to Ideas Portal, Embed Doc Widget - Ability to embed a PDF Document within a site - http://ideas.frogcommunity.com/ideas/FRG-I-725 is actually marked as In Development Hope something here helps Graham Link to comment Share on other sites More sharing options...
ADT Posted October 4, 2016 Author Share Posted October 4, 2016 Not that im saying you lost me..... but I had a look..... and then gave up!!!! If it wasn't for blinking school kids getting in the way this teaching/VLE Coordinator job would be so much easier!! Link to comment Share on other sites More sharing options...
Graham Quince Posted October 4, 2016 Share Posted October 4, 2016 Hi @ADT I've created a site on your FrogLearn (and shared it with you). It contains the following code which is set to your Staff Bulletin folder. <script> // Create a div, and give it is unqiue ID $PDFshower = $("<div>", { id: Frog.Utilities.generateSimpleId() } ); Frog.Model .api('resources.getOfType', { sources: ["native","site"], type: 'staff', author: 'true', root_folder: 'EDAAA0E92002F81B92C2DFCD917CAC05E532634CEE5FEBD9', folder: 'B68B6DC42002FFB76B9C0F476C8F3400E8D1320C3617F221', filter: null, exclude_templates: 'true' }).done(function(listResponse) { var files = listResponse.data.resources; $.each(files, function(index,file) { $PDFshower.append( '<embed src="'+file.external_url+'" width="580" height="700" type="application/pdf">' ); } ); }); //arguments[0] is the HTML widget arguments[0].append($PDFshower); </script> Link to comment Share on other sites More sharing options...
ADT Posted October 4, 2016 Author Share Posted October 4, 2016 1 minute ago, Graham Quince said: Hi @ADT I've created a site on your FrogLearn (and shared it with you). It contains the following code which is set to your Staff Bulletin folder. <script> // Create a div, and give it is unqiue ID $PDFshower = $("<div>", { id: Frog.Utilities.generateSimpleId() } ); Frog.Model .api('resources.getOfType', { sources: ["native","site"], type: 'staff', author: 'true', root_folder: 'EDAAA0E92002F81B92C2DFCD917CAC05E532634CEE5FEBD9', folder: 'B68B6DC42002FFB76B9C0F476C8F3400E8D1320C3617F221', filter: null, exclude_templates: 'true' }).done(function(listResponse) { var files = listResponse.data.resources; $.each(files, function(index,file) { $PDFshower.append( '<embed src="'+file.external_url+'" width="580" height="700" type="application/pdf">' ); } ); }); //arguments[0] is the HTML widget arguments[0].append($PDFshower); </script> I just noticed!!! Does that mean it will automatically display the PDF in that folder???? Link to comment Share on other sites More sharing options...
ADT Posted October 4, 2016 Author Share Posted October 4, 2016 Doesn't mater I answered my own question!!! Thanks Lefty!!!!!! Or is it your right arm??? Link to comment Share on other sites More sharing options...
adamw Posted October 4, 2016 Share Posted October 4, 2016 On 9/28/2016 at 11:59, ADT said: We have a weekly bulletin that we access via Frog!! This is a PDF file uploaded to a shared folder in school documents the file name includes the current week date!!! I want to know how I could display this on a page rather than staff having to download it!!! And before anyone asks yes this was probably answered on the old Forum but as that is dying............. Just to let you know, one of our developers has been working on a embed PDF widget, which should make doing this a whole lot easier for you guys! Keep an eye out for this appearing soon 2 Link to comment Share on other sites More sharing options...
ADT Posted October 4, 2016 Author Share Posted October 4, 2016 3 minutes ago, adamw said: Just to let you know, one of our developers has been working on a embed PDF widget, which should make doing this a whole lot easier for you guys! Keep an eye out for this appearing soon Never mind teasing us... get it made!!! Link to comment Share on other sites More sharing options...
Graham Quince Posted October 5, 2016 Share Posted October 5, 2016 18 hours ago, ADT said: Doesn't mater I answered my own question!!! Thanks Lefty!!!!!! Or is it your right arm??? It's my left arm that was broken and i am left-handed, but the surgery went well and this is my last week with a sling. i managed to use both hands to type this post. Link to comment Share on other sites More sharing options...
ADT Posted October 5, 2016 Author Share Posted October 5, 2016 6 minutes ago, Graham Quince said: It's my left arm that was broken and i am left-handed, but the surgery went well and this is my last week with a sling. i managed to use both hands to type this post. I had heard it was your dominant arm... o well hopefully you'll be back up to full speed soon enough.... Link to comment Share on other sites More sharing options...
ADT Posted October 12, 2016 Author Share Posted October 12, 2016 On 04/10/2016 at 14:51, Graham Quince said: Hi @ADT I've created a site on your FrogLearn (and shared it with you). It contains the following code which is set to your Staff Bulletin folder. <script> // Create a div, and give it is unqiue ID $PDFshower = $("<div>", { id: Frog.Utilities.generateSimpleId() } ); Frog.Model .api('resources.getOfType', { sources: ["native","site"], type: 'staff', author: 'true', root_folder: 'EDAAA0E92002F81B92C2DFCD917CAC05E532634CEE5FEBD9', folder: 'B68B6DC42002FFB76B9C0F476C8F3400E8D1320C3617F221', filter: null, exclude_templates: 'true' }).done(function(listResponse) { var files = listResponse.data.resources; $.each(files, function(index,file) { $PDFshower.append( '<embed src="'+file.external_url+'" width="580" height="700" type="application/pdf">' ); } ); }); //arguments[0] is the HTML widget arguments[0].append($PDFshower); </script> So could you get this to display a excel spreadsheet like your bug list??? Link to comment Share on other sites More sharing options...
Graham Quince Posted October 12, 2016 Share Posted October 12, 2016 Unfortunately, you can't display a spreadsheet or document in the same way. For the Bugs list, I used an Office365 account and Share the document live to anyone with the link. At that point, I was then able to embed it like a regular web page. Link to comment Share on other sites More sharing options...
ADT Posted October 12, 2016 Author Share Posted October 12, 2016 27 minutes ago, Graham Quince said: Unfortunately, you can't display a spreadsheet or document in the same way. For the Bugs list, I used an Office365 account and Share the document live to anyone with the link. At that point, I was then able to embed it like a regular web page. That sounds like to much like hard work to me!!!!!!!!!! PDFed it is!!! 1 Link to comment Share on other sites More sharing options...
ADT Posted November 2, 2016 Author Share Posted November 2, 2016 @Graham Quince here's one for you..... So we have our weekly bulletin displayed using this code.... works no problems in chrome... but not in internet explorer seams to try and download then gives up!! Our phone list is also on using the same code... works fine in both!! The only thing I can see is a difference in file size!!! Phone list less than a MB... Bulletin almost 3mb!! 1 Link to comment Share on other sites More sharing options...
ADT Posted November 4, 2016 Author Share Posted November 4, 2016 (edited) @Graham Quince never mind liking... get your code fixed!!! Or that actual PDF widget made!! Edited November 4, 2016 by ADT Link to comment Share on other sites More sharing options...
Graham Quince Posted November 4, 2016 Share Posted November 4, 2016 Just to make things really annoying for you, i've dialled into Gosforth's platform looked at the staff bulletin on both Chrome and IE and the PDF loaded into both browsers (eventually). I have a vague memory of learning that IE did have a file size limit whih might be what you're hitting. Link to comment Share on other sites More sharing options...
ADT Posted November 4, 2016 Author Share Posted November 4, 2016 1 hour ago, Graham Quince said: Just to make things really annoying for you, i've dialled into Gosforth's platform looked at the staff bulletin on both Chrome and IE and the PDF loaded into both browsers (eventually). I have a vague memory of learning that IE did have a file size limit whih might be what you're hitting. Well that's no help.... Link to comment Share on other sites More sharing options...
ADT Posted November 4, 2016 Author Share Posted November 4, 2016 Although strangly this weeks seams to have loaded straight away... and its 3mb+??? Link to comment Share on other sites More sharing options...
ADT Posted December 20, 2016 Author Share Posted December 20, 2016 On 04/11/2016 at 12:11, Graham Quince said: Just to make things really annoying for you, i've dialled into Gosforth's platform looked at the staff bulletin on both Chrome and IE and the PDF loaded into both browsers (eventually). I have a vague memory of learning that IE did have a file size limit whih might be what you're hitting. Well this is raising its head again... Not sure if its a IE11 issue... the PDF plugin... or your dodgy code??? Whens the PDF ready widget coming out?? Link to comment Share on other sites More sharing options...
Graham Quince Posted December 20, 2016 Share Posted December 20, 2016 PDF widget is coming out as part of Dickens - which is looking like end of Jan/start of Feb. I'll dial in and see if i can spot anything Link to comment Share on other sites More sharing options...
Graham Quince Posted December 20, 2016 Share Posted December 20, 2016 Sorry @ADT, it's loading for me. Link to comment Share on other sites More sharing options...
ADT Posted December 20, 2016 Author Share Posted December 20, 2016 Which leaves me with IE11 settings... PDF reader version... Link to comment Share on other sites More sharing options...
Graham Quince Posted December 20, 2016 Share Posted December 20, 2016 It's strange. i've looked at it in IE and it's be fine, and the above code is using the browser's PDF reader, as far as I know. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now