Title duplicate on image

Hi! What theme are you using? Please send a screenshot of how the markup looks for the glitched portion of the page (right-click on the duplicated title text, click “Inspect”).

• This reply was modified 9 months, 3 weeks ago by i.lychkov.

Thank you so much for the quick response. I’m using Ronneby (DFDevelopment) in child mode.

This is the result of the inspect where I see the double title:

<div class="entry-thumb">
    <img src="https://www.mydomain.com/wp-content/uploads/2024/01/cf-trascrizione-preliminare-900x600.jpg" width="1920" height="1080" alt="<span class=" mnp-unread"="" data-cmp-ab="2" data-cmp-info="10"><span class="mnp-text mnp-text-dfd-ronneby_child">New</span><span class="mnp-title-text">Trascrizione del preliminare: ecco tutti i vantaggi</span>"/&gt;
</div>

in addition to seeing the title twice from what I see there is a “/&gt” character at the end of the code which is injected into the “ALT” of the image (Is it correct that the “ALT” of the images is used?).

Let me know if I can help you in any other way. Thank you very much!

You’re welcome, that’s no problem at all!

So the problem is that the theme appears to try to output the post’s title in the alt attribute of the image by calling the WP function the_title(). My plugin intercepts each call to the_title() and injects the markup of the marker if the post is unread. That normally works okay with standard WordPress themes.

One possible solution is to use the “Use JavaScript for showing markers” option, which was designed specifically for this kind of situation, but the problem here is that, as you said, it doesn’t work for you. We can try troubleshooting it. Try enabling it once again, and then Inspect the post’s title, where the “new” text is expected to appear, and show me what you find there. Also check if there are any JavaScript errors in the console.

Another option, which is worse, is altering the theme’s code and removing the alt attribute from the image. This solution is bad, though, because each time the theme gets auto-updated, this “fix” will get overwritten.

Right! I understand
Below are all the checks I was able to do, I will try to be as effective as possible to be able to give you my little support. The checks will be divided by step and each step will have different configurations in the plugin. Let’s start with the odyssey ??

1st Step in Post Loop

• Marker placement: Before post TitleMarker type: “New” Text
• Consider a post as read: after it was opened
• Flag ON A post only stays highlighted for 5 days after publishing
• Flag OFF Allow outside the post list
• Flag ON Use JavaScript for showing markers

Source on featured image

<div class="entry-thumb">
            <img src="https://www.mydomain.it/wp-content/uploads/2024/01/cf-trascrizione-preliminare-900x600.jpg" width="1920" height="1080" alt="<mnp-mark>Trascrizione del preliminare: ecco tutti i vantaggi</mnp-mark>" data-cmp-ab="2" data-cmp-info="10">
</div>

Source on post Title – NO NEW is present

<div class="dfd-blog-title"><a  data-cmp-ab="2"><mnp-mark>Trascrizione del preliminare: ecco tutti i vantaggi</mnp-mark></a></div>

In home page I have another custom loop with WP Bakery and this is the result on front. You can see that it’s printed inside the title.

<div class="dfd-blog-title widget-title" style=""><a  title="<mnp-mark>Trascrizione del preliminare: ecco tutti i vantaggi</mnp-mark>" data-cmp-ab="2">&lt;mnp-mark&gt;Trascrizione del preliminare: ecco tutti i vantaggi&lt;/mnp-mark&gt;</a></div>

No JS Error in console

2nd Step in Post Loop

• Marker placement: Before post Title
• Marker type: “New” Text
• Consider a post as read: after it was opened
• Flag ON A post only stays highlighted for 5 days after publishing
• Flag ON Allow outside the post list
• Flag ON Use JavaScript for showing markers

Source on featured image

<div class="entry-thumb">
            <img src="https://www.mydomain.it/wp-content/uploads/2024/01/cf-trascrizione-preliminare-900x600.jpg" width="1920" height="1080" alt="Trascrizione del preliminare: ecco tutti i vantaggi" data-cmp-ab="2" data-cmp-info="10">
</div>

Source on post Title – NO NEW is present

<div class="dfd-blog-title"><a  data-cmp-ab="2"><mnp-mark>Trascrizione del preliminare: ecco tutti i vantaggi</mnp-mark></a></div>

In home page Custom WP Bakery

