[1433] Added research article section in Homepage #1542

lucascumsille · 2022-12-23T08:35:30Z

Fixes: #1433
A specific of #791

This PR add article section into the front page:

Desktop version

Screen.Recording.2022-12-23.at.08.30.36.mov

Mobile version

@garethrees let me know if you'd like me to change the background colour of this section. It's the same issue that I describe in the comment for this PR

Let me know if you like this solution and if there is any feedback.

garethrees

This looks great! Added a couple of notes on implementation specifics, but all really minor.

Ideally we'd position this below the "Who can I request information from?" / "What information has been requested?" section, but I can see that we don't have a great way of doing that at this point.

I've made a pull request – which will hopefully be merged by the time you read this! – that makes it easier to do this and keep the overrides a little simpler.

Should be an easy change:

Create lib/views/general/_frontpage_extra.html.erb
Add <%= render :partial => "frontpage_articles" %> to that file

let me know if you'd like me to change the background colour of this section

Nope, it's great as it is!

garethrees · 2023-01-04T09:36:13Z

lib/views/general/_frontpage_articles.html.erb

+            <% end %>
+        </div>
+        <div style="text-align: center;">
+            <a class="button" href="https://research.mysociety.org/publications/">Browse more articles</a>


Couple of notes here:

https://research.mysociety.org/section/foi would be a better URL I think

Could we get rid of the inline styling?

Let's make the primary CTA a donate link as described: Donate £10 to support our research or browse more

garethrees · 2023-01-04T09:37:41Z

lib/views/general/_frontpage_articles.html.erb

+<div class="homepage-article-section" id="homepage-article">
+    <div class="row homepage-article-section__ar-contet">
+        <div class="ar-content__headings ">
+            <h2><%= _("Recent articles") %></h2>


I think this should be clearer that we're talking about research papers.

How about:

<h2><%= _("Our Freedom of Information Research") %></h2>

garethrees · 2023-01-04T09:42:27Z

lib/views/general/_frontpage_articles.html.erb

