Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Single loop to recognise ACF field

  • Hey guys,

    I love GP!

    I have a blog which needs to have either the featured image shown on the left, or on the right, when in the loop. I have built in an ACF field (dropdown) where you can select Left or Right in the post. So far, so good.

    Now I need to adapt GP single loop to recognise that ACF field (Left or Right), and put in the required CSS (float:left or float:right) etc.

    I have been trying to figure out how to do this today. Are you able to steer me in the right (or left, lol) direction here please?

    Jeremy – from Melbourne, Australia!

  • Hi there,

    That sounds doable. Can I see the page or loop where you’re planning to add this? This will help me get a better understanding and suggest suitable advice based on your scenario.

  • I sent the URL before but I don’t think it worked. Here is the blog –

  • We didn’t receive your previous reply, probably due to some issue with the forum.

    So, what is your general idea regarding the layout? Are you looking to design the archive with alternating left and right featured images? If that’s what you’re aiming for, it would be much easier to achieve using custom CSS.

  • Thanks Alvind.

    I am trying to do two things –

    1) create custom CSS to show the image as a smaller left image, or a smaller right image, or leave the default large image (like it is currently). I have already written the CSS.

    2) create a control in ACF so you can tell each blog post whether it is a “left image post”, a “right image post”, or leave it how it is now “default – large image post”. I have already written the ACF part.

    Now I am trying to figure out how to write the connecting code in GeneratePress so it goes through the loop and will echo the relevant CSS on each post.

    Know what I mean?


  • Try something like this:

    Replace the CSS, and the Acf field name.

    function auto_add_css() {
        if (is_single()) {
            $image_post_type = get_field('your-image-post-type-field-name');
            $left_image_CSS = 'body { background-color: red; }';
            $right_image_CSS = 'body { background-color: yellow; }';
            if ($image_post_type === 'left image post') {
                add_action('wp_head', function() use ($left_image_CSS) {
                    echo '<style id="left-image-post">' . $left_image_CSS . '</style>';
            if ($image_post_type === 'right image post') {
                add_action('wp_head', function() use ($right_image_CSS) {
                    echo '<style id="right-image-post">' . $right_image_CSS . '</style>';
    add_action('wp', 'auto_add_css');
  • Thanks Ying! Excellent support!!

  • You are welcome, glad to help   🙂

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.