Subscribe to Our Newsletter

x

How to Change Video Thumbnails on RebelMouse

When users create an article in the Particle Assembler that includes videos, a default thumbnail image appears when the video is uploaded to the Entry Editor. However, sometimes a video does not have a placeholder image or the image is something you want to change.


If the default image is not preferable, it is easy to change with custom CSS. Here is a step-by-step of how to do it.

First, find the image you would like to use as the video thumbnail. Then, use that image URL for the next steps. First, locate the post ID in the CSS. Using the Inspect function, you should find the post ID inside the tag <article>.

You can also easily find your Post ID In the URL of any RebelMouse article.

Now, using the specific post ID, you can change the background image for the <div> that contains code video you want t update. In the example below, the name 'no-image' is used to target the <div>.

In case there are many spots with the same name, you will need to use the CSS selector "first-of-type" or "first-child" to grab the specific occurrence you want to change.

Once you have found the specific element you want to change, apply the following rules:

/*set a thumbnail for one specific post*/

.post-2604691972 .listicle-slideshow__thumbnail > div.no-image {

background-image: url('put the url created in the first step here');

}

Finally, remove the icon that is hovering your picture with the following rule:

.post-2604691972 .listicle-slideshow__thumbnail > div.no-image path {

display: none;

}

Once the custom CSS is updated, you should see your new image as a thumbnail option in the post.

How to Add a Placeholder Image for Articles on Google AMP

The process is similar if you are publishing on Google AMP, but you need to use custom AMP CSS through our Layout & Design tool to make sure you are grabbing the target element only. Here is where to find it:

For AMP, use the same image URL as the previous example. To find the AMP-specific CSS rule that will only grab the desired post and the <div> you need, inspect the article's code to find the right place.

Then, inside your post, find the element you want to change the background image. In the example below, the CSS selector "first-of-type" is used to isolate only the first occurence of the carousel image:

/*set a thumbnail for one specific post*/

