How insert logo image in subtitle area?

Now trying variations on this, using Page ID and also regex …

function replace_subtitle($content) {
    if( is_page(511) ){
    $string = $content;
	$pattern = '(<)(p)( )(class)(=)(")(subtitle)(")(>)(<)(\\/)(p)(>)';
	$replacement = '<img src="protocol/domain/path/image.png" alt="text" />';
        $content = preg_replace($pattern, $replacement, $string);
        }       
        return $content;
}
add_filter('the_content', 'replace_subtitle');

• This reply was modified 6 years, 11 months ago by lukefive.

Hello there,

Using jQuery code will be a lot easier, I think. Try doing the below steps:

1. Install and activate the TC Custom JavaScript plugin
2. Go To Appearance > Custom JavaScript
3. Paste the following code into the provided box

jQuery(function($) {

  if( $('.header-slider').length ){

    var img = '<img src="https://yoursite.com/path/to/your/image.png" alt="Image alt text" style="display:block;margin:0 auto;" />';
    $('.header-slider .slide-inner').append(img);

  }

});

4. Update

Regards,
Kharis

Kharis that looked very promising. But we are having big image size problems. It wants to go full screen width. Here is what I have tried…

The jQuery:

jQuery(function($) {
if( $('.header-slider').length ){
var img = '<img src="/wp-content/uploads/2017/12/BCCI-Logo-150px-blackback2.png" style="display:block;width:150px !important;height:73px !important;margin:0 auto;" />';
$('.header-slider .slide-inner').append(img);
}
});

This CSS to our stylesheet…

div.slider img {
width:150px !important;
height:73px !important;
}

What we are actually seeing in the source…
<img src="/wp-content/uploads/2017/12/BCCI-Logo-150px-blackback2.png" style="display: block; width: 1503px; height: 731.46px; margin: 0px auto; backface-visibility: hidden; position: absolute; left: 0px; top: -112px; z-index: -1; max-width: none;">

We have lost too much time tinkering with this. Our client really wants their logo in the subtitle area. I may have to replace the Sydney splash page with static HTML that I can control/change.

Hello there,

Please try adding this extra custom CSS code:

.header-slider .slide-inner img {
  width: 100px !important;
  height: auto !important;
}

Regards,
Kharis

Kharis,
I should have time Thursday to try that.

Okay. Let me know how it works for you.

Regards,
Kharis

Last time I looked into this, I re-saved the functions.php file and now everything works fine. Apparently a problem with the cache. We need better diagnostic tools for WordPress.

Thanks Kharis for helping me.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis