-
Hi,
maybe you know a solution for that problem. I have always an image after the second paragraph. But now the blog posts have a new structure and the image should appear now after paragraph 3. Is there a way to change the position for all that pictures at once. I have added the images manually.
Greetings Kathrin
-
Hi there,
How did you add the image after the 2nd paragraph?
Are you using any custom functions? if so, please provide the function here and wrap the code with the
codetag. -
I added the images manually to the posts (upload / media library). I think that are no custom functions.
<!-- wp:image {"align":"center","id":15809,"sizeSlug":"full","linkDestination":"none"} --> <figure class="wp-block-image aligncenter size-full"><img src="https://www.topfgartenwelt.com/wp-content/uploads/2022/09/Foodblog_Topfgartenwelt_Feigenkuchen_2.jpg" alt="Feigenkuchen Rührteig - Foodblog Topfgartenwelt" class="wp-image-15809"/></figure> <!-- /wp:image -->You can find the link to that post in the private section.
Greetings Kathrin
-
I have always an image after the second paragraph. But now the blog posts have a new structure and the image should appear now after paragraph 3.
If this is the case, no, there isn’t a way to change the image position other than manually change the location, unfortunately.
-
Ok. So, when I have to do it manually. Would there a way that the next time a change would be possible with the help of some code?
Greetings Kathrin
-
Yes, you would need to:
1. create a custom hook after the 3rd paragraph. I see that you already have a function to add hooks after 1st paragraph, you can write new code based on that.
2. create a custom field for posts, so you can insert image URL to the custom field, like this:
https://app.screencast.com/rkkCEKDYcisMG3. In the block element which uses the custom hook, insert a GB image block, and pull the image from the custom field by setting image content source > post meta > custom field slug:
https://app.screencast.com/bUK8RdnNcorzjThen next time, if you want to change the position, you just need to modify the PHP code from step #1.
-
Maybe you can help me to modifiy the custom hook code? I don’t know much about PHP 🙁
I have created that code:
add_shortcode('portable_hook', function($atts){ ob_start(); $atts = shortcode_atts( array( 'hook_name' => 'no foo' ), $atts, 'portable_hook' ); do_action($atts['hook_name']); return ob_get_clean(); }); add_filter( 'the_content', 'insert_image_after_paragraph_3', 20 ); function insert_image_after_paragraph_3( $content ) { global $post; $inserted_hook = do_shortcode('[portable_hook hook_name="after_paragraph_3"]'); if ( is_single() && ! is_admin() ) { return prefix_insert_after_paragraph_3( $inserted_hook, $content ); } return $content; } function prefix_insert_after_paragraph_3( $insertion, $content ) { $paragraph_pattern = '/<p[^>]*>.*?<\/p>/s'; preg_match_all($paragraph_pattern, $content, $matches, PREG_OFFSET_CAPTURE); // Count the number of matches (paragraphs) $paragraph_count = count($matches[0]); if ($paragraph_count > 3) { // If there are less than two paragraphs, insert at the beginning return $insertion . $content; } // Find the position of the second-to-last paragraph $after_paragraph_3_position = $matches[0][$paragraph_count + 3][1]; // Insert content before the second-to-last paragraph $updated_content = substr($content, 0, $after_paragraph_3_position) . $insertion . substr($content, $after_paragraph_3_position); return $updated_content; }But the image isn’t shown after paragraph 3.
The Test-Link is in the private section.
Which value I should choose for the image Array, URL or ID? https://imgur.com/a/0zZLzJB – I have chosen ID for the moment.
One important question: When I’m doing that are the images delivered from the cache or is that all dynamic?
Greetings Kathrin
-
Try replacing the
prefix_insert_after_paragraph_3function with below code:function prefix_insert_after_paragraph_3($insertion, $content) { $paragraph_pattern = '/<p[^>]*>.*?<\/p>/s'; preg_match_all($paragraph_pattern, $content, $matches, PREG_OFFSET_CAPTURE); // Count the number of matches (paragraphs) $paragraph_count = count($matches[0]); if ($paragraph_count < 3) { // If there are less than three paragraphs, insert at the beginning return $content . $insertion; } // Find the position after the third paragraph $after_paragraph_3_position = $matches[0][2][1] + strlen($matches[0][2][0]); // Insert content after the third paragraph $updated_content = substr($content, 0, $after_paragraph_3_position) . $insertion . substr($content, $after_paragraph_3_position); return $updated_content; } -
Thank you very much. Better but still not the right place. The image should appear here: https://imgur.com/a/4jO0L1S
Now it looks like that: https://www.topfgartenwelt.com/eisenbahner-kekse-backen
Greetings Kathrin
-
Which image are you referring to? Maybe share a screenshot of the current image location?
-
No problem, here is an image. I have updated the link: https://imgur.com/a/4jO0L1S
Here is the link to the blogpost: https://www.topfgartenwelt.com/eisenbahner-kekse-backen where the image is now in the wrong position.
Greetings Kathrin
-
The current spot of the image is actually after the 3rd <p> as the author’s name is a
<p>and there’s an empty <p> after review number 11.It’s getting trickier, can you do not use <p> tag for the author name and do not add empty <p>?
-
I have added the new code and flushed the cache but now the image is gone. The place where it should be is blank.
Greetings Kathrin
-
The function has some issues, I removed it.
Can you check my suggestion in my previous reply?
-
I did, but now the images is there where it was – on the wrong position.
As you can see here: https://www.topfgartenwelt.com/eisenbahner-kekse-backen
Greetings Kathrin
-
Try using GB’s image to pull the author image and GB’s headline block to pull the author’s name, and set the headline’s tag to <div> instead of <p>.
And remove this empty <p>:
https://app.screencast.com/SvjtpcOL3GiE7
- You must be logged in to reply to this topic.