There is a post on the site Wordpress. It is displayed in this way:

enter image description here

On the left - the video or picture, on the right - the text. If the height of the text becomes greater than the left block, then it is automatically divided into "slides", which are switched by dots below the text.

Horizontal slider can implement on slick. I am interested in how to break the text in such a way that a separate div is created for each block of text.

PS my submission is instead of the the_content () function; there must be something like a loop: for each block of text, a div is created with the item class and the text inside. Perhaps you need some kind of filter?

Thank!

  • This is not an approach. What will you do when resizing the browser window? - KAGG Design 4:34 pm
  • I have three breakpoints - a PC, a smartphone and a tablet. But you are right - the function will work only once, at boot. Do you have any option? - daniel_ts
  • Although, there is an option - to change the font size. - daniel_ts pm
  • Content is divided into blocks when outputting by the number of words, and then play with the size of the font - KAGG Design
  • I will be very grateful if you throw off a piece of code (or at least show how to break into blocks :)) - daniel_ts

1 answer 1

Code like this

// ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. $content = get_the_content(); // ЗамСняСм всС ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Ρ‹ строк Π½Π° <br>. $content = nl2br( $content ); // Π Π°Π·Π±ΠΈΠ²Π°Π΅ΠΌ Π½Π° Π±Π»ΠΎΠΊΠΈ ΠΏΠΎ 200 символов. Π Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ - "\n". $content = wordwrap( $content, 200 ); // Π‘ΠΎΠ·Π΄Π°Ρ‘ΠΌ массив Π±Π»ΠΎΠΊΠΎΠ². $divs = explode( "\n", $content ); // Π’Ρ‹Π²ΠΎΠ΄ΠΈΠΌ Π±Π»ΠΎΠΊΠΈ. foreach ( $divs as $div ) { $div = '<div class="my-text-block">' . $div . '</div>'; echo wp_kses_post( $div ); }