Style pseudo element within wordpress loop

Question

I'm looking for a way to give css-style to an element within a wordpress loop.

I specifically try to add a background image to a pseudo element, where the background image comes from the wordpress post. In the end I want to have different background images on every looped post.

The problem here is that all ::before elements gets the same background image (from the last post in the loop).

Any ideas?

Thank you!

<?php  $posts = get_posts(array(
'posts_per_page'    => -1,
'post_type'         => 'post',
'order' => 'ASC',
));
if( $posts ): ?>
<?php foreach( $posts as $post ): setup_postdata( $post ); ?>

<div class="gradient" >
<?php the_title(); ?>
</div>

<style>
@supports (mix-blend-mode: lighten) {
.gradient {
    display: inline-block;
    position: relative;
    color: #000;
    background: #fff;
    mix-blend-mode: multiply;
  }
.gradient::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(<?php the_field('text-background'); ?>);
    pointer-events: none;
  }
.gradient::before {
    mix-blend-mode: screen;
  }
}
</style>

<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>

fppz · Accepted Answer · 2017-06-15 15:57:20Z

1

<?php  $posts = get_posts(array(
'posts_per_page'    => -1,
'post_type'         => 'post',
'order' => 'ASC',
));
if( $posts ): ?>
<?php foreach( $posts as $post ): setup_postdata( $post ); ?>

<div class="gradient-<?php echo get_the_ID() ?>" >
<?php the_title(); ?>
</div>

<style>
@supports (mix-blend-mode: lighten) {
.gradient-<?php echo get_the_ID() ?> {
    display: inline-block;
    position: relative;
    color: #000;
    background: #fff;
    mix-blend-mode: multiply;
  }
.gradient-<?php echo get_the_ID() ?>::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(<?php the_field('text-background'); ?>);
    pointer-events: none;
  }
.gradient-<?php echo get_the_ID() ?>::before {
    mix-blend-mode: screen;
  }
}
</style>

<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>

Echo post needs to have it's own custom .gradient variation or some level of uniqueness. I changed it so that it will do .gradient-{POST_ID}.

answered Jun 15, 2017 at 15:57

fppz

4092 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adrianopolis Over a year ago

I suppose you can do that too but what if there are many on one page? Need to create a loop. But yeah that works too.

fppz Over a year ago

You have to create a loop to go through each post own custom background image. A better solution would be to have a generic gradient class and wherever you need a custom background, you apply it through style="background-image: url(<?php the_field('text-background'); ?>)" to the relevant element

Adrianopolis · Accepted Answer · 2017-06-15 15:57:24Z

0

Since using the attribute option is not ready for prime time for background-image do you have ability to just hardcode the image on the block such as style="background-image: url(<?php the_field('text-background'); ?>);" ?

answered Jun 15, 2017 at 15:57

Adrianopolis

1,2921 gold badge11 silver badges15 bronze badges

Comments

Neil K · Accepted Answer · 2017-06-15 15:58:34Z

I would say to use an inline style but I don't think pseudo classes are possible inline. A slightly more messy alternative could be:

<?php  $posts = get_posts(array(
'posts_per_page'    => -1,
'post_type'         => 'post',
'order' => 'ASC',
));
if( $posts ): ?>
<?php foreach( $posts as $post ): setup_postdata( $post ); ?>

<div class="gradient gradient-<?php echo get_the_ID(); ?>" >
<?php the_title(); ?>
</div>

<style>
@supports (mix-blend-mode: lighten) {
.gradient {
    display: inline-block;
    position: relative;
    color: #000;
    background: #fff;
    mix-blend-mode: multiply;
  }
.gradient-<?php echo get_the_ID(); ?>::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(<?php the_field('text-background'); ?>);
    pointer-events: none;
  }
.gradient::before {
    mix-blend-mode: screen;
  }
}
</style>

<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>

Aung Myo Linn · Accepted Answer · 2017-06-15 16:14:21Z

It would be better excluding the common styling from the loop. Check this out:

<?php  
$posts = get_posts(array(
'posts_per_page'    => -1,
'post_type'         => 'post',
'order' => 'ASC',
));
if( $posts ): ?>

<style>
@supports (mix-blend-mode: lighten) {
.gradient {
    display: inline-block;
    position: relative;
    color: #000;
    background: #fff;
    mix-blend-mode: multiply;
  }
.gradient::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
  }
.gradient::before {
    mix-blend-mode: screen;
  }
}
</style>

<?php foreach( $posts as $post ): setup_postdata( $post ); ?>

<div class="gradient gradient-<?php echo $post->ID; ?>" >
<?php the_title(); ?>
</div>

<style>
.gradient.gradient-<?php echo $post->ID; ?>::before {
    background-image: url(<?php the_field('text-background'); ?>);
}
</style>

<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>

Collectives™ on Stack Overflow

Style pseudo element within wordpress loop

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related