app/views/editor/_main_image.html.erb
<div class="col-lg-3 order-lg-2">
<h3 class="d-md-none d-lg-block">Main image <i id="main-image-spinner" class="hidden icon-spinner icon-spin"></i></h3>
<% if @node && @node.main_image_id != 0 %>
<img class="rounded" id="leadImage" style="width:100%;<% unless (@node && @node.main_image) || params[:main_image] || params[:i] %>display:none;<% end %>"
src="<% if @node && @node.main_image %>
<%= @node.main_image.path(:default) %>
<% elsif params[:main_image] && Image.find_by(id: params[:main_image]) %>
<%= Image.find_by(id: params[:main_image]).path %>
<% elsif @image %>
<%= @image.path(:default) %>
<% end %>" />
<% end %>
<div class="side-dropzone" id="side-dropzone">
<p class="prompt">
<span class="d-md-none d-lg-block">
Drag and drop to add an image, or
</span>
<!-- http://stackoverflow.com/questions/11235206/twitter-bootstrap-form-file-element-upload-button -->
<label style="cursor:pointer;" for="side-fileinput">
<input id="side-fileinput" type="file" name="image[photo]" style="display:none;" />
<a class="d-none d-md-block">choose one</a>
<span class="d-md-none">
<i class="fa fa-upload"></i>
<a>Upload image</a>
</span>
</label>
</p>
<br class="d-md-none d-lg-block" />
</div>
<div id="side-progress" style="display:none;width:100%;" class="progress progress-striped active">
<div class="progress-bar" role="progressbar" style="width: 0%;"></div>
</div>
<p class="side-uploading" style="display:none;padding-top:4px;color:#aaa;">Uploading...</p>
<% if @node && @node.images && @node.images.length > 0 %>
<p>Select a previous image:</p>
<p>
<select name="image_revision" id="image_revision">
<% @node.images.each_with_index do |i,index| %>
<option id="<%=i.id%>" value="<%=i.path(:default)%>" <% if i.id == @node.main_image_id %>selected='selected'<% end %> ><%= index + 1 %>: <%= i.filename %></option>
<% end %>
<option id="0" value="none" <% if @node.main_image_id == 0 %>selected='selected'<% end %> >None</option>
</select>
</p>
<% end %>
</div>