app/views/creatives/_form.html.erb
<%= render("/shared/alert", missing_image_formats_alert.merge(alert_type: "danger")) if missing_image_formats? %>
<%= simple_form_for creative, html: {
class: "js-validate",
data: {controller: "creative-form"}},
wrapper: :front_form do |f| %>
<%= render(Form::ErrorMessageComponent.new(object: creative)) %>
<%= f.hidden_field :creative_type, data: {target: "creative-form.creativeType"} %>
<%= render CardComponent.new do %>
<%= render Card::BodyComponent.new do %>
<%= render(Card::TitleComponent.new(classes: "mb-4")) { "Details" } %>
<div class="row">
<%= tag.div f.input(:name, required: true), class: "col-12 col-md-4 mb-3" %>
<div class="col-12 col-md-4 mb-3">
<div class="js-form-message js-focus-state string required property_name">
<label class="form-label string required" for="property_name">Advertiser <abbr title="required">*</abbr></label>
<input type="text" class="form-control" placeholder="<%= current_user.name %>" aria-label="<%= current_user.name %>" readonly />
</div>
</div>
<% if authorized_user.can_edit_creatives_without_approval?(Current.organization) %>
<div class="col-12 col-md-4 mb-3">
<%= f.input(:status, label: "Status", collection: creative_statuses_for_select,
input_html: {class: "form-control", data: {controller: "select"}}) %>
</div>
<% else %>
<%= f.hidden_field :status, value: ENUMS::CREATIVE_STATUSES::PENDING %>
<% end %>
</div>
<div class="row p-2">
<div class="col-lg-6">
<div class="row">
<div class="copy-wrapper col-12 p-0 py-2 mb-2" data-target="creative-form.copyWrapper">
<div class="text-center pb-2 text-dark" data-target="creative-form.copyWarningWrapper">
<span class="d-block">Your ad copy is <span class="actual-length text-dark" data-target="creative-form.adLength">0</span> of <strong class="text-dark">85</strong> characters</span>
<span class="d-block">Your Call to Action copy is <span class="actual-length text-dark" data-target="creative-form.ctaLength">0</span> of <strong class="text-dark">20</strong> characters</span>
</div>
<%= tag.div f.input(:headline, required: true, placeholder: "Headline ð", input_html: {data: {target: "creative-form.inputHeadline", action: "change->creative-form#setHeadline keyup->creative-form#setHeadline"}}), class: "col-12 mb-3" %>
<%= tag.div f.input(:body, required: true, placeholder: "Your body will go here. You can use an emoji to help catch their eye ðĪŠ", input_html: {rows: 2, data: {target: "creative-form.inputBody", action: "change->creative-form#setBody keyup->creative-form#setBody"}}), class: "col-12 mb-3" %>
<%= tag.div f.input(:cta, label: "Call to Action", required: true, placeholder: "e.g. Learn more", hint: "Only used with the `sponsored-text` template", input_html: {data: {target: "creative-form.inputCta", action: "change->creative-form#setCta keyup->creative-form#setCta"}}), class: "col-12 mb-3" %>
</div>
<% if missing_image_formats? %>
<div class="col-12 my-2">
<h4><%= missing_image_formats_alert[:heading] %></h4>
<p><%= missing_image_formats_alert[:body] %></p>
<%= missing_image_formats_alert[:cta] %>
</div>
<% else %>
<div class="col-12 mb-2">
<div class="form-group required select creative_icon_image">
<label class="form-label select required" for="creative_icon_image">
Icon Image <abbr title="required">*</abbr> <small class="text-muted">(40x40)</small>
</label>
<select class="form-control custom-select required"
data-target="creative-form.inputIconBlobId"
data-action="change->creative-form#setIconImage"
data-toggle="selectpicker"
data-size="5"
required="required"
aria-required="true"
name="creative[icon_blob_id]"
id="creative_icon_image"
title="--- select an image ---"
required>
<% Current.organization.icon_images.each do |image| %>
<%= tag.option Image.new(image).display_name, value: image.blob_id,
data: {image_url: polymorphic_url(image)},
selected: (creative.icon_image || creative.cloned_images[:icon]) == image %>
<% end %>
</select>
</div>
</div>
<div class="col-12 mb-2">
<div class="form-group required select creative_small_image">
<label class="form-label select required" for="creative_small_image">
Small Image <abbr title="required">*</abbr> <small class="text-muted">(200Ã200)</small>
</label>
<select class="form-control custom-select required"
data-target="creative-form.inputSmallBlobId"
data-action="change->creative-form#setSmallImage"
data-toggle="selectpicker"
data-size="5"
required="required"
aria-required="true"
name="creative[small_blob_id]"
id="creative_small_image"
title="--- select an image ---"
required>
<% Current.organization.small_images.each do |image| %>
<%= tag.option Image.new(image).display_name, value: image.blob_id,
data: {image_url: polymorphic_url(image)},
selected: (creative.small_image || creative.cloned_images[:small]) == image %>
<% end %>
</select>
</div>
</div>
<div class="col-12 mb-2">
<div class="form-group required select creative_large_image">
<label class="control-label" for="creative_large_image">
Large Image <abbr title="required">*</abbr> <small class="text-muted">(260Ã200)</small>
</label>
<select class="form-control custom-select required"
data-target="creative-form.inputLargeBlobId"
data-action="change->creative-form#setLargeImage"
data-toggle="selectpicker"
data-size="5"
required="required"
aria-required="true"
name="creative[large_blob_id]"
id="creative_large_image"
title="--- select an image ---"
required>
<% Current.organization.large_images.each do |image| %>
<%= tag.option Image.new(image).display_name, value: image.blob_id,
data: {image_url: polymorphic_url(image)},
selected: (creative.large_image || creative.cloned_images[:large]) == image %>
<% end %>
</select>
</div>
</div>
<div class="col-12 mb-2">
<div class="form-group required select wide_large_image">
<label class="form-label select required" for="creative_wide_image">
Wide Image <abbr title="required">*</abbr> <small class="text-muted">(512Ã320)</small>
</label>
<select class="form-control custom-select required"
data-target="creative-form.inputWideBlobId"
data-action="change->creative-form#setWideImage"
data-toggle="selectpicker"
data-size="5"
required="required"
aria-required="true"
name="creative[wide_blob_id]"
id="creative_wide_image"
title="--- select an image ---"
required>
<% Current.organization.wide_images.each do |image| %>
<%= tag.option Image.new(image).display_name, value: image.blob_id,
data: {image_url: polymorphic_url(image)},
selected: (creative.wide_image || creative.cloned_images[:wide]) == image %>
<% end %>
</select>
</div>
</div>
<% end %>
</div>
</div>
<div class="col-lg-6">
<div class="d-flex flex-column justify-content-between align-items-center">
<div class="p-4 mb-3 border-bottom">
<%= image_pack_tag "diagrams/anatomy-of-an-ad@2x.png", class: "img-fluid", alt: "Anatomy of an ad diagram", style: "max-height:325px;" %>
</div>
<h6 class="text-center">Preview</h6>
<div class="p-4">
<div id="creative-preview" class="shadow-lg" data-target="preview">
<!-- Square Preview -->
<div id="cf" data-template="square">
<span class="cf-wrapper">
<a href="javascript:;" class="cf-sponsored-by" target="_blank" rel="sponsored noopener">
<span class="cf-img-wrapper">
<%= image_tag creative.large_image || asset_pack_path("media/images/placeholders/missing-260x200.png"),
border: 0, height: 200, width: 260, class: "cf-img", alt: "large image preview",
data: {
target: "creative-form.previewImageUrl",
default_image_url: asset_pack_path("media/images/placeholders/missing-260x200.png")
} %>
</span>
<span class="cf-text">
<strong data-target="creative-form.previewHeadline">Gitcoin</strong>
<span data-target="creative-form.previewBody">ð° Use your Python skills to grow Open Source, while getting paid.</span>
<span data-target="creative-form.previewCta" class="cf-cta">Get started</span>
</span>
</a>
<div class="cf-footer">
<a href="javascript:;" class="cf-powered-by" target="_blank" rel="sponsored noopener">
<em>ethical</em> ad by CodeFund
</a>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<% end %>
<%= render Card::FooterComponent.new do |component| %>
<% component.with(:actions) do %>
<%= cancel_button(creatives_path) %>
<%= f.submit "Save Creative", class: "btn btn-primary" %>
<% end %>
<% end %>
<% end %>
<% end %>