Developing (v7+)

 

MrKDilkington replied on Mar 25, 2015 at 9:21 pm Permalink Reply

Hi Deladroid,

Do you have a link to the page where this is happening?

Deladroid replied on Mar 25, 2015 at 9:31 pm Permalink Reply

It's not live/public yet, but here is an example page with the issue:
http://www.pnwu.net/index.php?cID=180...

justinforbez replied on Mar 25, 2015 at 9:38 pm Permalink Reply

I think I am having the same issue:
http://knoxdiscgolf.org/tournaments/events-schedule/old-city-open1/...

Here is another page that is working correctly:
http://knoxdiscgolf.org/tournaments/events-schedule/tommy-schumpert...

I am using the image block the same way on both pages with limiting width by 500 and height by 750. The first page does not seem to set the options correctly.

Concrete5 version 5.6.3.3

MrKDilkington replied on Mar 25, 2015 at 10:00 pm Permalink Reply

@justinforbez

The image you are using is being sized based on its height and width (1700 x 2200 pixels). This is causing it to break out of the layout. It is too big for its containing element.

To make your image fill the available space in the layout. Add this to your CSS:

.ccm-image-block {
    width: 100% \9;
    max-width: 100%;
    height: auto;
}

The image is almost 1MB. To improve performance, it can be compressed down under 400KB without loss of quality.

justinforbez replied on Mar 25, 2015 at 10:13 pm Permalink Reply 1 Attachment

Agreed that I can edit my CSS but what I am not understanding is why image block did that for me and now I am having to manually edit the css.

Thanks for the tip on the image. I will resize.

This gui interface no longer works:
attached screenshot

settings are the same on both pages

MrKDilkington replied on Mar 25, 2015 at 9:45 pm Permalink Reply

@Deladroid

I am not quite sure what you are referring to. The images in the sample page can be overridden.

img {
max-width: 100%;
height: auto;
}

@media screen and (max-width: 800px)
img, img[class*="align"], img[class*="wp-image-"] {
max-width: 100%;
height: auto;
}

What were you trying to do?

Deladroid replied on Mar 25, 2015 at 9:58 pm Permalink Reply 1 Attachment

I'm trying to set the max-width and max-height within the block's settings, where you choose the image, and below there are those also. It doesn't matter what I put in there. I attached a screen shot.

MrKDilkington replied on Mar 25, 2015 at 10:06 pm Permalink Reply

@Deladroid

I am not sure why that would happen.

justinforbez replied on Mar 25, 2015 at 10:15 pm Permalink Reply

@Deladroid

Yes that is the exact issue that I am having. Now just find a fix. What version of C5 are you on?

I am trying to trace this down through the code but am not sure which css I should be looking at. I am assuming on one of the main c5 ccs sheets.

justinforbez replied on Mar 25, 2015 at 10:21 pm Permalink Reply

the class in question is ccm-image-block still not sure what css it is located on.

Deladroid replied on Mar 25, 2015 at 10:22 pm Permalink Reply

I wouldn't think we'd have to do anything with the c5 styling, but I could imagine maybe jquery styling could be overriding it. Something is overriding it, and it's hard to find, for sure.

Deladroid replied on Mar 25, 2015 at 10:21 pm Permalink Reply

I'm on 5.6.3.3

justinforbez replied on Mar 25, 2015 at 10:41 pm Permalink Reply

my quick fix is going to be to manually edit the pic to the pixel width i want and then upload but this was all working in 5.6.3.2. I don't feel comfortable downgrading so I am kind of stuck until I can figure out where that class is called and why it is not working the same in the lastest version.

lota replied on Mar 31, 2015 at 11:45 pm Permalink Reply

After upgrade from 5.6.3.2 to 5.6.3.3 seems Concrete5 not generate a copy of scaled images using Max Width attribute. Is not a CSS issue. Page link the original image loaded in file manager, that could be very large.

I hope core team fix the problem soon ;-)

HTH
Alessandro