Responsive Images in Content Block
Permalink
Hi folks,
I'm having an issue with images in the content block imported via redactor, when you import the image everything is good and it looks the way it should but as soon as you press save in redactor the images goes to it's full size.
I have went throughhttps://www.concrete5.org/documentation/developers/5.7/designing-for...
my page_theme file looks like this:
I have the corresponding thumbnails types created.
Anyone have any ideas?
I'm having an issue with images in the content block imported via redactor, when you import the image everything is good and it looks the way it should but as soon as you press save in redactor the images goes to it's full size.
I have went throughhttps://www.concrete5.org/documentation/developers/5.7/designing-for...
my page_theme file looks like this:
<?php namespace Application\Theme\Evergreen; use Concrete\Core\Page\Theme\Theme; class PageTheme extends Theme { protected $pThemeGridFrameworkHandle = 'bootstrap3'; public function registerAssets() { $this->providesAsset('javascript', 'bootstrap/*'); $this->providesAsset('css', 'bootstrap/*'); $this->providesAsset('css', 'blocks/form*'); $this->providesAsset('css', 'core/frontend/*'); $this->requireAsset('javascript', 'jquery'); $this->requireAsset('javascript', 'picturefill'); } public function getThemeBlockClasses()
Viewing 15 lines of 37 lines. View entire code block.
I have the corresponding thumbnails types created.
Anyone have any ideas?
Any ideas?
Hi gavthompson,
Do you have the problem when you switch to the Elemental theme?
Do you have the problem when you switch to the Elemental theme?
Hi KD,
The responsiveness works as intended with the Elemental Theme.
The responsiveness works as intended with the Elemental Theme.
Any help would be super, still haven't figured this one out yet.
Have you tried the standard steps like uninstalling and reinstalling the theme, making sure caching is turned off, and clearing the cache?
If you want to zip up your theme and attach it to your reply, I will take a look at it.
If you want to zip up your theme and attach it to your reply, I will take a look at it.
Yea done that standard stuff.
The inserted images do seem to switch between the different thumbnail sizes as you resize the window but not in a scaling manner.
I've attached the theme, very much appreciate your time.
The inserted images do seem to switch between the different thumbnail sizes as you resize the window but not in a scaling manner.
I've attached the theme, very much appreciate your time.
If the images are switching as you resize the window, then responsive images using the picture element/Picturefill are working.
Image scaling is controlled by CSS. Here is the responsive image CSS that Bootstrap uses.
Images with this class will fill the available space of the parent element.
Image scaling is controlled by CSS. Here is the responsive image CSS that Bootstrap uses.
.img-responsive { display: block; max-width: 100%; height: auto; }
Images with this class will fill the available space of the parent element.
If that code is cooked into Bootstrap shouldn't it be working ? what am I missing here >.<
Did you resolve this?
We're having the same problem image are not contained within the parent column
We're having the same problem image are not contained within the parent column
I didn't resolve it nope :(
Add to your CSS file:
div.ccm-page img {
max-width: 100%;
}
redactor doesn't add the img-responsive class to the images
div.ccm-page img {
max-width: 100%;
}
redactor doesn't add the img-responsive class to the images
Hi pvernaglia,
That did fix the responsiveness (YAY!).
Thanks!
EDIT:
height: auto also needed to to keep the aspect.
That did fix the responsiveness (YAY!).
Thanks!
EDIT:
div.ccm-page img { max-width: 100%; height: auto; }
height: auto also needed to to keep the aspect.