add cover image

app/assets/stylesheets/web_resources_front.css.scss

@@ -0,0 +1,32 @@
+// Place all the styles related to the act controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+.index-link.index2 li.col-md-4{
+    float: left;
+    .link-img-wrap {
+        overflow: hidden;
+        height: 12.5em;
+        img {
+            max-height: 100%;
+            max-width: 100%;
+            height: auto;
+            width: auto;
+        }
+    }
+    a:hover .link-title{
+        color: #0032b2;
+        font-size: 1.15em;
+    }
+    @media (min-width: 992px){
+        width: 33.3333%;
+    }
+    @media (min-width: 577px) and (max-width: 991px){
+        width: 50%;
+    }
+    @media (max-width: 576px){
+        width: 100%;
+        .alink-img-wrap {
+            height: auto;
+        }
+    }
+}

app/controllers/web_resources_controller.rb

@@ -1,6 +1,7 @@
 class WebResourcesController < ApplicationController
   require 'nokogiri'
   def index
+    OrbitHelper.render_css_in_head(["web_resources_front"])
     links = WebLink.where(:title.ne => "").can_display.filter_by_categories
     web_link = links.collect do |link|
        statuses = link.statuses_with_classname.collect do |status|
@@ -19,10 +20,14 @@ class WebResourcesController < ApplicationController
     if text.blank? && doc.css("img").count != 0
       text = doc.css("img").map{|img| img.attr("alt") rescue ""}.select{|t| t.present?}.first
     end
