harmen/hypha

Fork 0

automise/simplify newsletter #267

New issue

Open

opened 2019-10-31 20:22:01 +00:00 by dianawi · 4 comments

dianawi commented

2019-10-31 20:22:01 +00:00

(Migrated from github.com)

making the weekly newsletter now costs a lot of time. It would be nice to be able to import the abstracts and titles of articles into a newsletter, add an introduction, and automatically add header and footer.

matthijskooijman commented

2020-05-06 14:18:45 +00:00

(Migrated from github.com)

@dianawi This is assigned to you and marked as in-progress, are you actively working on this? Or should we move it back to the To-do pile?

matthijskooijman commented

2020-12-24 14:39:29 +00:00

(Migrated from github.com)

I have been thinking on this a bit, and can imagine the following:

On the autogenerated pagelists (i.e. tijdlijn or homepage), show a small "Copy" icon next to each article.
When you click the copy icon, the raw HTML of the article excerpt (as shown in the pagelist) is copied to the clipboard, to be pasted into the newsletter.
This means that for every article that needs to go into the newsletter, you click the copy icon in the Tijdlijn page, go to the newsletter and paste the article there, then copy the next article, etc.

These copy icons should only be shown to logged in users, or if we think that would be confusing to users that are not working on the newsletter, maybe it should be hidden by default and enabled using a button or preference somewhere (but I'm not sure what would a nice UI would look like that is also easy to implement).

One improved version of this would be to, once you click the first copy icon, change the copy icons to checkboxes (or show a checkbox in addition) and then whenever you check or uncheck a checkbox, copy all selected articles to the clipboard. This means you would go to the Tijdlijn page, check all articles that need to go into the newsletter in the Tijdlijn and paste them into the newsletter in one go.

One easy way to implement this could be to just put a bit of javascript into the theme that adds the copy buttons to the page and handles them. Alternatively, this could be added as an option to the pagelist macro maybe.

This does require that (the HTML structure of) the excerpt shown on the homepage/tijdlijn is already suitable to be pasted into the newsletter verbatim. Or if some mechanical changes are needed, those could maybe be done automatically (but because such changes are likely specific to the site, this is more suitable for the script-in-theme approach than the builtin-to-hypha approach).

I have been thinking on this a bit, and can imagine the following: - On the autogenerated pagelists (i.e. tijdlijn or homepage), show a small "Copy" icon next to each article. - When you click the copy icon, the raw HTML of the article excerpt (as shown in the pagelist) is copied to the clipboard, to be pasted into the newsletter. - This means that for every article that needs to go into the newsletter, you click the copy icon in the Tijdlijn page, go to the newsletter and paste the article there, then copy the next article, etc. These copy icons should only be shown to logged in users, or if we think that would be confusing to users that are not working on the newsletter, maybe it should be hidden by default and enabled using a button or preference somewhere (but I'm not sure what would a nice UI would look like that is also easy to implement). One improved version of this would be to, once you click the first copy icon, change the copy icons to checkboxes (or show a checkbox in addition) and then whenever you check or uncheck a checkbox, copy *all* selected articles to the clipboard. This means you would go to the Tijdlijn page, check all articles that need to go into the newsletter in the Tijdlijn and paste them into the newsletter in one go. One easy way to implement this could be to just put a bit of javascript into the theme that adds the copy buttons to the page and handles them. Alternatively, this could be added as an option to the pagelist macro maybe. This does require that (the HTML structure of) the excerpt shown on the homepage/tijdlijn is already suitable to be pasted into the newsletter verbatim. Or if some mechanical changes are needed, those could maybe be done automatically (but because such changes are likely specific to the site, this is more suitable for the script-in-theme approach than the builtin-to-hypha approach).

matthijskooijman commented

2020-12-30 14:01:33 +00:00

(Migrated from github.com)

To solve this, I think we must modify the copied HTML to either:

Move the excerpt out of the link
Add inline styling to make things look as intended

I'm not sure how easy it is to modify HTML before copying from javascript, that probably involves duplicating the DOM structure (ideally off-screen), making changes and copying that. Alternatively, one could use a separate page for this and generate the modified HTML directly from PHP.

For the latter, maybe a separate macro (subclass of pagelist) could work, which acts like pagelist, but slightly modifies the resulting HTML, or maybe keeps the HTML the same, but applies a customizable list of styling rules to the output. The latter would maybe allow keeping this code generic and included in Hypha (though it still requires actually creating a page, calling the macro, etc. before this can be used).

I had a closer look at the HTML used for newsletters, and it seems that it is subtly, but importantly different. Currently, the newsletter items consist of a link containing the title, author, date and image, followed by the excerpt outside of the link. The excerpt generated by the pagelist macro has everything in the link tag. If used as-is in the newsletter, this would end up coloring and underlining the excerpt text, which isn't particularly nice (on the website, this is resolved by applying CSS styling, but we can't really add a stylesheet to the newsletter). To solve this, I think we must modify the copied HTML to either: - Move the excerpt out of the link - Add inline styling to make things look as intended I'm not sure how easy it is to modify HTML before copying from javascript, that probably involves duplicating the DOM structure (ideally off-screen), making changes and copying that. Alternatively, one could use a separate page for this and generate the modified HTML directly from PHP. For the latter, maybe a separate macro (subclass of pagelist) could work, which acts like pagelist, but slightly modifies the resulting HTML, or maybe keeps the HTML the same, but applies a customizable list of styling rules to the output. The latter would maybe allow keeping this code generic and included in Hypha (though it still requires actually creating a page, calling the macro, etc. before this can be used).

matthijskooijman commented

2020-12-30 18:47:23 +00:00

(Migrated from github.com)

I ended up adding a Stadsbron-specific script to the theme: https://www.destadsbron.nl/data/themes/destadsbron/newsletter.js

This script does the following. On the "Tijdlijn" page (only), for logged in users, it shows small copy icons next to each article (all the way to the right):

When you click one such icon, the selected article is copied to the clipboard. Also, all copy icons change to checkboxes:

Now, whenever you (un)check a checkbox, all checked articles are copied to the clipboard again.

To put them in a newsletter, simply edit the newsletter and paste in the articles. Note that this copies raw HTML as text, so you need to paste this into the raw HTML editor:

The articles are not copied exactly as-is, but a little bit of transformation happens to prepare the HTML for pasting into the newsletter. This makes sure that everything looks good in an e-mail without the CSS stylesheet that is used on the website, by adding inline styles instead.

I ended up adding a Stadsbron-specific script to the theme: https://www.destadsbron.nl/data/themes/destadsbron/newsletter.js This script does the following. On the "Tijdlijn" page (only), for logged in users, it shows small copy icons next to each article (all the way to the right): --- ![image](https://user-images.githubusercontent.com/194491/103372475-6e5b5900-4ad2-11eb-8e78-400f8f097107.png) --- When you click one such icon, the selected article is copied to the clipboard. Also, all copy icons change to checkboxes: --- ![image](https://user-images.githubusercontent.com/194491/103372531-9054db80-4ad2-11eb-8b76-da97c245b8ea.png) --- Now, whenever you (un)check a checkbox, all checked articles are copied to the clipboard again. To put them in a newsletter, simply edit the newsletter and paste in the articles. Note that this copies raw HTML as text, so you need to paste this into the raw HTML editor: --- ![image](https://user-images.githubusercontent.com/194491/103372704-06594280-4ad3-11eb-88ec-a5532ff36f28.png) --- The articles are not copied exactly as-is, but a little bit of transformation happens to prepare the HTML for pasting into the newsletter. This makes sure that everything looks good in an e-mail without the CSS stylesheet that is used on the website, by adding inline styles instead.

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

harmen/hypha#267

No description provided.

Rows
Columns