<div class="dfd-blog-title widget-title" style=""><a  title="<span class=&quot;mnp-unread&quot;><span class=&quot;mnp-text mnp-text-dfd-ronneby_child&quot;>New</span><span class=&quot;mnp-title-text&quot;>Trascrizione del preliminare: ecco tutti i vantaggi</span></span>" data-cmp-ab="2">&lt;span class="mnp-unread"&gt;&lt;span class="mnp-text mnp-text-dfd-ronneby_child"&gt;New&lt;/span&gt;&lt;span class="mnp-title-text"&gt;Trascrizione del preliminare: ecco tutti i vantaggi&lt;/span&gt;&lt;/span&gt;</a></div>

1 Error JS in Console

mark-new-posts.js?ver=6.4.3:12 Uncaught TypeError: Cannot read properties of undefined (reading 'outerHTML')
    at HTMLDocument.<anonymous> (mark-new-posts.js?ver=6.4.3:12:28)
(anonymous) @ mark-new-posts.js?ver=6.4.3:12

Now, in Italy we say “it’s a bloodbath”. I have no idea how it can be solved, the problems seem many and different, but I thank you so much for your support.

Ah, I wish I could visit Italy one day!

Please do the following: open your blog page, wait for it to load, press F12, open Console, paste this:

document.getElementsByClassName('mnp-unread')[0]

and press Enter. Send me the response from the console.

“allow pasting” on DevTool

Case 1

• Flag OFF Disable for custom posts
• Flag ON Allow outside the post list
• Flag ON Use JavaScript for showing markers

mark-new-posts.js?ver=6.4.3:12 Uncaught TypeError: Cannot read properties of undefined (reading 'outerHTML')
    at HTMLDocument.<anonymous> (mark-new-posts.js?ver=6.4.3:12:28)
(anonymous) @ mark-new-posts.js?ver=6.4.3:12

Case 2

• Flag ON Disable for custom posts
• Flag OFF Allow outside the post list
• Flag ON Use JavaScript for showing markers

document.getElementsByClassName('mnp-unread')[0]
- undefined

Case 3

• Flag OFF Disable for custom posts
• Flag OFF Allow outside the post list
• Flag OFF Use JavaScript for showing markers

document.getElementsByClassName('mnp-unread')[0]

<span class="mnp-unread"><span class="mnp-text mnp-text-dfd-ronneby_child">New</span><span class="mnp-title-text">Trascrizione del preliminare: ecco tutti i vantaggi</span></span>

Case 4

• Flag OFF Disable for custom posts
• Flag OFF Allow outside the post list
• Flag ON Use JavaScript for showing markers

document.getElementsByClassName('mnp-unread')[0]
- undefined

I set the console to not handle any cache while it is being used

You don’t have to go through all the cases anymore! Thank you for the effort. Just leave “Use JavaScript for showing markers” enabled.

Now I have to ask you to try adding some temporary edits in the plugin’s code. Open wp-content\plugins\mark-new-posts\mark-new-posts.php. Go to line 259. Add the symbol “#” in the beginning of the line, so it should become

# if (!$this->new_posts_displayed) return;

Tell me if the problem persists, and the console output too.

wp-content\plugins\mark-new-posts\mark-new-posts.php Modified.

In a Post Loop it works fine, no problems with image properties.

<div class="entry-thumb">
            <img src="https://www.mydomain.it/wp-content/uploads/2024/01/cf-trascrizione-preliminare-900x600.jpg" width="1920" height="1080" alt="Trascrizione del preliminare: ecco tutti i vantaggi" data-cmp-ab="2" data-cmp-info="10">
</div>

The NEW label works good in post Title too (Post Loop and singular)

<div class="dfd-blog-title"><a  data-cmp-ab="2"><mnp-mark><span class="mnp-unread"><span class="mnp-text mnp-text-dfd-ronneby_child">New</span><span class="mnp-title-text">Trascrizione del preliminare: ecco tutti i vantaggi</span></span></mnp-mark></a></div>

The only problem I have is out of standard Post Loop (Flag ON Disable for custom posts), where I use widget, I see the post Title so:

<mnp-mark>Trascrizione del preliminare: ecco tutti i vantaggi<mnp-mark>

<a  title="Trascrizione del preliminare: ecco tutti i vantaggi" data-cmp-ab="2"><mnp-mark>Trascrizione del preliminare: ecco tutti i vantaggi<mnp-mark></a>

