Allow customizing Carbon Ads format

assets/javascripts/discourse/components/ad-slot.gjs

@@ -56,9 +56,9 @@ const adConfig = EmberObject.create({
     enabledSetting: "carbonads_serve_id",
     desktop: {
       "topic-list-top": "carbonads_topic_list_top_enabled",
-      "post-bottom": false,
+      "post-bottom": "carbonads_post_bottom_enabled",
       "topic-above-post-stream": "carbonads_above_post_stream_enabled",
-      "topic-above-suggested": false,
+      "topic-above-suggested": "carbonads_above_suggested_enabled",
     },
   },
   "adbutler-ad": {

assets/javascripts/discourse/components/carbonads-ad.gjs

@@ -5,18 +5,23 @@ import AdComponent from "./ad-component";
 export default class CarbonadsAd extends AdComponent {
   serve_id = null;
   placement = null;
+  format = null;
 
   init() {
     this.set("serve_id", this.siteSettings.carbonads_serve_id);
     this.set("placement", this.siteSettings.carbonads_placement);
+    this.set("format", this.siteSettings.carbonads_format);
     super.init();
   }
 
-  @discourseComputed("serve_id", "placement")
-  url(serveId, placement) {
-    return htmlSafe(
-      `//cdn.carbonads.com/carbon.js?serve=${serveId}&placement=${placement}`
-    );
+  @discourseComputed("serve_id", "placement", "format")
+  url(serveId, placement, format) {
+    let baseUrl = `//cdn.carbonads.com/carbon.js?serve=${serveId}&placement=${placement}`;
+    if (format) {
+      baseUrl += `&format=${format}`;
+    }
+
+    return htmlSafe(baseUrl);
   }
 
   @discourseComputed

assets/stylesheets/adplugin.scss

@@ -140,7 +140,7 @@
   }
 }
 
-#carbonads {
+#carbonads:not(#carbon-cover *) {
   display: block;
   overflow: hidden;
   padding: 1em;
@@ -150,31 +150,31 @@
   margin-bottom: 15px;
 }
 
-#carbonads span {
+#carbonads:not(#carbon-cover *) span {
   position: relative;
   display: block;
   overflow: hidden;
 }
 
-.carbon-img {
+.carbon-img:not(#carbon-cover *) {
   float: left;
   margin-right: 1em;
 }
 
-.carbon-img img {
+.carbon-img:not(#carbon-cover *) img {
   display: block;
   line-height: 1;
 }
 
-.carbon-text {
+.carbon-text:not(#carbon-cover *) {
   display: block;
   float: left;
   max-width: calc(100% - 130px - 1em);
   text-align: left;
   color: var(--primary-med-or-secondary-med);
 }
 
-.carbon-poweredby {
+.carbon-poweredby:not(#carbon-cover *) {
   position: absolute;
   right: 0; // You can also set the position to the "left" with the value of calc(130px + carbon-text’s font size). If the font-size is 12px, you’ll want to set the left value as 142px. It’ll align the .carbon-text with .carbon-poweredby
   bottom: 0;

config/locales/server.en.yml

@@ -97,10 +97,13 @@ en:
 
     carbonads_serve_id: "Your Carbon Ads Serve ID"
     carbonads_placement: "Your Carbon Ads Placement"
+    carbonads_format: "Your Carbon Ads Format"
     carbonads_through_trust_level: "Show your ads to users based on trust levels. Users with trust level higher than this value will not see ads."
     carbonads_exclude_groups: "Ads will not be shown to members of these groups"
     carbonads_topic_list_top_enabled: "Show an ad above the topic list"
     carbonads_above_post_stream_enabled: "Show an ad above the post stream"
+    carbonads_post_bottom_enabled: "Show an ad above at post bottom"
+    carbonads_above_suggested_enabled: "Show an ad above the above suggested topics"
 
     adbutler_publisher_id: "AdButler Publisher ID. NOTE: You may need to update the 'content security policy script src' setting. See <a href='https://meta.discourse.org/t/33734' target='_blank'>this topic</a> for the latest instructions."
     adbutler_mobile_topic_list_top_zone_id: "Zone ID for mobile topic list top location"

config/settings.yml

@@ -438,6 +438,14 @@ carbonads_plugin:
   carbonads_placement:
     client: true
     default: ""
+  carbonads_format:
+    client: true
+    type: enum
+    default: "responsive"
+    allow_any: false
+    choices:
+      - responsive
+      - cover
   carbonads_through_trust_level:
     client: true
     default: 2
@@ -463,6 +471,12 @@ carbonads_plugin:
   carbonads_above_post_stream_enabled:
     client: true
     default: false
+  carbonads_post_bottom_enabled:
+    client: true
+    default: false
+  carbonads_above_suggested_enabled:
+    client: true
+    default: false
 
 adbutler_plugin:
   adbutler_publisher_id: