stuga
Forum Replies Created
-
I’ve found a workaround by writing a javascript snippet that I call by shortcode after the page is loaded. This finds all the offending Event Calendar list items, and tweaks their CSS to be correct.
Here’s the code:
/*
The original Events Calendar injects some CSS into the list view, in an attempt to conform images. Unfortunately it doesn’t work properly
This code fixes the problem
Bad code:
background-size: cover
Should be
background-size: contain
background-repeat: no-repeat
*/// Replace the bad CSS, after the page has loaded
window.onload = function () {
jQuery(‘div.ect-list-post-left div.ect-list-img’).css(‘background-repeat’,’no-repeat’).css(‘background-size’,’contain’);
}Forum: Plugins
In reply to: [The Events Calendar] same image sizeYour page is very different to mine, but I think the problem may be related.
I don’t like changing baseline code, as this increases the complexity during upgrades. However, I don’t mind writing software that patches the display in real time!!
You’re using quite different list tool to myself – I’m using the free version, which defines a maximum size for the image on the event list, then incorrectly turns it into a “cover”. If my image is the wrong size (the normal case) it is resized for different displays.
My fix was to write a javascript code snippet and run that after every page-load. This seems to have fixed my problem:
/*
The original Events Calendar injects some CSS into the list view, in an attempt to conform images. Unfortunately it doesn’t work properly
This code fixes the problem
Bad code:
background-size: cover
Should be
background-size: contain
background-repeat: no-repeat
*/// replace the bad CSS with good CSS
window.onload = function () {
jQuery(‘div.ect-list-post-left div.ect-list-img’).css(‘background-repeat’,’no-repeat’).css(‘background-size’,’contain’);
}