if it could intercept the class I could use CSS but it is printed directly in the title via JS. But this is already a great success ??

Okay, this is good! Though I can’t understand the remaining problem yet. Please explain it a bit more.

Also, let’s do another edit. Remove the ‘#’ character we added earlier and instead on line 63 change the number 10 to 100. Like this:

add_filter('wp_footer', array(&$this, 'marker_template'), 100, 2);

Tell me if the initial problem returns after doing this.

wp-content\plugins\mark-new-posts\mark-new-posts.php removed “#”
wp-content\plugins\mark-new-posts\mark-new-posts.php replaced “10” to “100”.

I confirm that the error regression has occurred. The problem has returned (JS error and title duplicated). Regarding what I mean to be outside the post Loop standard, I’ll try to explain myself better. The Ronneby theme offers the possibility of using WP Bakery with some customizations. Its operation, however, requires the same logic of publishing posts. I attach the screen and the source of the block.

Image: https://ibb.co/0Khzx4x

Source about Home WP Bakery block

<div class="title-wrap">
    <div class="dfd-blog-heading-wrap"><div class="dfd-blog-title widget-title" style=""><a  title="L’importanza delle foto per vendere casa" data-cmp-ab="2">&lt;mnp-mark&gt;L’importanza delle foto per vendere casa&lt;/mnp-mark&gt;</a></div>        <div class="dfd-meta-wrap">
        <div class="entry-meta meta-bottom">
            <span class="entry-date">7 Febbraio 2024</span> <span class="before-author">da</span>
            <span class="byline author vcard">
                <a  rel="author" class="fn" data-cmp-ab="2">
                Lino Mastroianni    </a>
            </span> <span class="before-category">in</span>
            <span class="byline category">
                <a  class="fn" data-cmp-ab="2">
                    <span class="cat-name">Affittare casa</span>
                </a>
            </span>
        </div>
    </div>
</div>
</div>

what else can I say… thank you, and thank you again.

If you need:
Home: https://www.casafocus.it/
Post Loop: https://www.casafocus.it/pubblicazioni/

• This reply was modified 9 months, 3 weeks ago by Redyan.

Try turning off “Allow outside the post list”, does it help?

Unfortunately it is not conclusive. Removing the flag from “Allow outside the post list” and keeping the flag on “Use JavaScript for showing markers” does not return the JS error but the situation is the same. In the Post Loop there is no NEW label and in the Custom WP Bakery in Home it is always printed in the title ??

I see. Well, let’s try this. Open wp-content\plugins\mark-new-posts\js\mark-new-posts.js, then after the 9th line add the following:

		for (var j = 0; j < el.childNodes.length; j++) {
			var n = el.childNodes[j];
			if (n.nodeType === 3 && n.nodeValue.indexOf('&lt;mnp-mark&gt;') !== -1)
				n.nodeValue = n.nodeValue.replace('&lt;mnp-mark&gt;', '').replace('&lt;/mnp-mark&gt;', '');
		}

After you’ve done editing the file, refresh the blog’s page with Ctrl+F5 (otherwise the old cached version of the js file will stay).

It’s a bit hacky, but if it will fix the markup, I’ll add it to the plugin.

Question: do you need the “New” markers to show at all in Custom WP Bakery? It’s going to be rather problematic if there’s a need for that.

Change made, now the JS is compiled as you asked. Unfortunately I don’t see any changes. While I have the console open I have no cache, I still cleared all cache manually.

Question: do you need the “New” markers to show at all in Custom WP Bakery? It’s going to be rather problematic if there’s a need for that.

No, it’s not essential, in this case I would have to find a way not to show a title constructed with <mnp-mark> otherwise I can’t keep it active as the recent post logic is still invoked.

If you agree we can do it this way, because I don’t want to commit you any further. I can try contacting the theme support and asking for their opinion on the matter.

let me know if you agree.

Please also try this one – in the same place in the .js file.

    for (var j = 0; j < el.childNodes.length; j++) {
        var n = el.childNodes[j];
        if (n.nodeType === 3 && n.nodeValue.indexOf('<mnp-mark>') !== -1)
            n.nodeValue = n.nodeValue.replace('<mnp-mark>', '').replace('</mnp-mark>', '');
    }