+    desc = link.image_description
+    desc = (desc.blank? ? "web resource image" : desc)
     {
       "title" => link.title,
       "title_text" => text,
-      "context" => link.context,
+      "img_src" => link.image.thumb.url || "/assets/announcement-default.jpg",
+      "img_description" => desc,
+      "context" => nl2br(link.context.to_s),
       "statuses" => statuses,
       "category" => link.category.title,
       "link_to_show" => link.url,
@@ -60,7 +65,7 @@ class WebResourcesController < ApplicationController
     {
       "title" => link.title,
       "title_text" => text,
-      "context" => link.context,
+      "context" => nl2br(link.context.to_s),
       "statuses" => statuses,
       "link_to_show" => link.url,
       "target" => target
@@ -72,4 +77,7 @@ class WebResourcesController < ApplicationController
     }
   end
   
+  def nl2br(val)
+    val.gsub(/\r\n/, '<br />').html_safe
+  end
 end

app/models/web_link.rb

@@ -8,6 +8,9 @@ class WebLink
   include OrbitTag::Taggable
   include OrbitCategory::Categorizable
 
+
+  field :image_description, type: String, localize: true
+  mount_uploader :image, ImageUploader
   field :title, localize: true
   field :context, localize: true
   field :order_position, type: Integer, default: -1

app/views/admin/web_resources/_form.html.erb

@@ -1,5 +1,7 @@
 <% content_for :page_specific_css do %>
   <%= stylesheet_link_tag "lib/main-forms" %>
+  <%= stylesheet_link_tag "lib/fileupload" %>
+  <%= stylesheet_link_tag "lib/main-list" %>
 <% end %>
 <% content_for :page_specific_javascript do %>
   <%= javascript_include_tag "lib/bootstrap-fileupload" %> 
@@ -15,6 +17,7 @@
     <li class="active"><a href="#basic" data-toggle="tab"><%= t(:basic) %></a></li>
     <li><a href="#status" data-toggle="tab"><%= t(:status) %></a></li>
     <li><a href="#tag" data-toggle="tab"><%= t(:tags) %></a></li>
+    <li><a href="#imageupload" data-toggle="tab"><%= t('web_link.image') %></a></li> 
   </ul>
 
   <!-- Module -->
@@ -66,6 +69,51 @@
 
     </div>
     
+    <!-- Images Module -->
+    <div class="tab-pane fade" id="imageupload">
+
+      <!-- Images Upload -->
+      <div class="control-group">
+        <label class="control-label muted"><%= t(:image) %></label>
+        <div class="controls">
+          <div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @link.image.file %>" data-provides="fileupload">
+            <div class="fileupload-new thumbnail pull-left">
+              <% if @link.image.file %>
+                <%= image_tag @link.image %>
+              <% else %>
+                <img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" />
+              <% end %>
+            </div>
+            <div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
+            <span class="btn btn-file">
+              <span class="fileupload-new"><%= t(:select_image) %></span>
+              <span class="fileupload-exists"><%= t(:change) %></span>
+              <%= f.file_field :image %>
+            </span>
+            <a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
+            <div class="controls" data-toggle="buttons-checkbox">
+              <label class="checkbox inline btn btn-danger fileupload-remove">
+                <%= f.check_box :remove_image %><%= t(:remove) %>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+        <% @site_in_use_locales.each do |locale| %>
+          <%= f.fields_for :image_description_translations do |f| %>
+            <div class="control-group">
+            <label class="control-label muted" for="image_description_<%= locale.to_s %>"><%= t(:description) + " (#{t(locale.to_s)})" %></label>
+              <div class="controls">
+                <%= f.text_field locale, value: (@link.image_description_translations[locale.to_s] rescue nil) %> 
+              </div>
+            </div>
+          <% end %>
+        <% end %>
+
+    </div>
+    
+  </div>
+
 
   </div>
 
@@ -91,7 +139,7 @@
             <label class="control-label muted"><%= t(:title) %></label>
             <div class="controls">
               <%= f.fields_for :title_translations do |f| %>
-                <%= f.text_area locale, class: "input-block-level ckeditor", placeholder: t(:title), value: (@link.title_translations[locale] rescue nil) %>
+                <%= f.text_area locale, class: "input-block-level ckeditor_reduce", placeholder: t(:title), value: (@link.title_translations[locale] rescue nil) %>
               <% end %>
             </div>
           </div>
@@ -101,7 +149,7 @@
             <label class="control-label muted"><%= t(:description) %></label>
             <div class="controls">
               <%= f.fields_for :context_translations do |f| %>
-                <%= f.text_area locale, rows: 5, class: "input-block-level", value: (@link.context_translations[locale] rescue nil) %>
+                <%= f.text_area locale, rows: 5, class: "input-block-level ckeditor", value: (nl2br(@link.context_translations[locale]) rescue nil) %>
               <% end %>
             </div>
           </div>
@@ -137,5 +185,65 @@
     <%= f.submit t('submit'), class: 'btn btn-primary' %>
     <%= link_to t('cancel'), admin_web_resources_path, :class=>"btn" %>  
   </div>
+  <script type="text/javascript">
+    $(document).ready(function(){
+      var config = {}
+      config.autoGrow_minHeight = 50;
+      config.allowedContent = {
+        $1: {
+          match: function( element ) {
+            const v = element;
+            return true;
+          },
+          // Use the ability to specify elements as an object.
+          elements: CKEDITOR.dtd,
+          attributes: true,
+          styles: true,
+          classes: true
+        }
+      };
+      config.toolbar = [
+        { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
+        { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
         
+        { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
+        '/',
+        { name: 'insert', items: [ 'SpecialChar'] },
+        { name: 'styles', items: [ 'Font' ] },
+        { name: 'colors', items: [ 'TextColor', 'BGColor' ] }
+      ];
+
+      var ckeditor_reduce = $('.ckeditor_reduce')
+      ckeditor_reduce.each(function(i,v){
+        var editor = CKEDITOR.replace(v,config);
+        editor.on( 'paste', function( evt ) {
+          // Create a standalone filter passing 'p' and 'b' elements.
+          var filter = new CKEDITOR.filter(evt.editor);
+          // Now disllow color attribute & colour background-color, text-decoration styles.
+          // Format "elements [attributes, attr2]{styles}(classes)"."
+          // Default is '*[color]; *{color, background-color, text-decoration}'.
+          filter.allow({
+            '$1': {
+                // Use the ability to specify elements as an object.
+                elements: CKEDITOR.dtd,
+                attributes: true,
+                styles: true,
+                classes: true
+            }
+          });
+          filter.disallow('img; *[font-size]; *{font-size, background-color, text-decoration}');
+          // Filter it now.
+          var fragment = CKEDITOR.htmlParser.fragment.fromHtml(evt.data.dataValue);
+          var writer = new CKEDITOR.htmlParser.basicWriter();
+          filter.applyTo(fragment);
+          fragment.writeHtml(writer);
+          var processed_html = writer.getHtml();
+          // Set the value of what will be pasted.
+          evt.data.dataValue = processed_html;
+          // Clean up - free up memory.
+          filter.destroy();
+        } );
+      });
+    });
+  </script>
 </div>

config/locales/en.yml

@@ -4,6 +4,7 @@ en:
   restful_actions:
     order: Order
   web_link:
+    image: Cover Image
     local: Open In Current page
     new_window: Open In New window
     type: Link Open Type

config/locales/zh_tw.yml

@@ -4,6 +4,7 @@ zh_tw:
   restful_actions:
     order: 排序
   web_link:
+    image: 封面圖片
     local: 當前視窗開啟
     new_window: 新視窗開啟
     type: 開啟方式

modules/web_resource/_web_res_widget1.html.erb

@@ -4,6 +4,9 @@
   </h3>
   <ul class="list-unstyled" data-level="0" data-list="web_link">
     <li class="widget-content">
+      <div class="link-img-wrap">
+        <img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+      </div>
       <a class="widget-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">{{title}}</a>
       <span data-list="statuses" data-level="1">
         <span class="label status {{status-class}}">{{status}}</span>

modules/web_resource/web_res_index1.html.erb

@@ -4,13 +4,18 @@
   </h1>
   <ul class="list-unstyled" data-list="web_link" data-level="0">
     <li class="index-content">
+      <a class="index-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">
+        <div class="link-img-wrap">
+          <img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+        </div>
         <h4>
-        <a class="index-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">{{title}}</a>
+          {{title}}
           <span data-list="statuses" data-level="1">
             <span class="label status {{status-class}}">{{status}}</span>
           </span>
         </h4>
         <small class="index-context">{{context}}</small>
+      </a>
     </li>
   </ul>
 </div>

modules/web_resource/web_res_index2.html.erb

@@ -4,13 +4,20 @@
   </h1>
   <ul class="list-unstyled" data-list="web_link" data-level="0">
     <li class="index-content col-md-4 col-sm-4">
+      <a class="index-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">
+        <div class="link-img-wrap">
+          <img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+        </div>
         <h4>
-        <a class="index-content-title" href="{{link_to_show}}" target="_blank" title="{{title_text}}">{{title}}</a>
+          <span class="link-title">
+            {{title}}
+          </span>
           <span data-list="statuses" data-level="1">
             <span class="label status {{status-class}}">{{status}}</span>
           </span>
         </h4>
         <small class="index-context">{{context}}</small>
+      </a>
     </li>
   </ul>
 </div>

web_resource.gemspec

@@ -8,7 +8,7 @@ all_template = Dir.glob(template_path+'/*/')
 puts 'copying module'
 all_template.each do |folder|
   if !folder.include?('mobile')
-    if folder.split('/')[-1] != 'mobile' && Dir.exist?("#{folder}/modules/")
+    if folder.split('/')[-1] != 'mobile'
       begin 
         system ('cp -r '+ app_path + '/modules/. ' + folder+'/modules/.')
         puts "Updating websource to #{folder}"