felibunda

Sorry to have bothered you with this support question. The black stripes where within the video itself! I created a video with imovie 10.1.2 and used the transitioins “cross blur” and “cross dissolve”. Imovie adds black stripes at the left and right sides which cannot be seen in imovie, but they can be seen after sharing the movie as a file (.mp4) and looking at it with vlc player. I was able to remove the black stripes like I discribed in the “disqus comments” at the url https://becomethesolution.com/blogs/mac/easy-remove-black-bars-from-videos-in-imovie-10-1

So, the black stripes are a “feature” of imovie.

I removed the test site with the above given url.

… and I want to mark the issue as resolved.

@nko

you’re welcome. I am happy, that I could help you and could somehow contribute the plugin development. It is a nice plugin! Ans as far as I could see it has well structured code. I also thought about writing some proposition for the plugin code change, but then the originally planned 2 hours for creating a patch for my case turned to about 6 hours ?? So I enjoyed that you updated your plugin code to a version, where something similar to the patch is applied.

The first of my patches was – as far as I see – fully responsive in the sense, that the browser pics the appropriate image from the srcset even while resizing the browser window. But it did not work on my old mobile phone. My second patch is not fully responsive, as the appropriate image is only picked once at the moment of page loading, if the aspect ratio of the awb space is lower than the image aspect ratio. But – as far as I can see from reading the html while opening my page with the updated awb plugin v1.7.1 – you changed this idea into a fully responsive one, via further js I presume, which also reacts on browser window resizing. Wow!

I checked the new version with my internet page. It works fine! I removed my patch from my page it and just use the new version of awb now.

Thanks
felibunda

@edouardcoleman

Normally I just insert the js-code in a block with text at the end of a page. This is kind of awkward, nevertheless it works.

You can add a text block at the end of the page, where you want to add the patch and enter the following code (you will have to enter it in “text” mode not in “visual” mode):

<script>
var height_awb = document.getElementsByClassName("jarallax-img")[0].offsetHeight;
var width_awb = document.getElementsByClassName("jarallax-img")[0].offsetWidth;
var a_awb = width_awb/height_awb;  // awb element space aspect ratio
var a_img = 1.67;  // image original aspect ratio
var width_des = height_awb*a_img;  // desired width of a srcset image; it is the width an image has after streching it to fit height_awb
if(a_awb<a_img){
  document.getElementsByClassName("jarallax-img")[0].sizes="(min-width: 1px) "+String(width_des)+"px";  // (min-width: 1px) is a condition which should be always true
  }
</script>

The code is specific to my site. This means you have to enter your image aspect ratio instead of 1.67. Also, this patch only works for pages with one awb element present. Hope this helps.

felibunda

Hello,

meanwhile, I analyzed the situation somewhat further. Best solution would be if one would be able to use a height-based selection of the best fitting image within the srcset context. But so far, this is not supported: https://github.com/whatwg/html/issues/2973

So, I decided to create a patch for my situation. First I tried this js code:

function awb_patch(){
  var awb_height = document.getElementsByClassName("jarallax-img")[0].offsetHeight;
  var width = awb_height*1.67;
  document.getElementsByClassName("jarallax-img")[0].sizes="(max-aspect-ratio: 1.67) "+String(width)+"px";
  }

The idea behind this code is to switch to height-based selection in the case of aspect-ratios smaller than the image aspect-ratio. The width of the image to be taken is calculated from the awb_height, which is the height of the rectangle created by awb in order to fill in the image. The calculated width corresponds to the width an image has after scaling it to the desired awb_height, although it will not be displayed in its total width.

This code works within a firefox window on my laptop. It also works on a simulated mobile display 320px x 480px on firefox. But it does not work on my samsung galaxy s3 mini.

The reason for non-functioning for the s3 mini is – as far as I see – that the old mobile phone software of the chrome browser does not recognize the media query (max-aspect-ratio: 1.67)” within the sizes property. So I created a second patch:

function awb_patch(){
  var height_awb = document.getElementsByClassName("jarallax-img")[0].offsetHeight;
  var width_awb = document.getElementsByClassName("jarallax-img")[0].offsetWidth;
  var a_awb = width_awb/height_awb;  // awb element space aspect ratio
  var a_img = 1.67;  // image original aspect ratio
  var width_des = height_awb*a_img;  // desired width of a srcset image; it is the width an image has after streching it to fit height_awb
  if(a_awb<a_img){
    document.getElementsByClassName("jarallax-img")[0].sizes="(min-width: 1px) "+String(width_des)+"px";  // (min-width: 1px) is a condition which should be always true
    }
  }

This code works also on my s3 mini. Javascript evaluates the condition if the aspect ratio of “awb space” is smaller than the aspect ratio of the image. In this case we are in a height-dominated regime. Then a size property is attributed to the image element with a specified width corresponding to the one calculated from “height_awb”.

This is a patch for my situation at https://www.felixvoigt.de
I think, a similar patch is possible for the plugin in general as long as the height-based selection within the srcset context is not available.

Best regards
felibunda

Dear mokimoki,

sorry for the late reply. I tried your plugin with another website, also hosted by strato: https://www.bauernhof-kleingarn.de
Unfortunately I had also there no success. You have written the plugin requires access to .htaccess. But, if the hoster does not grant access to the file, how should one use your plugin for a website at the hoster’s webspace?
In my opinion it would be good if you would add some hints to the details in your description of your plugin.

Best regards
felibunda