Ive setup my 3D & motion design portfolio with Munio theme and I absolutely love it :) One thing, I find it really hard to make portfolio Hero images/videos that fit both landscape and portrait. Most of my work is 16:9 stuff so fits nicely for landscape but looks a bit cramped on a mobile. Would it be possible to add specific option in theme for defining mobile hero image and desktop hero image?
I've also noticed that on mobile all my videos are rendered as still images instead, guess this is for performance, but is it possible to turn this off somewhere?
there is no option of for that, what is the page template do you intend to use?
Video on mobile:
It is not recommended, as a general practice, having videos autoplay on mobile (taking in consideration different data mobile plans and different networks streaming speeds). Also, the problem with ios devices is they interpret the HTML 5 videos as videos without player so they will embed it it in a popup player. You should provide a poster image (hero image) for mobile in video portfolio options.
However, to enable video on mobile try the following:
1. add
@media only screen and (max-width: 1024px){
.hero-video-wrapper {
display: block;
visibility: visible;
}
}
in customizer -> additional CSS
2. open/js.scripts.js and remove the following lines:
var viewportWidth = $(window).width();
if (viewportWidth < 1024) {
$('.hero-video-wrapper').remove();
}
hard refresh the page (Ctrl+F5) when you are done.
3. go to showcase-page.php and change the following line
<video loop muted class="bgvid">
to
<video loop muted playsinline class="bgvid">
same thing for /sections/hero_image_section.php line 18
I agree with Christian's original point here. Adding an option across the themes to select different hero images/video for mobile/desktop would be super helpful. Similarly to Christian, I'm a visual artist and at the moment it's difficult to create content that fit both options seamlessly.
I am using the Bauman theme with the "Showcase" template which pulls from my "portfolio" items.
we appreciate your active feedback - Christian's as well.
As a fact you cannot totally eliminate the cropping of a fullscreen image/video due to current viewport size. Even if you have different images/videos for mobile.
The cropping in the current viewport of a fullscreen image is visually explained in this article:
Ive setup my 3D & motion design portfolio with Munio theme and I absolutely love it :)
One thing, I find it really hard to make portfolio Hero images/videos that fit both landscape and portrait. Most of my work is 16:9 stuff so fits nicely for landscape but looks a bit cramped on a mobile. Would it be possible to add specific option in theme for defining mobile hero image and desktop hero image?
I've also noticed that on mobile all my videos are rendered as still images instead, guess this is for performance, but is it possible to turn this off somewhere?
br
Christian
Hello Christian,
there is no option of for that, what is the page template do you intend to use?
Video on mobile:
It is not recommended, as a general practice, having videos autoplay on mobile (taking in consideration different data mobile plans and different networks streaming speeds). Also, the problem with ios devices is they interpret the HTML 5 videos as videos without player so they will embed it it in a popup player. You should provide a poster image (hero image) for mobile in video portfolio options.
However, to enable video on mobile try the following:
1. add
@media only screen and (max-width: 1024px){
.hero-video-wrapper {
display: block;
visibility: visible;
}
}
in customizer -> additional CSS
2. open/js.scripts.js and remove the following lines:
var viewportWidth = $(window).width();
if (viewportWidth < 1024) {
$('.hero-video-wrapper').remove();
}
hard refresh the page (Ctrl+F5) when you are done.
3. go to showcase-page.php and change the following line
<video loop muted class="bgvid">
to
<video loop muted playsinline class="bgvid">
same thing for /sections/hero_image_section.php line 18
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
I agree with Christian's original point here. Adding an option across the themes to select different hero images/video for mobile/desktop would be super helpful. Similarly to Christian, I'm a visual artist and at the moment it's difficult to create content that fit both options seamlessly.
I am using the Bauman theme with the "Showcase" template which pulls from my "portfolio" items.
Hi,
we appreciate your active feedback - Christian's as well.
As a fact you cannot totally eliminate the cropping of a fullscreen image/video due to current viewport size. Even if you have different images/videos for mobile.
The cropping in the current viewport of a fullscreen image is visually explained in this article:
https://clapat.ticksy.com/article/7379
To implement a desktop vs mobile content you would have to rely on wp_is_mobile function
https://developer.wordpress.org/reference/functions/wp_is_mobile/
add mobile options for hero image/video and display them accordingly if this function returns true.
This is at least the solution that I have in mind.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy