-
Notifications
You must be signed in to change notification settings - Fork 14
Promotional banners #162
Comments
What about this approach?
The author then adds a relative link like this: /banners/acrobat_free_trial.html to the Markdown, which Pipeline will pick up as an internal embed, which will be included. We then use CSS and a bit of JS to render the banner. Advantage:
Disadvantage:
|
Would work for me as well. For ease of use, we could still provide a picker which has the QR-coded thumbnails. @davidnuescheler wdyt? |
For the record, here are some banner samples: |
This adobe/helix-pages#78 would be required to implement @trieloff's solution. |
Also, if we embed the content in the page, how are we going to style it ? We should be able to define that this is a "banner" include that requires a "banner" style... |
@davidnuescheler has convinced me that the source data is more table-shaped than document-shaped, so the first approach would probably work better. |
I would love to see an example of that because in the current state, I do not see of this can work ;)
As an author, I only want to do something like:
|
@davidnuescheler's approach depends on adobe/helix-data-embed#34 – @kptdobe you can look at the example there to see some ideas how the URL (and resulting markup) would look to the author. In general, I think my approach favors the banner embedded, whereas @davidnuescheler's approach favors the banner author, especially when it comes to bulk editing. I'm honestly not sure which way is better and the uncertainties about adobe/helix-data-embed#34 don't help either. |
Fwiw, I don't know if bulk editing is really a thing for these promotions, @avanishgandhi can you find out? It might well be that these are created as one-offs, referenced on a few articles for a period of time, and then left alone without ever being edited again. |
Btw – just to throw another idea against the wall: These banners look like it would be really easy to author them using Adobe Spark Post. We do have an existing integration between The only limitation that I see is that the entire banner would be the link target. |
They are already able to do these "banners as an image": https://theblog.adobe.com/business-resilience-leading-through-change/ |
I only see the html COVID-19 banner on this page... maybe I'm looking in the wrong place? |
I don't think that would be a problem. I even think it would be better from a usability perspective 😄. |
You do not see the "Summit is now online" banner-like-image right after the COVID-19 one ?! |
Another limitation with Spark: the link target needs to be specified somewhere. Maybe a staggered approach would work:
|
Apparently I'm not in any targeted segment 😂 |
I'm starting to think that Spark Post would be solving for |
Scary. For me, it is part of the html response. So either they hide it client side for you... or the page is not cached at all! |
While we are debating ;), I have made a test with what we already have + 2 minor fixes:
For the 4 identified banners, I created one md file with the required content to represent each of them following the same pattern (a lot of differences between the various banners). See the promotions folder: https://adobe.sharepoint.com/sites/TheBlog/Shared%20Documents/Forms/AllItems.aspx?RootFolder=%2Fsites%2FTheBlog%2FShared%20Documents%2Ftheblog%2Fen%2Fpromotions&FolderCTID=0x012000291CC2F215041D41ADE01F0A04AB94F2 As an author, to get the banner, I simply add (markdown):
or
or
And the banner is injected in the DOM as:
Final step would be to "reorganise + style" this piece of DOM clientside like we do everywhere else. While this does the job, the limited correspondances between the banners (text overlay in one case, text in the image in another, one has no title...) make the approach hard to generalise and would require the author to know exactly what are the options. This applies probably less for the spreadsheet approach but the grid would be pretty randomly empty and reveal the un-structured nature of those banners. |
Here are some first migrated examples with banners:
With adobe/helix-theblog-importer#20, new banners are automatically created under Initial styling is here: #187 |
Found a broken Adobe Sign banner here: https://promotion-banners--theblog--adobe.hlx.page/en/drafts/migrated/2020/04/27/the-state-of-utah-uses-adobe-sign-to-accelerate-telework-during-crisis.html |
First implementation with:
Notes:
|
For now, only the few blog entries I manually imported are up-to-date. |
I am planning a full re-import (beginning of next week) of all the blog posts as soon as the embeds are stable and theblog.adobe.com cache has been flushed. This will re-import all banners in all blog posts and convert them properly as embeds. |
Some articles feature promotional HTML banners consisting of a background image, a title and text, an optional icon and a "call to action" button with label. There is a number of them that will be reused in different articles.
Example:
I discussed a potential implementation with @davidnuescheler and we thought it would be best to edit this data in Excel and use data embeds to render them. So the above would look like this in a spreadsheet format:
The article would contain the URL to the spreadsheet incuding the ID of the banner to render. Helix would then apply a template and turn it into something like this:
What we need:
helix-data-embed
needs to support an ID so it will only render a single row.helix-pipeline
needs to turn the image with QR code into a data-embedThe text was updated successfully, but these errors were encountered: