Full width video & image

Can I change the video & image settings to full page width.

  • Milan

    Hello William Tyers

    Hope you are well today. :slight_smile:

    There is not any out of box way shipped with CousePress Pro to modify video and image size. But I think with bit of CSS treak we can do that. So will you be able to provide me link to your course/unit where you want to show your image in full size. ?

    Also Would you please grant me support staff access so that I can check in depth regarding your issue ?. You can grant me support access via WPMU DEV > Support > Support Access > Grant Access.

    Cheers,
    Milan

  • William Tyers

    G'day Milan

    Thank you for your quick reply.

    I am at present evaluating CoursePress Pro on my LocalHost so I am not sure if you will be able to gain access thru Grant Access which I have enabled.

    I am happy to continue with the course material development if the full width feature is possible once I take the site onto my live server.

    I am also taking advantage of your trial period at this stage and it looks very much like I will become a full subscriber as your support offered is very impressive.

    To summarise I will continue with the site development and contact you in the near future when I have all material ready to go live.

    Thanks again

    William

  • Adam Czajczyk

    Hello William!

    Unfortunately we're not able to access "locahost" site's unless they're made available for external (from the web) access for example using some Dynamic DNS service. Even then, the site would have to be registered with your WPMU DEV account as a domain from that DynDNS rather than "localhost".

    I'm not sure though what kind of images/videos are you referring to. Let me then break it down to two parts.

    Images

    If you're referring to images that are part of course's content (e.g. in units) then to make them "full width" you should first select "full size" image while inserting it to the content (via "Add media" editor image) and center it (using editor button), then use some custom CSS. Here's an example CSS rule that will make every such image that's part of a "Text" module full width:

    .text_module img.size-full {width:100%;}

    If you're referring to images added via "Image" module, the "full size" rule applies as well (though there's no "center" option) and this CSS rule should make them all full width:

    .image_module .image_holder, .image_module .image_holder img {width:100%;}

    Please note however that this are examples built upon simple course and a Twenty Fifteen WP theme. It should work well for you but some adjustments may be required. Also, if by "full-width" you mean "full screen width" regardless of content container element (e.g. post width) a different and rather theme-specific code would be necessary.

    Videos

    This rule should make videos added via "Video" module full width:

    .video_module .video_holder, .video_module .video_holder .video_player iframe {width:100%;height:auto;}

    You may add this CSS rules either by adding them to your child theme's style.css file (if you're using a child theme) or with a Simple Custom CSS plugin:

    https://wordpress.org/plugins/simple-custom-css/

    Best regards,
    Adam