Add banner to campaigns

app/models/campaign.rb

@@ -13,8 +13,8 @@ class Campaign < ActiveRecord::Base
 		:remove_main_image, # for carrierwave
 		:background_image,
 		:remove_background_image, #bool carrierwave
-    :custom_banner,
+    :banner_image,
-    :remove_custom_banner,
+    :remove_banner_image,
 		:published,
 		:video_url, #str
 		:vimeo_video_id,
@@ -52,7 +52,7 @@ class Campaign < ActiveRecord::Base
 
 	mount_uploader :main_image, CampaignMainImageUploader
 	mount_uploader :background_image, CampaignBackgroundImageUploader
-	mount_uploader :custom_banner, CampaignCustomBannerUploader
+	mount_uploader :banner_image, CampaignBannerImageUploader
 
 	has_many :donations
 	has_many :charges, through: :donations

app/uploaders/campaign_banner_image_uploader.rb

@@ -0,0 +1,16 @@
+# License: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later
+class CampaignBannerImageUploader < CarrierWave::Uploader::Base
+	include CarrierWave::MiniMagick
+
+	def store_dir
+		"uploads/campaigns/#{mounted_as}/#{model.id}"
+	end
+
+	def extension_white_list
+		%w(jpg jpeg png)
+	end
+
+	def cache_dir
+		"#{Rails.root}/tmp/uploads"
+	end
+end

app/uploaders/campaign_custom_banner_uploader.rb

@@ -1,39 +0,0 @@
-class CampaignCustomBannerUploader < CarrierWave::Uploader::Base
-
-	# Include RMagick or MiniMagick support:
-	# include CarrierWave::RMagick
-	include CarrierWave::MiniMagick
-
-	# Include the Sprockets helpers for Rails 3.1+ asset pipeline compatibility:
-	# include Sprockets::Helpers::RailsHelper
-	# include Sprockets::Helpers::IsolatedHelper
-
-	# Override the directory where uploaded files will be stored.
-	# This is a sensible default for uploaders that are meant to be mounted:
-	def store_dir
-		"uploads/campaigns/#{mounted_as}/#{model.id}"
-	end
-
-	# Process files as they are uploaded:
-	# process :scale => [200, 300]
-	#
-	# def scale(width, height)
-	#		# do something
-	# end
-
-	# Add a white list of extensions which are allowed to be uploaded.
-	# For images you might use something like this:
-	def extension_white_list
-		%w(jpg jpeg png)
-	end
-
-	# Override the filename of the uploaded files:
-	# Avoid using model.id or version_name here, see uploader/store.rb for details.
-	# def filename
-	#		"something.jpg" if original_filename
-	# end
-
-	def cache_dir
-		"#{Rails.root}/tmp/uploads"
-	end
-end

app/views/campaigns/_settings_modal.html.erb

@@ -92,20 +92,25 @@
         </fieldset>
       </section>
 
-      <% if @nonprofit.custom_layout %>
+      <hr>
-        <hr>
+      <section class='layout--two u-overflow--hidden'>
-
+        <% if @nonprofit.custom_layout %>
-        <section class='layout--one u-overflow--hidden'>
           <fieldset>
-            <label>Banner <small>(1200x120)</small></label>
+            <label>Banner <small>(1000x120)</small></label>
             <p><small>Custom image at the very top of the campaign page</small></p>
-            <div class='image-upload u-inlineBlock' style='background-image: url("<%= @campaign.custom_banner_url %>");'>
+            <% if @campaign.banner_image_url.present? %>
-              <span><i class='fa  fa-pencil'></i> Edit</span>
+              <div class='image-upload u-inlineBlock' style='background-image:url(<%= @campaign.banner_image_url %>)'>
-              <input type='file' name='campaign[custom_banner]'>
+                <!--= on 'click' (open_modal 'uploadBannerImage') -->
-            </div>
+                <span><i class='fa  fa-pencil'></i> Edit</span>
+              </div>
+            <% else %>
+              <a class='button edit'>
+                <!--= on 'click' (open_modal 'uploadBannerImage')   -->
+                <i class='fa fa-plus'></i> Add Image </i>
+              </a>
+            <% end %>
           </fieldset>
