How to make the Header Image editable without Themler

justin14
14 Posts
justin14 posted this 08 September 2015

Hi,
I'm creating a wordpress theme using Themler. The customer has asked for there to be a feature whereby he can select/change the header image.
I see that there are things you can edit through Appearance>Customize and Appearance>Theme Options. However, the header image isn't one of them.
I obviously will not leave themler installed on his site so he can make his modifications.
The header is very simple in that it is just a picture and a vertically centered logo at the top of it. So, how can I go about adding this option in for him?
Many thanks.

Hi, I'm creating a wordpress theme using Themler. The customer has asked for there to be a feature whereby he can select/change the header image. I see that there are things you can edit through Appearance>Customize and Appearance>Theme Options. However, the header image isn't one of them. I obviously will not leave themler installed on his site so he can make his modifications. The header is very simple in that it is just a picture and a vertically centered logo at the top of it. So, how can I go about adding this option in for him? Many thanks.

Last edited 08 September 2015 by justin14

Vote to pay developers attention to this features or issue.
11 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 08 September 2015

Hi,

There is no possibility to add the header image as the editable element in the Theme options. But you can add the widget area in that place and then the user will be able to edit the image as the widget content.

Sincerely,
Hella
BillionDigital Team

Hi, There is no possibility to add the header image as the editable element in the Theme options. But you can add the widget area in that place and then the user will be able to edit the image as the widget content. Sincerely, Hella BillionDigital Team
Stagger Lee
1818 Posts
Is Solution
Stagger Lee posted this 08 September 2015

Add CMS Code control and this code. Make first own custom image size for headers and rebuild all images.
Let your Users manipulate header images via post/page featured image. Change image size name to your own when you prepare new image size.

This is all, dont expect more without a complex plugin.

<?php
                    // Check if this is a post or page, if it has a thumbnail, and if it's a big one
                    if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&
                            has_post_thumbnail( $post->ID ) &&
                            ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
                            $image[1] >= HEADER_IMAGE_WIDTH ) :
                        // Houston, we have a new header image!
                        echo get_the_post_thumbnail( $post->ID );
                    elseif ( get_header_image() ) : ?>
                        <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
                    <?php endif; ?>

Add CMS Code control and this code. Make first own custom image size for headers and rebuild all images. Let your Users manipulate header images via post/page featured image. Change image size name to your own when you prepare new image size. This is all, dont expect more without a complex plugin. <?php // Check if this is a post or page, if it has a thumbnail, and if it's a big one if ( is_singular() && current_theme_supports( 'post-thumbnails' ) && has_post_thumbnail( $post->ID ) && ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) && $image[1] >= HEADER_IMAGE_WIDTH ) : // Houston, we have a new header image! echo get_the_post_thumbnail( $post->ID ); elseif ( get_header_image() ) : ?> <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /> <?php endif; ?>
justin14
14 Posts
justin14 posted this 08 September 2015

Awesome - Thanks!!

Awesome - Thanks!!
Stagger Lee
1818 Posts
Stagger Lee posted this 08 September 2015

Man, I am testing all this **** on a regular theme. I doubt Themler remove all CSS and PHP code on block "delete".

Man, I am testing all this **** on a regular theme. I doubt Themler remove all CSS and PHP code on block "delete".
creativemediaexposure
8 Posts
creativemediaexposure posted this 16 October 2015

This code doesn't seem to work.
Where should we be placing the code?

This code doesn't seem to work. Where should we be placing the code?
Stagger Lee
1818 Posts
Stagger Lee posted this 16 October 2015

CMS control inside your header where you want image(s). Post/page view template.
Better not to use Themler header, add own row control.

CMS control inside your header where you want image(s). Post/page view template. Better not to use Themler header, add own row control.
creativemediaexposure
8 Posts
creativemediaexposure posted this 17 October 2015

I keep getting an error message. I must be missing something.

I keep getting an error message. I must be missing something.
Stagger Lee
1818 Posts
Stagger Lee posted this 17 October 2015

What is this error ? Copy and paste it here complete.

What is this error ? Copy and paste it here complete.
Stagger Lee
1818 Posts
Stagger Lee posted this 17 October 2015

This code snippet above is very strange. Seems as formatting here on forum changed it by time. I am not sitting on computer where I have this snippet. Will check it under day and write back.

This code snippet above is very strange. Seems as formatting here on forum changed it by time. I am not sitting on computer where I have this snippet. Will check it under day and write back.
Stagger Lee
1818 Posts
Stagger Lee posted this 17 October 2015

Here is better and improved snippet. Change image size name to your own. Manipulate image with CSS, you already have everything inside CMS Control - More styles - Images.

Impossible to put code here, formatting is a mess. And I have no time to figure out how to do it. It is support forum and code support has to be better.

Here is better and improved snippet. Change image size name to your own. Manipulate image with CSS, you already have everything inside CMS Control - More styles - Images. Impossible to put code here, formatting is a mess. And I have no time to figure out how to do it. It is support forum and code support has to be better.
Stagger Lee
1818 Posts
Stagger Lee posted this 17 October 2015

<?php // Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&
has_post_thumbnail( $post->ID ) && ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'tc_rectangular_size' ) ) && $image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'tc_rectangular_size' );
elseif ( get_header_image() ) : ?> <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>

&lt;?php // Check if this is a post or page, if it has a thumbnail, and if it's a big one if ( is_singular() &amp;&amp; current_theme_supports( 'post-thumbnails' ) &amp;&amp; has_post_thumbnail( $post-&gt;ID ) &amp;&amp; ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post-&gt;ID ), 'tc_rectangular_size' ) ) &amp;&amp; $image[1] &gt;= HEADER_IMAGE_WIDTH ) : // Houston, we have a new header image! echo get_the_post_thumbnail( $post-&gt;ID, 'tc_rectangular_size' ); elseif ( get_header_image() ) : ?&gt; &lt;img src=&quot;&lt;?php header_image(); ?&gt;&quot; width=&quot;&lt;?php echo HEADER_IMAGE_WIDTH; ?&gt;&quot; height=&quot;&lt;?php echo HEADER_IMAGE_HEIGHT; ?&gt;&quot; alt=&quot;&quot; /&gt; &lt;?php endif; ?&gt;
You must log in or register to leave comments