+    @research_articles = [
+    { title: 'Improving oversight of Access to Information',
+        url: 'https://research.mysociety.org/publications/improving-oversight',
+        img: 'paper-1.png',


Could we hotlink the images from research.mysociety.org in some way? Would be one less thing to do in order to add a new paper.

I think we could use the title key for the image alt text – it's not quite as good but it reduces complexity and maintenance burden.

@garethrees not sure how to do the hotlinking would work. In this case I guess I could replace the img with the url
kind of like this: img:https://research.mysociety.org/media/cache/57/75/57751fabb74b981cbe4e6f5d96d992b2@2x.png the only problem is in a cache folder so not sure if this will keep working if we clear the cache.

@ajparsons is there a permanent URL that exists for these research paper images?

I don't think if this makes it easier or not, but there's a basic json API that would give the details based on a tag:

https://research.mysociety.org/embed/foi/limit:5/format:json/

Could define a new tag (which is how the 'transparency' page work on mysociety.org).

Alternatively I could probably spend 10 minutes adding a URL redirect in for consistent thumbnail images.

there's a basic json API that would give the details based on a tag

Oh, I did not know about this!

We could use that pretty easily to construct the @research_articles list. That way we'd never have to update it (providing you maintain the API! 😁 )

@research_articles = JSON.parse(Net::HTTP.get(URI('https://research.mysociety.org/embed/foi/limit:10000/format:json/'))). with_indifferent_access[:items]. map { |item| item.slice(:title, :url, :thumbnail) }

We'd want to handle a HTTP response/JSON parsing failure, but we've got a pattern for that in AskTheEU for caching their blog.

Could define a new tag

foi is perfect!

limit:5

I don't think we want to limit this. Is there a way to get everything, or is my limit:10000 the best way?

Or we could just render the most recent, but I'd thought that a regular rotation might keep people interested…

There seems to be a default limit, so limit:1000 is probably right.

My sense is more recent things are generally more interesting than older things (quality control as much as anything and some things date), but can always review how it's doing later.

Okay, I'll pull in most recent 10 and pick random 6, so that there's some variation but biases towards newest ✨

lib/views/general/_frontpage_articles.html.erb

garethrees · 2023-01-04T09:43:49Z

lib/views/general/_frontpage_articles.html.erb

+                <img class="item-content__img" src="<%= image_path(article[:img]) %>" alt="<%= article[:alt] %>" loading="lazy">
+                    <div class="article-grid__item-content">
+                        <h3 class="item-content__heading"><%= article[:title] %></h3>
+                        <a class="external-link link-with-icon youtube-icon" href="<%= article[:url] %>" target="_blank">Read article</a>


Not sure why this needs the youtube-icon class?

lucascumsille · 2023-01-10T08:40:02Z

@garethrees Thanks for the feedback =)
Here is a list with the most recent changes:

Create lib/views/general/_frontpage_extra.html.erb
<h2><%= _("Our Freedom of Information Research") %></h2>
Erased youtube-icon class
2-space indentation (Could you double check if what I did was right? I look on other files examples of files starting with _frontpage, but I didn't see the indentation) Let me know and I'll fix the indentation in the video PR
https://research.mysociety.org/section/foi would be a better URL I think
Could we get rid of the inline styling?
Let's make the primary CTA a donate link Present FOI & Transparency research papers on the front page #1433 (comment): Donate £10 to support our research or browse more

Regarding the thumbnails, should I just replace in the current content?
@research_articles = JSON.parse(Net::HTTP.get(URI('https://research.mysociety.org/embed/foi/limit:10000/format:json/'))). with_indifferent_access[:items]. map { |item| item.slice(:title, :url, :thumbnail) }

I need to rebase this PR because there are some commits that are quite specific/unnecessary, but not too sure if you were working on this branch as well.

garethrees · 2023-01-10T08:48:47Z

Regarding the thumbnails, should I just replace in the current content?

Minor tweak (reduced the limit param to 10, so that the loop below can pick a random 6 from that 10 via the sample method).

@research_articles = JSON.parse(Net::HTTP.get(URI('https://research.mysociety.org/embed/foi/limit:10/format:json/'))). with_indifferent_access[:items]. map { |item| item.slice(:title, :url, :thumbnail) }

I need to rebase this PR because there are some commits that are quite specific/unnecessary, but not too sure if you were working on this branch as well.

Nope, you go for it! Get it nice and tidy and then I'll add a commit that sorts out the caching when you're done.

lucascumsille · 2023-01-10T08:56:24Z

@garethrees Thanks for that
One last question:
2-space indentation (Could you double check if what I did was right? I look on other files examples of files starting with _frontpage, but I didn't see the indentation) Let me know and I'll fix the indentation in the video PR

garethrees · 2023-01-10T10:27:53Z

2-space indentation (Could you double check if what I did was right?…)

What it is now:

        <div class="homepage-article-section" id="homepage-article">
            <div class="row homepage-article-section__ar-contet">
                <div class="ar-content__headings ">
                    <h2><%= _("Our Freedom of Information Research") %></h2>
                </div>
                <div class="ar-content__article-grid col-2-grid">
                    <% @research_articles.sample(6).each do |article| %>
                        <div class="article-grid__item">
                        <img class="item-content__img" src="<%= image_path(article[:img]) %>" alt="Cover for: <%= article[:title] %>" loading="lazy">
                            <div class="article-grid__item-content">
                                <h3 class="item-content__heading"><%= article[:title] %></h3>
                                <a href="<%= article[:url] %>" target="_blank">Read article</a>
                            </div>
                        </div>
                    <% end %>
                </div>
                <div class="cta-button-wrapper">
                    <a class="button" href="https://www.mysociety.org/donate/?utm_medium=link&how-much=10">Donate £10</a>
                    <span>to support our research or <a href="https://research.mysociety.org/section/foi">Browse more</a></span>
                </div>
            </div>
        </div>

What I'd expect to see:

<div class="homepage-article-section" id="homepage-article">
  <div class="row homepage-article-section__ar-contet">
    <div class="ar-content__headings ">
      <h2><%= _("Our Freedom of Information Research") %></h2>
    </div>

    <div class="ar-content__article-grid col-2-grid">
      <% @research_articles.sample(6).each do |article| %>
        <div class="article-grid__item">
          <img class="item-content__img" src="<%= image_path(article[:img]) %>" alt="Cover for: <%= article[:title] %>" loading="lazy">

          <div class="article-grid__item-content">
            <h3 class="item-content__heading"><%= article[:title] %></h3>
            <a href="<%= article[:url] %>" target="_blank">Read article</a>
          </div>
        </div>
      <% end %>
    </div>

    <div class="cta-button-wrapper">
      <a class="button" href="https://www.mysociety.org/donate/?utm_medium=link&how-much=10">Donate £10</a>
      <span>to support our research or <a href="https://research.mysociety.org/section/foi">Browse more</a></span>
    </div>
  </div>
</div>

diff --git a/lib/views/general/_frontpage_articles.html.erb b/lib/views/general/_frontpage_articles.html.erb
index 6592079..24b7689 100644
--- a/lib/views/general/_frontpage_articles.html.erb
+++ b/lib/views/general/_frontpage_articles.html.erb
@@ -30,25 +30,28 @@
             ]
         %>
 
-        <div class="homepage-article-section" id="homepage-article">
-            <div class="row homepage-article-section__ar-contet">
-                <div class="ar-content__headings ">
-                    <h2><%= _("Our Freedom of Information Research") %></h2>
-                </div>
-                <div class="ar-content__article-grid col-2-grid">
-                    <% @research_articles.sample(6).each do |article| %>
-                        <div class="article-grid__item">
-                        <img class="item-content__img" src="<%= image_path(article[:img]) %>" alt="Cover for: <%= article[:title] %>" loading="lazy">
-                            <div class="article-grid__item-content">
-                                <h3 class="item-content__heading"><%= article[:title] %></h3>
-                                <a href="<%= article[:url] %>" target="_blank">Read article</a>
-                            </div>
-                        </div>
-                    <% end %>
-                </div>
-                <div class="cta-button-wrapper">
-                    <a class="button" href="https://www.mysociety.org/donate/?utm_medium=link&how-much=10">Donate £10</a>
-                    <span>to support our research or <a href="https://research.mysociety.org/section/foi">Browse more</a></span>
-                </div>
-            </div>
+<div class="homepage-article-section" id="homepage-article">
+  <div class="row homepage-article-section__ar-contet">
+    <div class="ar-content__headings ">
+      <h2><%= _("Our Freedom of Information Research") %></h2>
+    </div>
+
+    <div class="ar-content__article-grid col-2-grid">
+      <% @research_articles.sample(6).each do |article| %>
+        <div class="article-grid__item">
+          <img class="item-content__img" src="<%= image_path(article[:img]) %>" alt="Cover for: <%= article[:title] %>" loading="lazy">
+
+          <div class="article-grid__item-content">
+            <h3 class="item-content__heading"><%= article[:title] %></h3>
+            <a href="<%= article[:url] %>" target="_blank">Read article</a>
+          </div>
         </div>
+      <% end %>
+    </div>
+
+    <div class="cta-button-wrapper">
+      <a class="button" href="https://www.mysociety.org/donate/?utm_medium=link&how-much=10">Donate £10</a>
+      <span>to support our research or <a href="https://research.mysociety.org/section/foi">Browse more</a></span>
+    </div>
+  </div>
+</div>

lucascumsille · 2023-01-11T09:09:10Z

@garethrees Thanks for the feedback this one has all the changes including the indentation =)
I also rebased everything into one commit
Let me know if there is anything else.

garethrees

Other than tweaking some specifics of the donate button (utm params, button text, default amount) this is ready.

Get articles information from JSON API Added articles into frontpage_extra file

* Line length * Line spacing * Quote style * Use Rails helpers

We don't want the homepage to error just because there's an error or timeout trying to pull in research articles, so add some error handling to only render if we have articles to render. Ideally we'd do some clever caching like we do for the AskTheEU homepage blog cache [1] to pull from cached versions in the event of an error, but that's not yet available in Alaveteli core and isn't generalised enough for this. [1] mysociety/asktheeu-theme#44

Only rendering the title leaves a lot of empty space. Using the description makes the section look a bit better, and gives a bit of extra insight about what each paper is about

`donation_url` sets some of the basic utm params. Also manually added some location-specific params.

While the frontpage is cached for 5 minutes, we don't need to fetch the research papers quite so frequently. This commit caches the papers for an hour, so that we only get one potentially slow request per hour. This might result in not displaying any papers for an hour if the feed fails, but that's fine as this isn't critical content. Ideally we wouldn't fetch this in a request cycle at all.

We're experimenting with this a bit so easier to just point towards the correct page and use its defaults.

lucascumsille changed the title ~~[WDTK] Added article section in Homepage~~ [1433] Added article section in Homepage Dec 23, 2022

garethrees requested changes Jan 4, 2023

View reviewed changes

lucascumsille force-pushed the 1433-front-end-papers branch 2 times, most recently from 1251855 to 3571d38 Compare January 11, 2023 09:07

lucascumsille requested a review from garethrees January 11, 2023 09:07

garethrees added the awaiting-review label Jan 11, 2023

garethrees self-assigned this Jan 11, 2023

mysociety-pusher force-pushed the 1433-front-end-papers branch 2 times, most recently from 110119d to 70194f4 Compare February 8, 2023 17:51

garethrees removed the awaiting-review label Feb 9, 2023

garethrees approved these changes Feb 9, 2023

View reviewed changes

lucascumsille and others added 7 commits March 16, 2023 14:28

Added article section in frontpage

0b9cbc5

Get articles information from JSON API Added articles into frontpage_extra file

Minor code cleanup

4adaba4

* Line length * Line spacing * Quote style * Use Rails helpers

Add description to research papers

08a1695

Only rendering the title leaves a lot of empty space. Using the description makes the section look a bit better, and gives a bit of extra insight about what each paper is about

Use donation_url helper and set utm params

e5bbd3b

`donation_url` sets some of the basic utm params. Also manually added some location-specific params.

Just use default donation amounts

1ef05bd

We're experimenting with this a bit so easier to just point towards the correct page and use its defaults.

mysociety-pusher force-pushed the 1433-front-end-papers branch from 70194f4 to 1ef05bd Compare March 16, 2023 14:32

mysociety-pusher merged commit 530bef9 into master Mar 16, 2023

mysociety-pusher deleted the 1433-front-end-papers branch March 16, 2023 14:33

garethrees changed the title ~~[1433] Added article section in Homepage~~ [1433] Added research article section in Homepage Mar 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1433] Added research article section in Homepage #1542

