Displaying a Constant Contact Archive on your Website
You may use Constant Contact, the email newsletter service, to contact your subscribers. Some of our clients like to add links to past newsletters on their websites so new subscribers can read them later. But when adding the Constant Contact archive widget to a WordPress website, the posts are listed in the opposite order we might expect. Though you prepare the widget through Constant Contact to display the 10, 20, or 25 most recent posts, on your website, you see the oldest email newsletter first.
Most of us would expect to see the most recent email newsletter first, and older ones after that. The issue has been around for at least four years, and Constant Contact has not yet provided a solution.
Fortunately, there is a solution to changing the order of the newsletters in your Constant Contact archive widget.
Flexbox is a useful layout mode in CSS. As you’d expect from the name, it gives us more flexibility over the layout elements. Today, we look at reversing the order of list elements with flexbox.
Reversing the order of list elements with flexbox
The widget code Constant Contact provides to create the automated list looks like this. We can’t change any settings to display the most recent newsletters first:
<script id=”archiveScript” src=”//cdnlink.com/archive-static.min.js”></script>
<div id=”archiveList” data-archive-count=”10″ data-m=”a07efr0ypg60″></div>
How can we use flexbox in this case?
When we inspect the element on the website, it parses out to this:
<div id=”archiveList” data-archive-count=”10″ data-m=”a07efr0ypg60″>
<ul>
<li><a href=”https://linktotheemail.com/id=1234″ target=”_blank”>Did You Catch Us on NPR?</a></li>
<li><a href=”https://linktotheemail.com/id=5678″ target=”_blank”>Canada – Here We Come!</a></li>
</ul>
</div>
With this unordered list, we now have CSS options, and flexbox comes to the rescue!
We added this to the stylesheet:
/*change order of Newsletters on home page, show newest first */
#archiveList ul {
display: flex;
flex-direction: column-reverse;
}
And now our list of Constant Contact newsletters shows the most recent one first instead of the oldest one.
Want more about flexbox? See how to use flexbox to make fluid columns in a masonry style.
