add cover image

This commit is contained in:
BOYA,CHIU 2021-08-11 11:27:57 +08:00
parent 0d6b3a472b
commit 49757a9e2f
10 changed files with 188 additions and 20 deletions

View File

@ -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;
}
}
}

View File

@ -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

View File

@ -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

View File

@ -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>

View File

@ -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

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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}"