attachinary

attachinary copied to clipboard

Hi! How can I customize attachinary to display the progress bars and some more fancy like the jquery plugin?

Regards

Hello @jlondom2,

You can customize the template as you want, jquery-uploader is included but without all the fanciness

You can change the template in $.attachinary.config.template, like:

$.attachinary.config.template = '\
  <ul>\
    <% for(var i=0; i<files.length; i++){ %>\
      <li>\
        <% if(files[i].resource_type == "raw") { %>\
          <div class="raw-file"></div>\
        <% } else { %>\
          <img\
            src="<%= $.cloudinary.url(files[i].public_id, { "version": files[i].version, "format": "jpg", "crop": "fill", "width": 250, "height": 250 }) %>"\
            alt="" width="100" height="100" />\
        <% } %>\
        <a href="#" data-remove="<%= files[i].public_id %>"><i class="md md-clear md-2x"></i></a>\
      </li>\
    <% } %>\
  </ul>\
';

In my app the result is something like

@orlando I just installed attachinary, where are you seeing this config file? I don't see it anywhere. did you create it and put in a particular location?

@ruby-code you have that available when you add the attachinary JavaScript file to your application.js file https://github.com/assembler/attachinary/blob/master/lib/assets/javascripts/attachinary.js.coffee

So just create another javascript file (let's say, attachinary_template.js) and require it after the attachinary one.

# in application.js

//= require attachinary
//= require attachinary_template

That way you can override the template as you want

@orlando thanks, I didn't quite mess with the template for image sizing previews yet however I quickly tested out the attachinary form field. It works, I can drag and drop onto the attachinary_input button and all, however image previews do not show once images are attached. Is there a specific div container attachinary looks to put the image previews in? I have a big form with many different attributes for the model attachinary is associated with, fyi.

Maybe I'm just not in the loop.

thanks again

@ruby-code the default configuration generates an image https://github.com/assembler/attachinary/blob/master/lib/assets/javascripts/attachinary.js.coffee#L16-L18, so the image should be there. Maybe you are missing some css for the image to show up. Check in your developer tools console and inspect the image container.

Cheers!

@orlando thanks. I will look into it more tomorrow. tired and time for bed, I am getting something raised in the console saying "Uncaught Unknown cloud_name"