Custom Content Shortcode
[resolved] Set post background using custom field (6 posts)

  1. telkins
    Posted 1 year ago #

    Hello. I am wondering if it's possible to set the background of a div (containing the shortcode) using the background-image custom field in the post being shown using the shortcode. Is this possible?


  2. Eliot Akira
    Plugin Author

    Posted 1 year ago #

    OK, I tried it and I needed to add a couple of parameters. Please see update to version 0.6.0.

    This is what I did to set a background image according to a custom field:

    <div style="background:url('[content name="post-name" image="image_field" return="url"]') no-repeat;height:400px;width:300px;">

    Looks a bit wild, but it works. Here are the parameters:

    image - name of image field
    return - set to url

    Depending on how you set up the image field, you might need to add this parameter:

    in - set to id, url or object; the image field content is ID, URL or image object; default is ID

    It should work in a loop also.

  3. telkins
    Posted 1 year ago #

    Hmmm.... I feel like I'm close but I can't quite get it to work. What am I doing wrong?

    Here is where I'm at so far:
    <div style="background:url(<?php echo do_shortcode('[loop type="what_is_this"][content field="background-image" return="url"][/loop]'); ?>) no-repeat; height:400px;width:300px; border:5px solid #fff;">content goes here with the custom field background image as div background</div>

    I have the background-image custom field set with http://charleybiggs.com.s64567.gridserver.com/wp-content/uploads/2014/01/featured_product_03.jpg as the background image (just for the purposes of testing this)

    If you take a look at my dev site below, scroll down to the bottom and you will see the div that I'm testing this out on. Thanks for your help, you rock!


  4. telkins
    Posted 1 year ago #

    Nevermind, it started working. Thanks so much for your help!

  5. Eliot Akira
    Plugin Author

    Posted 1 year ago #

    Ah great! I'm glad it worked - I never thought of doing something like this, but that's cool that it's possible. :)

    Looking over your code, here's how I might do it:

    <?php echo do_shortcode('
        [loop type="what_is_this"]
            <div style="background:url([content field="background-image" return="url"]) no-repeat; height:400px;width:300px; border:5px solid #fff;">
                content goes here with the custom field background image as div background

    This will create as many boxes with different backgrounds as there are posts found.

  6. telkins
    Posted 1 year ago #

    Hello. I just noticed that for some reason, the backgrounds won't show up on iphone/ipad. Any idea why this is happening? Everything else seems to work fine, but on those devices the background disappears in the div.

    If you look at the block that says "Can you guess what this is?" then you will see that the background for that div doesn't show up on iphone/ipad. Thanks for any help you can give me.


Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic