Elemental Image Block limited to image width and centered?

Permalink
I can see that when I add an image to the image block, I can set the image's max width and height.

But what I'd like to do is set the width of the image block itself to the max width of the image it holds (or even to a px size, if the dynamic isn't possible).

And I'd like my image block to then be centered on the page.

Attached are images of what I want (from the website I'm converting) versus what I have.

I understand what I am asking for requires CSS code, I'm just not sure where to put the code (in css/build/blocks/image.less)? and I'm not sure what CSS code would do the trick.

I see there is a .ccm-image-block container, so something like:

<style>
.ccm-image-block {
  max-width: 960px
  float: none
}
</style>


maybe? I cannot see a way to do what I want through the CMS, if it is there, please let me know.

Thanks!
Heather


Update:

I have created a "Page Header" area for my templates (not global so I can have a different image on each page). I tried adding padding to the page header, and while I see the left padding applied, I don't see the right padding applied.

So that was another attempt that I don't think works...

2 Attachments

HeatherMyers
 
MrKDilkington replied on at Permalink Best Answer Reply 3 Attachments
MrKDilkington
Hi HeatherMyers,

If you are using an image that is 1140px wide (to match the content area for the large Bootstrap breakpoint), then you can try this:
img.ccm-image-block {
    padding: 2%;
    background: white;
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.4);
}

I have attached screenshots of what it looks like at different breakpoints.

This will target all images, so you will probably want to add another selector on the parent in the page template to target.

For convenience, the CSS can be put at the bottom of main.less.
HeatherMyers replied on at Permalink Reply 4 Attachments
HeatherMyers
MrKDilkington,

Ahh, therein lies the problem. Since I am converting a webpage, all my header images have a width of 960px. So I wanted to limit the image block to 960 or thereabouts (given the border etc)

So right now with your code I get the attached image.

Perhaps what I need is to set up a container within my Page Header area? Or just make new sections in my <main>? I'm attaching my current right_sidebar.php.

Perhaps what I need to do is similar to what is in main, in that it is split into 8/4 for area 'Main' and area 'Sidebar'.

Maybe for my image area, I could break that into 1/10/1 for 'Empty' 'Image' "Empty'?
Is there a way to set a size on a grid, such that the middle piece could be 980px wide?

Update:: I tried changing my pages to have the grid container as mentioned above, and it will do, see attached image and updated right_sidebar_new.txt. So I think I'm good to go. It isn't the most elegant solution, but is satisfactory!

I want to thank you for all the help you've given me these two weeks. I'm very close to having our new website ported from joomla into concrete5 (boss's requirement, as he didn't like the joomla interface, too complicated). I wouldn't be anywhere without your helpful expertise.

Thank you for the shadow-box code, I did not know how to do that

Sincerely,
Heather

Update2:: After showing my boss the pages with the centered image, he thinks we should recreate all the images to the larger size....