Okay
  Public Ticket #3183426
Image in Post title
Closed

Comments

  •  24
    UK-Designer-Guy started the conversation

    I'm trying to find a way to add a company logo to a title

    We've created an installers page where we want to showcase the work of our customers

    https://ukroofingstore.co.uk/showcase-news/

    We want to show the featured image, and then in front show their logo. It occurred to me that I could simply place an image into the title with HTML:

    rubber_roofing_company_logo.png

    <img src="https://ukroofingstore.co.uk/wp-content/uploads/2022/12/rubber_roofing_company_logo.png">
    

    But as you can see on the page it seems to break the theme slightly . . .

    Rogue code appears at the top:

    " style="display: none;" />

    I also looked at this as a method :

    https://www.namehero.com/startup/how-to-put-an-image-in-the-wordpress-title/

    But I couldn't seem to find those "advanced panels" to switch on "custom fields"

  •  24
    UK-Designer-Guy replied

    I had considered creating this page with just images and but then you would not get the filter and post links and the features associated with posts.

  •  24
    UK-Designer-Guy replied

    Interestingly I noticed that if I dont put the > closing tag in the title behind the image code . . . id dont get the stray code issue . . . but I lose the rest of the text in the title . . 

    Is there a stray closing tag in the theme code ?

  •  24
    UK-Designer-Guy replied

    Realized that I cant put code in the title (cause it gets read as text by google . . . obvs . . . in listings . . . doh) so need to get this working :

    https://www.namehero.com/startup/how-to-put-an-image-in-the-wordpress-title/

    Appreciate your help on this


    EDIT: found this also 

    https://www.dreamhost.com/blog/guide-to-wp-custom-fields/

    Is it the WPBakery Page Builder thats the issue as none of whats been shown in these tutorials is happening ?

  •  24
    UK-Designer-Guy replied

    https://themenectar.ticksy.com/ticket/2761204/

    Disabling WPBakery as shown in the thread above. . . Does not allow Gutenberg to run.

    Is there any work around ?

  •  24
    UK-Designer-Guy replied

    Found this :

    https://shift8web.ca/2019/01/how-to-inject-advanced-custom-fields-into-your-wpbakery-post-grid/

    Author doesnt like WPBakery "Yes of course WPBakery / Visual Composer is bloated"

    Is there anyway his workaround could be incorporated into Salient ?

  •  2,958
    Andrew replied

    Hi There,

    Thank you for reaching out to us and for your patience on this.

    Have you tried adding custom headers to your pages? You can do this by changing this setting in your Salient theme settings and then adding a header section to your pages.

    4881156838.png

    You can then add a header to your page and add the HTML to the header section. 

    Let us know if this works for you.

    Thanks,

  •  1,070
    ThemeNectar replied

    Hey UK-Designer-Guy,

    You can enable the custom field metabox on your post by toggling the "Screen Options" button on the top of your edit post page:

    5258519536.jpg

    3897767990.jpg

    Kind regards

  •  24
    UK-Designer-Guy replied

    Hi ThemeNectar . . .

    Appreciate the reply

    I'm trying to get a small logo to appear next to the title of these post pages (the class is "entry-title"):

    https://ukroofingstore.co.uk/dwt-joinery-and-construction-with-a-conservatory-makeover/

    I'm also hoping that these logos as part of the title will be visible on this page also (the class is "post-heading"):

    https://ukroofingstore.co.uk/showcase-news/

    To showcase companies using our products.

    Like this

    Place-the-Image-Before-the-Title-1024x662.png

    I'm trying to follow this tutorial . . .

    https://www.namehero.com/startup/how-to-put-an-image-in-the-wordpress-title

    I enabled the custom fields as per your reply, but couldn't add a field without first picking one from a drop-down list. There didn't seem to be a way to write a blank customer field and add it. See the screenshot below :

    J4YODx.jpg

    So I chose a random one from the drop-down list and then once added, I tried to rewrite it . . . which it let me do, or at least I thought it had, and I thought woot this is gonna work . . . as per :

    New-Custom-Field-to-Hold-the-Image-1024x390.png

    Adding the code to the functions.php from the tutorial 

    function image_in_title( $title) {    if(get_post_meta(get_the_ID(), 'title_image', true)) {        $img_source = get_post_meta(get_the_ID(), 'title_image', true);        $title = '' . $title;    }    return $title;}add_filter( 'the_title', 'image_in_title');

    but . . . the image doesn't show . . .

    I realize this is not out-of-the-box stuff, but it would be a really cool feature to have in Salient if you could do this with the theme  . . .

    If you could help me troubleshoot Id be forever grateful . . . 

  •  1,070
    ThemeNectar replied

    Hey,

    1. The following snippet will take your custom field named "title_image" and use it to populate an image within the single post title: https://pastebin.com/3gCnQd9S

    2. It won't be possible to filter it into the post grid in the same way - you would need to override the "nectar_post_grid_item_markup" function (located in wp-content/plugins/salient-core/includes/post-grid/loop-markup.php) in your child theme and add it in there.

    Kind regards

  •  24
    UK-Designer-Guy replied

    Hi tried the additional snippet and it works bar a small issue with its breaking something else :

    with this showing in the header area :

    DWT Joinery and Construction with a Conservatory Makeover" style="display: none;" />

    https://ukroofingstore.co.uk/dwt-joinery-and-construction-with-a-conservatory-makeover/

  •  8,839
    Tahir replied

    There is likely a markup issue which is causing the extra text. Please check for unclosed tags .

    Thanks 


    ThemeNectar Support Team