• Resolved Abid

    (@hussain76)


    We configured a code snippet to show ads before 4th paragraph.

    <input type="hidden" name="IL_IN_ARTICLE">

    Unfortunately this doesn’t word when the 4th paragraph is inside a twitter embed.

    <figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter">
    	<div class="wp-block-embed__wrapper">
    		<div class="embed-privacy-container embed-twitter is-enabled"
    			data-embed-id="oembed_657bd8e4095196ddce8fe5ecd44d2cb0" data-embed-provider="twitter"> <button
    				class="embed-privacy-enable screen-reader-text">Inhalt von Twitter anzeigen</button>
    			<div class="embed-privacy-overlay" style="display: none;">
    				<div class="embed-privacy-inner">
    					<div class="embed-privacy-logo"></div>
    					<p> Click here to display content from Twitter. <br> Erfahre mehr in der <a
    							 target="_blank">Datenschutzerkl?rung</a> von Twitter.
    					</p> <input type="hidden" name="IL_IN_ARTICLE">
    				</div>
    				<p class="embed-privacy-input-wrapper"> <input
    						id="embed-privacy-store-twitter-657bd8e4095196ddce8fe5ecd44d2cb0" type="checkbox" value="1"
    						class="embed-privacy-input" data-embed-provider="twitter"> <label
    						for="embed-privacy-store-twitter-657bd8e4095196ddce8fe5ecd44d2cb0" class="embed-privacy-label"
    						data-embed-provider="twitter"> Inhalt von Twitter immer anzeigen
    					</label> </p>
    			</div>
    			<div class="embed-privacy-footer"><span class="embed-privacy-url"><a
    						>Inhalt direkt
    						?ffnen</a></span></div>
    		</div>
    	</div>
    </figure>

    Is there any way to customize the insert-before-paragraph (via css selectors?) so that we have more control about the placement before a paragraph?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Mircea Sandu

    (@gripgrip)

    Hi @hussain76,

    Unfortunately, since the Twitter embed is coming from a different server (it’s hosted by Twitter) we can’t insert the content inside it with WPCode’s auto-insert locations. WPCode’s auto-insert options (even the CSS selector option available in the premium version) insert snippets server-side, before the page is rendered. The Twitter embed is likely loaded using JavaScript as the page is loaded by the browser so at that time all the server rendering of that part of the page is done.

    Let me know if I can provide more info.

    Thread Starter Abid

    (@hussain76)

    Ok thank you! Then we have to look forward to some other option to implement the desired behavior.

    Thread Starter Abid

    (@hussain76)

    Just a follow-up … html in the problematic pages looks like this.

    <div id="article-content-container" class="article-content read-more-container">
    
    	<p>Lorem Ipsum.</p>
    	<p>Lorem Ipsum.</p>
    	<p>Lorem Ipsum.</p>
    	<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter">
    		<div class="wp-block-embed__wrapper">
    			<div class="embed-privacy-container embed-twitter is-enabled"
    				data-embed-id="oembed_5499043cfe9c7141e2a0fd8a2701e3dd" data-embed-provider="twitter"> <button
    					class="embed-privacy-enable screen-reader-text">Inhalt von Twitter anzeigen</button>
    				<div class="embed-privacy-overlay" style="display: none;">
    					<div class="embed-privacy-inner">
    						<div class="embed-privacy-logo"></div>
    						<p> Click here to display content from Twitter. <br> Erfahre mehr in der <a
    								 target="_blank">Datenschutzerkl?rung</a> von Twitter.
    						</p>
    						<p class="embed-privacy-input-wrapper"> <input
    								id="embed-privacy-store-twitter-5499043cfe9c7141e2a0fd8a2701e3dd" type="checkbox"
    								value="1" class="embed-privacy-input" data-embed-provider="twitter" data-pxf_il="1">
    							<label for="embed-privacy-store-twitter-5499043cfe9c7141e2a0fd8a2701e3dd"
    								class="embed-privacy-label" data-embed-provider="twitter"> Inhalt von Twitter immer
    								anzeigen </label> </p><input type="hidden" name="IL_IN_ARTICLE" data-pxf_il="1">
    						<div id="IL_IN_ARTICLE_0" class="IL_BASE" data-hook-id="IL_IN_ARTICLE0"
    							style="margin: 5px auto; height: 5px; text-align: center; display: inline-block; padding: 0px; width: 0px; overflow: hidden; perspective: 1000px; transform-style: preserve-3d; transition-duration: 1000ms; transition-timing-function: ease-in;">
    							<div id="IL_IN_ARTICLE_CONTAINER_0" class="IL_BASE"
    								style="border-style: solid; border-width: 0px; border-color: rgb(202, 202, 202); position: relative; margin: 0px auto; width: 300px; height: 250px; transform: scale(0); transform-origin: 0px 0px; perspective: 1000px; cursor: pointer;">
    								<div data-il_in_article0_1_0_nza2fmrllwdvlmtlbgtvb2dyb3vwlm5lda=""
    									style="display: none"></div>
    							</div>
    						</div>
    					</div>
    					<div class="embed-privacy-footer"><span class="embed-privacy-url"><a
    								>Inhalt
    								direkt ?ffnen</a></span></div>
    				</div>
    				<div class="embed-privacy-content">
    					<div class="twitter-tweet twitter-tweet-rendered"
    						style="display: flex; max-width: 550px; width: 100%; margin-top: 10px; margin-bottom: 10px;">
    						<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true"
    							allowfullscreen="true" class=""
    							style="position: static; visibility: visible; width: 550px; height: 673px; display: block; flex-grow: 1;"
    							title="Twitter Tweet"
    							src="https://platform.twitter.com/embed/Tweet.html?dnt=true&amp;embedId=twitter-widget-0&amp;features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&amp;frame=false&amp;hideCard=false&amp;hideThread=false&amp;id=1711988938842235197&amp;lang=de&amp;origin=https%3A%2F%2Fapollo-news.net%2Fwir-haben-gefeiert-zuhause-schockierende-strasseninterviews-mit-muslimen-in-deutschland-ueber-israel%2F&amp;sessionId=cf2b38163ed4e75e65572093cd722cd5aa8edefd&amp;theme=light&amp;widgetsVersion=01917f4d1d4cb%3A1696883169554&amp;width=550px"
    							data-tweet-id="1711988938842235197"></iframe></div>
    					<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    					<script src="https://platform.twitter.com/widgets.js"></script>
    				</div>
    				<style>
    					.embed-twitter .embed-privacy-logo {
    						background-image: url(https://apollo-news.net/wp-content/plugins/embed-privacy/assets/images/embed-twitter.png?v=1.8.0);
    					}
    				</style>
    			</div>
    		</div>
    	</figure>
    
    	<p>Lorem Ipsum.</p>
    	<p>Lorem Ipsum.</p>
    </div>

    You see that the element IL_IN_ARTICLE is inside the twitter embed.

    You write that a CSS selector wouldn’t help. I do not understand this. Wouldn’t a rule like [before #article-content-container > p:nth-child(4)] fullfill the desired behavior?

    • This reply was modified 1 year, 1 month ago by Abid.
    Plugin Author Mircea Sandu

    (@gripgrip)

    Hi @hussain76,

    I apologise for the confusion here, as far as I can see from your example, you are using a plugin to prevent embeds from being automatically loaded – that HTML is rendered by PHP on your server so WPCode should be able to target that specific paragraph with either the “insert after\before paragraph” locations or the CSS Selector. That is not the default behaviour of the embed block in which you could not do that type of targeting since the content is loaded from an external website.

    Indeed, if that paragraph would not be loaded the content would get moved to the next paragraph in the article so you can limit that with CSS Selectors.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Insert before paragraph customizable?’ is closed to new replies.