Set thumbnail in Javascript

(Anthony) #1

I'm using the javascript api to set various attributes and metadata of assets. Specifically at the moment news assets but probably events and others in the future. In general, all working fine, I am setting the name, summary, body etc.


However I cannot seem to find the right attribute name to set the thumbnail to the ID of an image asset thats already loaded in the system. I tried the obvious setAttribute(<assetid>, "thumbnail", "12345", callbackFunction) (where 12345 is example asset ID of an existing image asset). I also tried other obvious possibilities like "thumb" but in every case the return value says invalid attribute name.



Does anyone know the right attribute name? Or perhaps its not an attribute, in which case how do I set it through the javascript API? Note that I don't need or want to upload an actual image, all the possible images are in the system already and the user is just choosing which one they want to use.



Thanks

Anthony

Set thumbnail for a page using javascript api
Set thumbnail for a page using javascript api
(Anthony Barnes) #2

The thumbnail of an asset is not actually an attribute you can set. This is where the linking system of Matrix comes into play. There is a relationship between the asset and it's thumbnail and a thumbnail can be shared across many different assets. When you set a thumbnail of an asset Matrix adds an entry in the link table of type 'notice' and link value 'thumbnail' on the image asset (can check this by viewing the linking screen).


You can try using the createLink function of the JS API. I haven't tried this myself, in EES we solved the issue by posting back thumbnail data to _edit (which we can do because EES is an editing interface, but it won't work outside of this context).

(Anthony) #3

Thanks, that was really helpful! I've done a quick test and yes, it seems to work. Found a few tricks along the way - it fails if you have a thumbnail already so you have to call removeLink() first, then make sure to put the createLink() in the callback otherwise it fires too quickly and still fails. Another challenge was finding that removeLink() takes a string "SQ_LINK_NOTICE" but createLink() takes an int which (lucky search elsewhere in this forum) has magic undocumented value of 8 for the equivalent!


I need to test some more and tidy up the code but if all is still good I'll pop back here in a few days and paste the code for the benefit of anyone else searching in the future. Meanwhile if anyone else has tried this out and can share any similar tricks, do let me know!



Thanks

Anthony

(Nic Hubbard) #4

[quote]
has magic undocumented value of 8 for the equivalent!

[/quote]



Link types are bitwise, so they are:

Type 1: 1

Type 2: 2

Type 3: 4

Notice: 8



Status' also use bitwise, and go all the way up to 256. :slight_smile:

(Anthony) #5

A bit later than i planned - life is hectic! But here is the code I'm using for the benefit of anyone finding this post and trying to do something similar. Note I have found one problem with some possibly corrupt image assets not being removed but hopefully that wont affect most people (I've started a new thread for help on that).


To make the below work, the user logged in must have write access to all three assets - the old thumbnail, the new thumbnail and the actual asset you want to update. The references to %globals_get_NewsAsset% are because my page is called with a querystring ?NewsAsset=nnnn telling it which asset its working with. Note the use of ^empty:0 in a few places - if the value isn't set you have to output something else your javascript wont compile and nothing will work at all! The variable mNewThumb gets set elsewhere in the code - I use an asset lister to show a range of possible images and an uploader to bring in a new one, but by the time the user saves the page we know the asset ID they want to set.


    
      function assetDoThumb()
      {
    if (mCurrentThumb != mNewThumb)
    {
      // Remove link and create new one
      if (%globals_get_NewsAsset^as_asset:asset_thumbnail_assetid^empty:0% != 0)
      {
        // There is something there that we need to remove
        removeLink( %globals_get_NewsAsset% , %globals_get_NewsAsset^as_asset:asset_thumbnail_assetid^empty:0% , "SQ_LINK_NOTICE", "thumbnail", assetSetLink);
      }
      else
      {
        //Check there is a new thumb required, and jump to the code that adds it
        if (mNewThumb != 0)
        {
          assetSetLink({"success":"OK"});
        }
        else
        {
          //Nothing to do, jump to the end which gets us out of here
          assetEditedRedirect();
        }
      }
    }
    else
    {
      //Nothing to do, jump to the end which gets us out of here
      assetEditedRedirect();
    }
      }
    
      function assetSetLink(result)
      {
    if (result.error)
    {
      alert("There was a technical problem removing the old thumbnail image.");
      assetEditedRedirect();
    }
    else
    {
      //We are good to go set up the new thumbnail
      createLink( %globals_get_NewsAsset% , mNewThumb, 8, "thumbnail", '', '', '', assetEditedRedirect);
    }
      }


There's probably a load of better ways to do this and my code is probably not as elegant as some, but it does the job! There's really only two lines above that do anything useful (removeLink and createLink) the rest is just checking for different scenarios.
(Arivarasan) #6

Hi, i want to assign thumbnail to the page using java-script API through front-end ,
i want to run onclick function in frontebd so that thumbnail automatically assign according to asset id of the page .
please anyone can help ?
Thanks