.css-listicle-body-2604691972 button.amp-carousel-slide.amp-scrollable-carousel-slide:first-of-type {

background-image: url(https://media.fox16.com/nxsglobal/fox16/photo/2018/09/07/Interview_with_Mother_of_Botham_Jean_0_54547264_ver1.0_640_360.jpg);

background-size: cover;

Finally, remove the default image in order to see your new background image. In order to do that, set the <img src> of target element to "none."

.css-listicle-body-2604691972 button.amp-carousel-slide.amp-scrollable-carousel-slide:first-of-type amp-img[src]{

display:none;

}

Once completed, here is how the additional thumbnail will look on Google AMP:


If you have any questions about how this works, contact your account manager to help you anytime.

Related Articles:

Take Advantage of Rich Media Integrations on RebelMouse

You're almost there! Fill out the form below and a Rebel will contact you within one business day.

x

Easily Snap RebelMouse Into Slack

RebelMouse offers a Slack integration that allows you to sync your editorial process with Slack's notifications. We can set up three events that trigger notifications:

  • Changed stages in the editorial process
  • Edited a post
  • Published a post
Keep reading... Show less

A Seamless Transition: Introducing RebelMouse to New Team Members

Behind every site powered by RebelMouse, there's a team of dedicated content creators, storytellers, developers, and leaders who are working to make sure their site is growing and flourishing. Sometimes, these teams fluctuate as new members join and others leave.

Keep reading... Show less

How to Use Variables to Set Colors Across Your Site

Why This Is Important

You can easily set colors for every element of your site on RebelMouse, including the color of your text, links, and headlines. Usually there's a set of 2–3 colors used across a site. But instead of hardcoding the color on every element, you can use variables to make it so that if a color needs to change, you can update it in one place instead of everywhere — making future maintenance easy.

Keep reading... Show less

Learn More About RebelMouse’s High-Performing Infrastructure

To ensure every site powered by RebelMouse is high performing, secure, and optimized for user experience, we only use the best and most reliable methods to host our infrastructure. Here's a detailed look at some of the services and security measures we use every day to secure maximum stability and security for each of our sites.

Click here to learn more about what makes RebelMouse secure, stable, redundant, and high performing.

Services

Stateless services, such as application services for front end and back end tasks, are deployed within an Amazon Virtual Private Cloud (VPC) into multiple availability zones using Amazon Auto Scaling groups. Every service deployment is automated and can be done without an operator. Auto Scaling groups eliminate the need for manual recovery procedures in the event of hardware-related incidents. Additionally, Auto Scaling groups for stateless services provide the ability to balance resources according to current load.

Stateless services include:

  • Front end and back end applications
  • Background workers
  • Dedicated services for paid content and statistics

All interactions with our internal services are done via Amazon Elastic Load Balancing (ELB). Load balancing allow us to control the flow of all incoming traffic and reroute it to the group of instances that are available as necessary, which covers any networking and hardware issues. Every load balancer controls the health of the listener instance by regularly performing health checks and removing failed instances from production environments.

Load balancing and Elastic Compute Cloud (EC2) instances provide monitoring services with resource consumption data. Stateful services such as MongoDB, Redis, and Memcached are deployed within a VPC into multiple availability zones using Auto Scaling groups. Every data service has backup, recovery, and automatic failover procedures. Backup and recovery procedures are integrated into Auto Scaling groups and tested regularly.

Services performance is monitored by internal and external tools:

  • Sentry is used to track errors.
  • New Relic is used for application performance monitoring.
  • Amazon CloudWatch is used to monitor performance extremes.
  • Monit, Nagios, and Cacti are used to monitor metrics per instance.

Security

Defense in Depth (DiD) standards are adhered to and applied at all levels:

  • Amazon Web Services (AWS), such as Identity and Access Management (IAM), and CloudTrail
  • VPC and subnets
  • Load balancers (security groups)
  • EC2 instances
  • Operating systems use permissions-based controls

Access Monitoring:

  • AWS CloudTrail monitors all activities in our production data centers and grants us the ability to perform audits

Data Protection:

  • Secured storage
  • Encrypted transition protocols
If you have any questions about RebelMouse's technical infrastructure, email support@rebelmouse.com.

Stepped Entry Editor: Guide Your Users Through Content Creation

Small, dedicated teams can create quality content that helps your site grow traffic organically. RebelMouse's platform enables multiple communities with granular permissions and simplified contribution tools to create a collaborative workflow built for creators.

Keep reading... Show less

You're almost there! Fill out the form below and a Rebel will contact you within one business day.

x

How to Fix: Invalid Twitter Card

Sometimes when you share a RebelMouse article to Twitter, it will render the tweet without a Card:

Keep reading... Show less

How to Fix: Facebook Image Sharing Error

Sometimes when you share images on Facebook that are in the body of the post, the following error will occur:

"Can't load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and sub-domains of your app to the App Domains field in your app settings."

Keep reading... Show less

When to Use the Post Content Element’s Lead Media Properties

RebelMouse's Layout & Design tool makes designing your site easy and intuitive. But there are certain design factors you need to take into account when building out your site.

When creating a post page (i.e., the landing page for any article that a user is directed or navigates to), styling it is slightly different from other pages because it requires you to use the Lead Media property of a Post Content element. Within the context of our Layout & Design tool, "Lead Media" is defined as the main post tied to a post page's URL, which includes all of its images, media, and text.

By contrast, the Posts element displays all other articles (or posts) that aren't the main post you land on. These are the subsequent posts on a page that appear afterward as you scroll — such as in an infinite scroll setup, for example.
Keep reading... Show less

Cross-Site Shareable Elements on RebelMouse

We now have a new feature that will be very helpful for clients that have multiple sites and/or a site network powered by RebelMouse: Cross-Site Shareable Elements. This new feature makes styling work much easier since users are able to update several site layouts at once by editing a single element. This should also prevent duplicating code in similar site layouts, as well as saving users some coding time.

Keep reading... Show less

You're almost there! Fill out the form below and a Rebel will contact you within one business day.

x
Subscribe to Our Newsletter

You're almost there! Fill out the form below and a Rebel will contact you within one business day.

x