[Theme: Tiny Framework] Changing header image height cleanly
-
New to WordPress and css.
I have created and activated a child theme of Tiny Framework which is running well. I would like to change the header image height from 350 to a shorter value. I know that I can simply upload a shorter image, but I was hoping to try something more elegant that would support modifying the header image cropping to the new height for new image uploads.
What steps do I need to take to make that happen?
- I looked at the parent inc/custom-header.php file and saw that their is a value of 350 there for height. Is that the all I need to modify for the child theme?
- If so, what is the best way to wire that into the child theme?
-
Try just to create inc/ in the child theme and copy custom-header.php from parent, modify value and I think it should work.
I tried that earlier, but I must be missing a key step as it doesn’t seem like the child theme’s inc/custom-header.php file is getting pulled in and instead it is still using the parent theme’s files.
Key notes are that the customization widget still offers a cropping for 960×350 pixels and the displayed image is unchanged.
Most likely I was wrong about including custom-header.php…
You can use functions.php for that… I forgot… Please see:
2.3 – Tip07 – Add new image size for custom post/page headers and select default header image (also see Tip39 in style.css).
You can use add_image_size to create your new size
Thanks, but I appear stuck.
I added this to functions.php
// 3.10 – Tip07 – Add new image size for custom post/page headers and select default header image.
add_image_size( ‘custom-header-image’, 960, 150, true); // Hardcropas you suggested, but it had no effect.
I couldn’t find Tip39 anywhere in style.css, including the documentation on your site which seems to end at Tip37. I also looked for header-image entries in the css that might be relevant but all I saw were border and padding values, which won’t help.
Is there an easy way to just include the custom-header.php file, change the height value, without having to copy all of the theme contents down to the child?
I tried overriding the parent theme by adding this block to the functions.php in the child:
require( get_template_directory() . ‘/inc/custom-header.php’ );
}to pick up the local inc/custom-header.php and modified that file as shown below but that generates a failure
Fatal error: Cannot redeclare tinyframework_custom_header_setup() (previously declared in /home/guthar5/public_html/wp-content/themes/tiny-framework/inc/custom-header.php:21) in /home/guthar5/public_html/wp-content/themes/tiny-framework/inc/custom-header.php on line 65<?php
/**
* Custom Header functionality for Tiny Framework.
* @link https://codex.wordpress.org/Custom_Headers
*
* @package Tiny_Framework
* @since Tiny Framework 1.0
*/// Child function override
function remove_parent_theme_features() {
remove_action( ‘after_setup_theme’, ‘tinyframework_custom_header_setup’ );
add_action( ‘after_setup_theme’, ‘child_tinyframework_custom_header_setup’ );
}/**
* Set up the WordPress core custom header arguments and settings.
*
* @uses add_theme_support() to register support for 3.4 and up
* @uses tinyframework_header_style() to style front-end
*
* @since Tiny Framework 1.0
*/
function child_tinyframework_custom_header_setup() {
$args = array(
// Text color and image (empty to use none).
‘default-text-color’ => ‘515151’,
‘default-image’ => ‘%2$s/images/headers/Tiny-Framework-header-01.jpg’,// Set height and width, with a maximum value for the width.
‘height’ => 200,
‘width’ => 960,
‘max-width’ => 2000,// Support flexible height and width.
‘flex-height’ => true,
‘flex-width’ => true,// Random image rotation off by default.
‘random-default’ => false,// Callbacks for styling the header and the admin preview.
‘wp-head-callback’ => ‘tinyframework_header_style’,
);add_theme_support( ‘custom-header’, $args );
/* Default custom headers packaged with the theme.
* %s is a placeholder for the theme template directory URI.
* %2$s is a placeholder for the (child) theme stylesheet directory URI.
* I’m using %2$s to make it easy for the user to replace default header images in a child theme.
* @link https://codex.wordpress.org/Function_Reference/register_default_headers
*/
register_default_headers( array(
‘First’ => array(
‘url’ => ‘%2$s/images/headers/Tiny-Framework-header-01.jpg’,
‘thumbnail_url’ => ‘%2$s/images/headers/Tiny-Framework-header-01-thumbnail.jpg’,
‘description’ => esc_html_x( ‘First’, ‘header image description’, ‘tinyframework’ )
),
‘Second’ => array(
‘url’ => ‘%2$s/images/headers/Tiny-Framework-header-02.jpg’,
‘thumbnail_url’ => ‘%2$s/images/headers/Tiny-Framework-header-02-thumbnail.jpg’,
‘description’ => esc_html_x( ‘Second’, ‘header image description’, ‘tinyframework’ )
),
‘Third’ => array(
‘url’ => ‘%2$s/images/headers/Tiny-Framework-header-03.jpg’,
‘thumbnail_url’ => ‘%2$s/images/headers/Tiny-Framework-header-03-thumbnail.jpg’,
‘description’ => esc_html_x( ‘Third’, ‘header image description’, ‘tinyframework’ )
),
) );
}
add_action( ‘after_setup_theme’, ‘child_tinyframework_custom_header_setup’ );I assume you are using your own child theme. Could you try the one that is bundled with the Tiny Framework? It’s in the /inc/examples.
Yes, I tested with bundled child theme – it works.
just uncomment that whole section:
function tinyframeworkchild_custom_header_setup…
and then inside this section uncomment only:
'height' => 350,and change it to 150.
That did the trick. Thanks a bunch!
Could someone please help me out? I’m just about finishing the conversion of my website (real-memory-improvement.com) to the WordPress format, and I’m using the Tiny Framework (child theme). It’s been excellent, but there are a few things about it I’d like to change.
I want to make the body text a little smaller.
I want to do away with the ‘opens in a new tab’ icons for the links.
I want to style headings with different sizes and maybe a colour.
And there are probably a few other things, but nothing major, just little changes.I’ve managed a few little changes myself but generally I can’t seem to get the hang of it.
For the link icons, for example, I’ve tried uncommenting the lines of code in Tip 25b. Nothing changed.
I tried copying them and pasting them into the custom CSS. Nothing changed.Clearly I don’t know enough about CSS, or I’m just missing something that’s probably obvious (althoug not to me … obviously!).
If someone could give me a hand I’d appreciate it. Thank you!
We cannot make a free site customization here, but if you will go through previous support questions, you will see that many of them are already answered.
The topic ‘[Theme: Tiny Framework] Changing header image height cleanly’ is closed to new replies.
