You need to be logged in to post in the forum - Log In
An active JCE Pro Subscription is required to post in the forum - Buy a Subscription
Support is currently Offline
09:00 - 17:00 Europe/London (BST)
Please create a new Ticket and we will get back to you as soon as we can.
#114973 Fix width and height size of images in JCE Columns
This is a public ticket
Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.
Latest post by hundenarr on Monday, 23 October 2023 14:01 BST
Thursday, 19 October 2023 15:47 BST
Friday, 20 October 2023 09:49 BST
To get the same width and height for all images, I put in the same sizes in Image Manager field dimensions and removed the checkbox for proportional.
The Proportional checkbox sets whether the other image size value is calculated if you change one of them, eg: if you change the width, then the height is calculated proportionally in relation to the width. Unchecking the box prevents this, so you can set the width and height to any value.
But, setting the width and height to values that are not in proportion to the original image (eg: setting the dimensions of a 800 x 600 image to 400 x 400), won't necessarily display the image in the front-end to those dimensions because of some common css included in many templates to allow for responsive images. Even without this css, setting non-proportional dimensions will distort the image.
Displaying different sized images at the same size in Columns (or tables or other containers) is quite difficult and would involve additional css. Therefor the easiest way to do it is to ensure the images are of the same proportions before inserting them, ie: resize them on upload using the same width and height, and set to the "Crop to Fit" option in the upload dialog.
Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Friday, 20 October 2023 10:30 BST
On some wordpress websites I use Column containers with GenerateBlocks Plugin. There I can achieve that with using an option which assigns the same
aspect ratio 3:2 to the used images.
Friday, 20 October 2023 10:33 BST
On some wordpress websites I use Column containers with GenerateBlocks Plugin. There I can achieve that with using an option which assigns the same
aspect ratio 3:2 to the used images.
I suspect this is setting the image as a background-image of the container, which is easier to set the sizing of. Can you post a link to an example?
Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Friday, 20 October 2023 11:07 BST
Friday, 20 October 2023 11:09 BST
.columns_background_image {}
.columns_background_image .wf-column p {
background-size: cover;
background-position: center;
width: 100%;
min-height: 400px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
}
To insert your columns, click the Columns button, select the number of columns and other values, then select "columns_background_image" from the Classes list. Click Insert.
Click in the first column, then click the Edit Styles button (icon of 2 different sized A characters), then click on the Background tab. Select an image or paste in the url in the Background Image field, then click Update. Repeat for each column.
Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Friday, 20 October 2023 11:19 BST
.wf-column img {
aspect-ratio: 3/2;
object-fit: cover;
}
Then insert the image directly into the column, rather than using a background image. This doesn't appear to give the uniform layout of the background-image. Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Friday, 20 October 2023 11:22 BST
.columns_background_image {}
.columns_background_image .wf-column p:first-child {
background-size: cover;
background-position: center;
width: 100%;
min-height: 400px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
}
Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Friday, 20 October 2023 13:39 BST
If I use in JCE configuration: Template CSS file, I can use all the template standard settings. But if I try to use a file specified in the Custom CSS File field there are no settings to choose in JCE Editor.
I tried with the real file path according to FTP
templates/$template/custom/scss/custom.scss
As a test, I also added the compiled path that is displayed in the page source code,
templates/$template/custom/css-compiled/citadel_13.css
Then at least the standard CSS options of the template appear, but still no custom information.
Is this due to the use of scss file? However, according to the template framework, I should not enter custom code in a css but only in the custom.scss.
Friday, 20 October 2023 14:42 BST
Is this due to the use of scss file?
JCE does not load scss files into the editor, but if you are adding the code to the custom.scss file, and it is getting compiled into the template css file, then that should be fine.
Did you add the empty css file as well as the one with all the styles in it? Both are required.
Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Monday, 23 October 2023 14:01 BST
templates/$template/scss/citadel.scss
templates/$template/custom/scss/custom.scss
templates/$template/custom/css-compiled/citadel.css
templates/$template/custom/css-compiled/custom.css
templates/$template/custom/css-compiled/citadel_13.css
templates/$template/custom/css-compiled/custom_13.css
templates/$template/custom/css-compiled/citadel-joomla.css
but there is still no columns_background_image option to choose.
There are several other css files in compiled folder (citadel-joomla_14.css, citadel-joomla_145.css and so on) and other folders. Also some more I find in web page sourcecode (screenshot attached). I don´t think it helps or would be necessary to add them all?
Please wait
Your post is being submitted…