-        </section>
+        <% end %>
-      <% end %>
 
 			<hr>
 

app/views/components/_upload_banner_image.html.erb

@@ -0,0 +1,31 @@
+<%- # License: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later -%>
+<div class='modal' id='uploadBannerImage'>
+  <%= render 'common/modal_header', title: 'Banner Image' %>
+	<div class='modal-body'>
+
+    <fieldset class='u-centered'>
+			<p>Select and upload a banner image for this page.</p>
+			<p class='u-marginBottom--20'>For best results, the image should be <strong>1000px by 120px</strong> in size.</p>
+			<form autosubmit action='<%= end_point %>' method='put' data-reload>
+				<div class='image-upload image-upload--large' style='background-image:url(<%= image_url ? image_url : '' %>)'>
+					<span><i class='fa fa-image'></i> Select</span>
+					<input type='file' name="<%= input_name %>" required>
+				</div>
+				<p class='u-color--red'>
+					<!--= show_if (length image_upload.error) -->
+					<small><!--= put image_upload.error --></small>
+				</p>
+				<div class='u-width--250 u-margin--auto'>
+					<button type='submit' class='button--small u-width--full u-marginTop--20' data-loading='Uploading...'>
+						Upload <%= image_url ? 'Different Image' : '' %>
+					</button>
+					<a class='button--small red u-marginTop--10 u-width--full' <%= image_url ? '' : 'disabled' %>>
+						<!--= on 'click' (confirm 'Are you sure?' remove_this_image -->
+						Remove Image
+					</a>
+				</div>
+			</form>
+		</fieldset>
+
+	</div> <!-- modal-body -->
+</div>

app/views/nonprofits/custom_campaign_layouts/safety_around_water.html.erb

@@ -63,9 +63,10 @@
 <% hide_title = @campaign.hide_title && @campaign_background_image ? true : false %>
 <% css_style = current_campaign_editor? ? "style='margin-top: 0'" : '' %>
 
-<div class='ymca-banner'></div>
-
 <main class="custom-campaign-layout" id="safety-around-water">
+  <div class='ymca-banner'>
+    <img src='<%= @campaign.banner_image.url %>' height=120>
+  </div>
 
   <%= render 'components/fundraising_pages/header',
   	image_url: @campaign_background_image,
@@ -167,6 +168,10 @@
 		end_point: "/nonprofits/#{@nonprofit.id}/campaigns/#{@campaign.id}",
 		image_url: @campaign_background_image,
 		input_name: 'campaign[background_image]' %>
+  <%= render 'components/upload_banner_image',
+		end_point: "/nonprofits/#{@nonprofit.id}/campaigns/#{@campaign.id}",
+		image_url: @campaign.banner_image.url,
+		input_name: 'campaign[banner_image]' %>
   <%= render 'components/custom_receipt_modal',
     title: 'Campaign Receipt Message',
     type: 'campaign',

db/migrate/201810202124322_add_banner_image_to_campaigns.rb

@@ -0,0 +1,5 @@
+class AddBannerImageToCampaigns < ActiveRecord::Migration
+  def change
+    add_column :campaigns, :banner_image, :string
+  end
+end

db/structure.sql

@@ -449,7 +449,8 @@ CREATE TABLE campaigns (
     campaign_template_id integer,
     parent_campaign_id integer,
     reason_for_supporting text,
-    default_reason_for_supporting text
+    default_reason_for_supporting text,
+    banner_image character varying(255)
 );
 
 
@@ -4427,3 +4428,5 @@ INSERT INTO schema_migrations (version) VALUES ('201810202124320');
 
 INSERT INTO schema_migrations (version) VALUES ('201810202124321');
 
+INSERT INTO schema_migrations (version) VALUES ('201810202124322');
+