How to make header images bigger in Pages?

[MMXII]

When I use the default pages templates with no modification and I create an article with an image, this is what i get when I open the article:

The header image always is in the top left corner and there seems to be no way to make it bigger or smaller by default. Now I wonder what do I have to do in order to stretch it so that the complete header will be filled with the article image? Maybe the height can be fixed at 350px, but the width should definetly cover the whole header area.

I assume I have to edit the templates? I went to AdminCP > Pages > Templates > HTML/Database Template > Display > record, because I assume that is the place to look for (I am not sure though). Unfortunately what I see there does not help me at all. What line needs to be edited? 😞

[Davyc]

9 minutes ago, MMXII said:

When I use the default pages templates with no modification and I create an article with an image, this is what i get when I open the article:

Link to your site please showing where the articles are - some CSS changes should give you what you want 🙂
 

[MMXII]

It is a localhost test installation. No edits to the default IPS Community installation.

Edited July 4, 2021 by MMXII
Typo

[Hisashi]

In articles the images are instructed to be displayed in thumb, it is necessary to change code to display the original image

Edited July 4, 2021 by Hisashi

[opentype]

It shouldn’t look like this. The image should float next to the text. 

Minor changes to the size/placement could be made with CSS alone. Note that the image sits inside a container and BOTH need to be changed to make the image bigger.

For bigger changes, the template needs to be edited. Important: Don’t change the default template though! Create a new template of the same type and assign it to the database first. Then you can change your custom template. 

[Davyc]

@MMXII I've made the changes on my own site if you want to take a look. 

https://moviebuffs.org/franchises/

It's one template edit and a couple of CSS changes to put in your custom CSS file.

I have to agree with @opentype that your image should be next to the text and not above it if this is the default look.

Let me know if you want the changes 🙂

 

[MMXII]

On 7/4/2021 at 7:18 PM, opentype said:

It shouldn’t look like this. The image should float next to the text. 

All templates show up as unmodified in the AdminCP, but if you guys say the image should be positioned differently by default, something might be wrong there.

On 7/6/2021 at 4:41 PM, Davyc said:

I've made the changes on my own site if you want to take a look.

Yes, that is exactly what I want to achieve (except maybe less height, let's say 50% of yours). Is it difficult to use that for entries of a Pages database?

[Davyc]

The height of the image is the height you make it, mine are set at 1498 x 686 which covers the max width of the layout container, however with some slight changes to the CSS you can use whatever height you want and restrict the height shown.  

I'll get all the changes together in a file and drop them in here later today 🙂

 

[Davyc]

OK Here we go.

Login to your ACP and go to the Pages templates (not the theme templates).

Locate the template named 'Entry' it's usually the first one already opened, but check.

Locate the following code:

<div class='ipsColumn ipsColumn_medium'>
				<div class="cCmsRecord_image">
					<img class="ipsImage" src="{file="$record->_record_image_thumb" extension="cms_Records"}">
				</div> 

Move the middle two lines up (see next code) and comment out the existing code (see below) so it looks like this:

<div class="cCmsRecord_image">
					<img class="ipsImage" src="{file="$record->_record_image_thumb" extension="cms_Records"}">
				</div>
	<div {{if $record->record_image}}class='ipsColumns ipsColumns_collapsePhone'{{endif}}>
		{{if $record->record_image}}
		<!--	<div class='ipsColumn ipsColumn_medium'>
				<div class="cCmsRecord_image">
					<img class="ipsImage" src="{file="$record->_record_image_thumb" extension="cms_Records"}">
				</div> 
			</div>-->

Now we need to make some entries into your custom CSS file in the theme settings:

To use a fixed height for your images as defined by the height of your images add this:

/* Change floats and size for CMS record image */
.cCmsCategoryFeaturedEntry .cCmsRecord_image {
    float: none;
}
.cCmsRecord_image {
    float: none;
}
.cCmsCategoryFeaturedEntry .cCmsRecord_image img {
    max-width: none;
    max-height: none;
}

If you want your existing images to retain their height but you want less of it displayed use this as well as the above CSS:

.cCmsCategoryFeaturedEntry .cCmsRecord_image {
    float: left;
    margin-right: 15px;
    margin-top: 4px;
    max-height: 200px !important;
    overflow: hidden;
}

Change the max-height to whatever you want.  If something isn't being changed try adding !important after each line until you see the changes happening.

Any issues let me know 🙂

 

[MMXII]

Let me start by saying thank you @Davyc for looking into this! I have to say, I am shocked that all this above (obviously) has to be done just to change such a simple thing like an image. IPS has much to improve regarding their CMS, if they actually want to compete with others in this area. Probably the current way it is provides maximum flexibility for anybody being experienced with coding, but this feels like late 90s/early 2000s... Today there ARE ways to provide both maximum flexibility for those who want/need it and easy-to-use software for those who do not -- and still allow them to create awesome-looking pages.

Now, regarding your suggested changes:

On 7/8/2021 at 10:37 AM, Davyc said:

Login to your ACP and go to the Pages templates (not the theme templates).

Locate the template named 'Entry' it's usually the first one already opened, but check.

In my case nothing is preselected. The only place where I found 'entry' is under html > database templates > Category Articles. I assume this is the correct one?

Now I changed the code from:

to:

On 7/8/2021 at 10:37 AM, Davyc said:

Now we need to make some entries into your custom CSS file in the theme settings

Theme settings (AdminCP > Customization > Themes), right? Not additional CSS in the Pages templates section?

I added your code to the custom.css in the theme settings, saved everything, cleared the browser cache and, just to be sure, even did the 'something isn't working' thing (Support via AdminCP, which also says that some cache has been cleared). However, nothing has changed in the frontend. The article list and the article itself still look the same. 😞

[Davyc]

32 minutes ago, MMXII said:

I am shocked that all this above (obviously) has to be done just to change such a simple thing like an image. IPS has much to improve regarding their CMS, if they actually want to compete with others in this area.

I couldn't agree more - I've been in two discussions about how lamentable the Pages app is in a modern day environment where so much is streets ahead, but that's in another discussion.

Can you provide me with a link to your site and where your pages listing is - there may be something different about your layout as it doesn't appear correct even though you're using the default template.  If you want to keep your site private from here you can PM me a link, once I see how things are being displayed I should be able to help you more, also can you tell me what version of IPS you are using? If you want to give me ACP access that may be quicker 🙂

 

Edited July 11, 2021 by Davyc
Missed details out