Jump to content
Dawn Spears

Using files within the assets folder

Recommended Posts


I'm not sure of the best way to access the assets within my widgets assets folder. For example, if I have an image that I want to display on a canvas, I can use the following:

imageObj.src = "https://disraeli-bucks.frogos.net/app/file/resource/10E354602003064E38AADFB27ECC0A08B6D928AC51D3E2CA?1506677717";

To reference the image and it will display correctly. However if I use something like

imageObj.src = "assets/rhino.jpg";

nothing will display.


Is it necessary to use the full URL each time or am I being a bit daft?

Link to comment
Share on other sites

When I wanted a sound effect to play for the activity timer, i ended up using:


var baseURL=Frog.Utilities.getBaseUrl();


to point to the file.  I also had to publish the widget once, so get the file in the correct location.   Once there, i was able to continue editing my code and use the file.

@Chris.Smith knows more about it than I do though

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By Natasha Din-Gabisi
      Hi all
      I am new to this forum and am trying to modify the masonary gallery so that it displays the images in a slideshow but I'm having real problems.  Go easy on me I'm a newbie!  So my first approach is this but it doesn't work
      My second approach would be to upload a slider.js .  I tried uploading the file to the widget but I can't so where do I upload it?
      Com.Frog.Controllers.Widget.extend('Widget.Carousel', {
          }, {
              prefs: {
                  selectFolder: {
                      type: "sharedfolder",
                      defaultValue: "|"
              packageID: '5974C4D12001B59B10329F5A6600A10004F91B0C18A6DDA8',
               * Constructor. Runs when the widget is first loaded.
               * @method init
              init: function() {},
               * Event fired by the Site Controller.
               * @event 'widget.live'
              'widget.live': function(el, ev, data) {
                 var selectedFolderUUID = this.prefs.selectFolder.value;
                 selectedFolderUUID = selectedFolderUUID.substring(0, selectedFolderUUID.indexOf('|')); 
                  if (selectedFolderUUID !== '') {
                              .api('resources.getOfType', {
                                  sources: ["native","site"],
                                  type: 'personal',
                                  author: 'true',
                                  root_folder: 'EDAAA0E92002F81B92C2DFCD917CAC05E532634CEE5FEBD9',
                                  folder: selectedFolderUUID,
                                  filter: null,
                                  exclude_templates: 'true'
                              }).done(function(response) {
                               var fileArray = $.map(response.data.resources, function(el) { return el; });
                                  $.each(fileArray, function(index, value){
                                      if (value.attachment.file.mime.type === 'image') {
                                          var newImg = $('<div class="img-item ' + '" data-image-title="' + value.attachment.name + '" data-updated-at="' + value.attachment.updated + '">                              <img src="file/asset/' + value.uuid + '.' + value.attachment.file.mime.ext + '?height=800&width=800&scale_mode=fill"></div>');
                                          thisElement.find('.slide').append( newImg );
                              $('#right-arrow').click(function() {
                              var currentSlide = $('.slide.active');
                              var nextSlide = currentSlide.next();
                              if(nextSlide.length == 0) {
                              var currentSlide = $('.slide.active');
                              var prevSlide = currentSlide.prev();
                              if(prevSlide.length == 0){
       <div class="content"> 
      <div id ="slide">
         <div class="slide"></div>     
          <p id ="left-arrow"> Next </p>
          <p id="right-arrow"> Prev </p>
      Thanks in advance for your help.
  • Create New...