Video thumbnails

Home Forums Automattic Forefront Video thumbnails

Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #107583 Resolve

    Vanessa

    I would like to include videos on a Forefront grid page that I’m using to showcase my media portfolio. When I embed a video on a child page and then use a featured image, the featured image displays on the grid, which is great. But it also shows up very large on the top of the video page. Is it possible to include a thumbnail for an embedded video that would show up on a grid page, but not at the top of the video page? Are there any other options for including videos in the Forefront theme? Thanks in advance to anyone who can help.

    The blog I need help with is sparkfiremedia.wordpress.com
    #137280

    Michelle

    Hi there,

    In the Forefront theme, thumbnails are designed to display as featured header images on single posts and pages. The only way to prevent featured images from displaying on single posts and pages is to hide them using Custom CSS.

    For example, you can try something like this:

    .hero.with-featured-image .page-title {
    color: #000;
    text-shadow: none;
    }
    .hero.with-featured-image img {
    display: none;
    }
    .hero.with-featured-image > div {
    position: relative;
    }

    Let me know how that works for you or if I can provide further assistance.

    #137325

    Vanessa

    Thanks for your help. That worked, but it removed the feature image from all pages, including the home page. Is there a way I can remove the featured image from individual pages?

    #137357

    Michelle

    Yes, but it’s a bit tedious. If you wanted to do it on a per-page basis, you would have to indicate in your CSS each page you want to remove the image from, using its unique ID. You can find this ID by viewing the source of the page in your browser (usually you can view the source by right-clicking, and then choosing “View Page Source”).

    In the View Source window, find the “body” tag. For example, the body class for your “Secretary Salazar Tribute Video” page looks like this:

    <body class="page page-id-60 page-child parent-pageid-14 page-template-default logged-in admin-bar no-customize-support custom-background typekit-enabled mp6 debug-bar-maximized theme-menu-maximized highlander-enabled highlander-light">

    The most important items are:

    .page = this means this is a single page

    .page-id-60 = this is the unique ID number for this page

    .parent-pageid-14 = “14” is the unique ID of the main grid page, of which this page is a child.

    If you want to hide featured images in the header on all single Pages, then I suggest replacing the code I gave you before with this (the only thing that’s different is the addition of “body.page”):

    body.page .hero.with-featured-image .page-title {
    color: #000;
    text-shadow: none;
    }
    body.page .hero.with-featured-image img {
    display: none;
    }
    body.page .hero.with-featured-image > div {
    position: relative;
    }

    You could also replace “body.page” with “body.parent-pageid-14” if you wanted to hide the featured header images only on child pages of the main grid page. However, keep in mind that if you create another grid page with child pages, that second grid page’s ID will be different and you’ll have to edit the CSS accordingly.

    If you want to hide the featured images on a per-page basis, then use “body.page-id-60” (or whatever the ID number of the page is).

    Let me know how this works for you!

    #137396

    Vanessa

    It works! Thank you so much. I only have a few pages that I’ll want to disable so using the body.page-id is the perfect solution. Thanks again.

    #137463

    Michelle

    Hi there,

    I’m glad it worked for you! I’ll close this topic, but feel free to start a new one if you have any other questions!

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Video thumbnails’ is closed to new replies.