[1433] Added research article section in Homepage #1542

lucascumsille commented Dec 23, 2022

garethrees left a comment •

edited

Loading

garethrees Jan 4, 2023

garethrees Jan 4, 2023

garethrees Jan 4, 2023

lucascumsille Jan 9, 2023

garethrees Jan 9, 2023

ajparsons Jan 9, 2023

garethrees Jan 9, 2023 •

edited

Loading

ajparsons Jan 9, 2023

garethrees Jan 9, 2023

garethrees Jan 4, 2023

lucascumsille commented Jan 10, 2023 •

edited

Loading

garethrees commented Jan 10, 2023 •

edited

Loading

lucascumsille commented Jan 10, 2023

garethrees commented Jan 10, 2023

lucascumsille commented Jan 11, 2023

garethrees left a comment

[1433] Added research article section in Homepage #1542

[1433] Added research article section in Homepage #1542

Conversation

lucascumsille commented Dec 23, 2022

Desktop version

Mobile version

garethrees left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

garethrees Jan 9, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lucascumsille commented Jan 10, 2023 • edited Loading

garethrees commented Jan 10, 2023 • edited Loading

lucascumsille commented Jan 10, 2023

garethrees commented Jan 10, 2023

lucascumsille commented Jan 11, 2023

garethrees left a comment

Choose a reason for hiding this comment

garethrees left a comment •

edited

Loading

garethrees Jan 9, 2023 •

edited

Loading

lucascumsille commented Jan 10, 2023 •

edited

Loading

garethrees commented Jan 10, 2023 •

edited

Loading