Reduce Blog Header Image and move it before the title

[gemlette]

I am on the craft theme.

How can I reduce the size of the header image to be the same size as my blog and move it under the title. 

[LordSamson]

Hi Gemlette
To reduce the size of the image, try any of these:
You will need to go to the specific page on your theme customization environment, on the left sidebar, find the Header or Image section settings; check if there are options to adjust the image size.

Look for layout options in the customization settings or you select the preset layout that adjusts image and text positions.

Reduce Image Size with Preset Options:

In many themes, under the image settings, you can select different sizes like "Small," "Medium," or "Large." Try choosing a smaller size or scaling down the image.

If there are options to crop or fit the image, experiment with these to match the size you want for the blog.

IF THESE ARE NOT AVAILABLE THEN YOU CAN USE CUSTOM CODE

[rajweb · Accepted solution]

Hi Gemlette,

To reduce the size of the header image and move it under the title in the Craft theme, follow these steps:

• Log in to your Shopify Admin Panel:

  • Go to your Shopify store and log in.

• Navigate to the Theme Editor:

  • From your admin dashboard, go to Online Store > Themes.
  • Click on Customize next to the Craft theme.

• Edit the Blog Page Template:

  • In the theme editor, navigate to the blog section by selecting the blog page from the drop-down menu at the top.

• Modify the Header Image Size:

  • In the left sidebar, you should see sections related to the page layout, including the header or banner.
  • Look for the Image settings for the header and adjust the height or size if available. If the theme doesn’t allow direct adjustment here, you might need to modify the theme’s CSS.

• Move the Header Image Under the Title:

  • If your theme editor doesn't give you an option to move the header, you’ll need to manually adjust the code.

• Edit the Theme’s Code:

  • Go back to Online Store > Themes, then click on Actions > Edit Code.
  • Look for the file responsible for the blog layout. This is likely under Sections or Templates and will have a name like blog.liquid or blog-template.liquid.

• Modify the Liquid Code:

  • In the blog template, you’ll find the code for the header image (usually wrapped in an HTML <img> tag or background property).
  • Move the code for the header image to a position below the blog title.
  • You may also need to adjust the CSS class or styling to reduce the size of the image. Look for the class name associated with the header image and modify its size by adding custom CSS in the Assets/theme.css file, or through the custom CSS section in your theme editor.
  • Example CSS: To reduce the size of the image, you can use CSS like:

.header-image-class {
  max-width: 100%;
  height: auto;
  width: [set your desired width];
}
​

[gemlette]

Thank you! These instructions are very clear