Process Post W7 – Updates from Peer Review #2

Recommendation: Slowing down the Recent carousel

Initial Investigation

At first investigation through chrome’s inspector, I saw that the animation speed was set in a div. Here is the original CSS being applied to the .js-marquee-wrapper which holds our carrousel.

<div style="width: 100000px; transform: translateX(0px); 
       animation: 52.08s linear 0s infinite normal none running marqueeAnimation-9607499;"     class="js-marquee-wrapper">

We are interested in the animation attribute with its animation-duration value of 52.08. What we see here is just a shorthand of setting properties to the animation. According to documentation, it is the time to take to finish one cycle of the animation. That means it takes 52.08s to scroll through all the items in the carousel. To slow this down, I simply need to increase the duration. This can be done by adding the following CSS to the custom stylesheet.

.js-marquee-wrapper {
    animation: 150s linear 0s infinite normal none running marqueeAnimation-9607499!important;

The !important added to the end is crucial because it ensures the carousel animation is overwritten with the above CSS and not use the original CSS that comes with the theme.

After applying this CSS change, the carousel becomes frozen, so this is not the solution.


My next idea was to look into the theme files and see if I can adjust the speed there. This was done by APPEARANCE > THEME Editor. I navigated down to ASSETS > LIBRARY > MARQUEE > marquee-settings.js which allows me to adjust the settings of the carousel. I am very grateful that the developer was organized and left this abstraction for others to easily modify. I would otherwise have to modify snippets of code throughout the file.

Originally the speed was set to 50, setting it to 25 will make it 2 times slow. There some other settings I can play with if I wanted to.

Recommendation: Making image sizes consistent

Originally image sizes in my posts varied in height. To ensure all image thumbnails have the same image height I added the following CSS.

.post-thumbnail img {
    max-height: 500px;
    object-fit: cover;

With this CSS, all my thumbnail images that are greater than 500px will appear as 500px tall. The width of the image does not need to be modified as the current behaviour already resizes to the featured image to take the full width of the post.

However, this does not fix everything. What if the image is less than 500px tall? The solution is to only post images no smaller than 500px tall.

Recommendation: Title consistency

I originally started my posts with <POST SUBJECT> POST #<NUMBER>, but switched to <POST SUBJECT> POST W<NUMBER>. I accidentally left some posts using the old format. I have since fixed them and updated them to the new format.


Thumbnail – Photo by Kaleidico on Unsplash

Leave a Reply

Your email address will not be published. Required fields are marked *