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

Official support hours
Monday to Friday
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

Posted in ‘Editor’
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

hundenarr
I want to use images with a little bit different width and height in JCE Columns. 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. But the images have still different size. When I open Image Manager again, the Proportional checkbox is activated again. But I could not find a default setting to change in JCE Editor Parameters. How is it possible to give those images the same size in JCE columns?

Friday, 20 October 2023 09:49 BST

Ryan
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.

https://cdn.joomlacontenteditor.net/tmp/114973-fix-width-and-height-size-of-images-in-jce-columns.jpg

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

hundenarr
I see, the problem is, that these images are external hosted. So I don´t have the opportunity to use the "Crop to Fit"option. Any other hint for an alternative to achieve the same size in JCE settings or how to add an appropriate simple css?

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

Ryan
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

hundenarr
Yes, of course. https://bretagne-mit-hund.de/ferienhaus-sauna/

Friday, 20 October 2023 11:09 BST

Ryan
Here is a potential solution. Add the following to your template stylesheet (or custom.css or user.css if your template has one) 

.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. https://cdn.joomlacontenteditor.net/tmp/114973-fix-width-and-height-size-of-images-in-jce-columns-2.gif

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

Ryan
Another option is to use a similar approach to the Wordpress site, and add the following to the template stylesheet: 

.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

Ryan
If using the background-image approach, adjust the css so that only the first paragraph is affected: 

.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

hundenarr
That sounds good! I would be very curious to try this. But I'm struggling with the ability to use the custom code in the JCE editor. The custom.css file has existed for a long time and is already used in the live website. When trying to use the classes in the JCE editor, none of the CSS defined in custom.css are displayed for selection (template compiled, joomla and browser cache cleared).

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

Ryan
Which template are you using? JCE can usually load the appropriate custom.css file if it exists.
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

hundenarr
I added already on friday a list of files
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?

Attachments

css-list.png