jjon

I did inspect the console carefully, and no relevant errors are recorded. Likewise the php debug.log: no relevant errors. The plugin simply doesn’t work most of the time, until, seemingly at random, it does work but gets the order wrong anyway.

After no end of aggravation with the newest version, I followed advice to downgrade to an older version of the plugin. I installed v1.8.1, and this worked flawlessly in my use case. I think I rather like the draggable list items better than the draggable tiles anyway. Thanks @aurovrata for a very useful plugin.

Yes, thanks, that much is clear. But I still see some odd behavior:

1. I went in today to make further changes and found that the reorder grid was not responsive to the mouse at all. Inspector showed there were no drag events attached to draggable-objects except for the first one, and I could not select or drag any of them. Nothing was reported in debug.log. Logged out, and back in: no change. Nothing seemed to work, so I killed the browser, and everything else, and rebooted. Returning to the site, I found it working, so I suspect there’s some sort of js/dom, or caching problem somewhere.
2. When the site was working again, I found the same peculiar ordering problem: posts for a category on the front end were ordered as defined in the admin page. I reordered the posts on the admin page in the reverse of the desired order, ie. with the topmost post rightmost in the grid. Then I checked the front end, and posts were in the desired order. I returned to the admin page and found that the posts are now ordered as expected with the top post leftmost in the grid.

Thanks @bcworkz, that was quite helpful. Rookie mistake, yes. I can remember making the same mistake when I first built something in PHP decades ago.

It’s actually impossible to access the YT play button and disable it with JS because the button lies within an externally sourced iframe. Being able to access it is seen as cross-site scripting, which is blocked for security reasons.

In a different context, and without all this PHP, I embeded a vimeo player in a page and found it had an easily accessible API so that I could do this:

<script>
  function unloadVimeo(player) {
    var p = new Vimeo.Player(document.getElementById(player));
    p.unload();
  }
</script>

where player is the ID of a dom element. YouTube has no similar API?

I like your static images with modal player idea, but I’m trying to keep the extra code to a minimum

As to user’s bandwidth; yeah, you’re right.

j

Thanks Ross. Yes, in retrospect it’s clear that was not the most edifying post. Indeed the whole end of a sentence failed to survive some copy/paste operation. As it happens, I managed to figure it out myself, so for those few who are as clueless as I: The solution lies in reading the CSS rule accurately.

The relevant rule, in part, says this:

.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    height: 100%;
    object-fit: cover;
    ... etc.
}

The rule is for an img tag, and it says that the height of the image should be 100% of the container size. So long as that’s true, there’s no point moving the image around with transform, because the rest of the image isn’t there. (duh!) As soon as I figured that out, the solution was a little clearer:

(edited)

.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    height: initial;
    left: 0;
    object-fit: cover;
    top: 0;
    transform: translateX(0%) translateY(-57%);
}

height: initial gives you the whole image, which can then be moved around as needed to get that part of the main header image you want for the post or page header: transform: translateX(0%) translateY(-57%);

Thanks again, and sorry for the noise.