0

I am trying to achieve to following design:

enter image description here

This is what I got so far:

enter image description here

I'd like to have the bottom images as in my design example.

This is, how my single.php looks like. I just can't find a solution that is responsive and works with my design :(

<?php get_header(); ?>


<div class="container px-4">
    <div class="flex flex-wrap gap-20">

        <article class="flex-auto w-[800px]">

        <?php if (have_posts()) :
        while (have_posts()) : the_post(); ?>
        <?php the_content(); ?>
        <?php endwhile; endif; ?>

        </article>

        <?php get_sidebar(); ?>

    </div>
</div>


<?php get_footer(); ?>

The images are placed within gutenberg and therefore part of the_content() which is displayed in a container. Is there a solution to display the images separatley for each post?

enter image description here

My workaround:

<script>
let header = document.querySelector('#header');
let width = header.offsetWidth;

let container = document.querySelectorAll('.container')[1];

let style = getComputedStyle(container);
let marginLeft = parseInt(style.marginLeft);
// marginLeft = marginLeft + 16

console.log(marginLeft);

const elements = Array.from(document.getElementsByClassName('wp-block-columns'));
console.log(elements);

elements.forEach(element => {
    element.style.width = width;
    element.style.marginLeft = '-' + (marginLeft + 16);
});
1
  • Edit: I did a workaround with JavaScript. That is not my preferred solution though.
    – Marzii
    Aug 2 at 9:45

1 Answer 1

0

I'm not sure how you used the block editor for this. However, I would have the article be the width of the content, make the container the text content is in the size that you need it to be, and have the images be the width of the container.

Styling would depend on the blocks used.

For example:

<article> <--- full width of content
<section><div></div><aside></aside></section> <--- section width needed
<div><img><img></div> <--- full width
</article>
3
  • Hi @Lisa, I've posted an image of the block editor above. I posted the images within the block editor as dynamic content. The images change from post to post. That is why.
    – Marzii
    Aug 2 at 8:33
  • @marzii sorry I don't see an image of the block editor itself, just two of the front page. Even with dynamic content, the idea i posted would still work as it just depends in what you wrapped the areas in.
    – Lisa
    Aug 2 at 18:00
  • oh okay. It's image 3. My issue is, that the images are part of the_content(); and therefore placed within the article. I used the "image-block" in gutenberg for the images.
    – Marzii
    Aug 3 at 10:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.