Hi cyborg88,
Are you able to provide a link so I can see the issue live? I should be able to diagnose from there.
Thanks,
Nick
Hey Nick:
Thanks for the timely follow up.
The site isn’t live, but one I sort of use as a staging site.
The CSS is:
.site-header {
background-image: url(http://example.com);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
min-height: 100vh;
}
Additionally, and unrelated to the above question but something you may wish to know, I am testing the SEO Framework plugin and when both it and Blox are running, the wordpress admin post page is rendered unreadable: all of the text is pushed vertically rather than horizontally. The SEO Framework’s plugin author is similarly proactively helpful and engaging so I will reach out to him and let him know but you folks may want to connect (his plugin is also inspired by Genesis).
Hi cyborg88,
I am a bit confused. It looks like you are adding a background image to your site header via CSS. This is fine, but what are you adding to the page via a local block? If you are adding another image using Blox Lite it will simply add it to the page. The plugin will not replace any CSS that you have previously written. I would recommend adding a Global block which can be applied to many pages at once. Select the option for featured image and it will automatically pull the featured image of whatever page it is enabled on.
Feel free to provide more info and I will try to assist further.
For the second issue, this is likely because there are too many columns enabled. Use the Screen Options link at the top of the page to hide a few columns and everything should look ok. I just tested it and it worked.
Nick
1. Background image via CSS – correct
2. Adding an image – that is indeed what I did. I was misunderstood that it would locally overwrite/replace the previously written CSS. Thanks for clarifying
3. Global block + featured image – If I may be sure I understand correctly, if I enable the Global block + featured image, then the featured image that would appear would be the featured image for each respective post (and page if enabled) across the entire site?
If this is correct, then by extension I would need to disable the background image CSS for this to work.
Thanks again dude the thorough and timely responses.
4. Columns – silly oversight on my part. You’re suggestion was spot on.
3. Yup that is correct. On the location tab you can specifically select the posts/pages you want the image to display on. Global blocks also have an additional image option called “Featured or Custom”. This allows you to display the featured image if there is one, and if not, display a custom image. This is great if not all your posts/pages have featured images, but you want to still have an image.
Let me know if you have any trouble, or have more questions.
I’ve been experimenting, and this plugin is going to disrupt the freelance Genesis industry. Sweet job Nick.
I remain however unsuccessful.
The CSS I refer to above allows a background image in the header with the Title overlain.
Is there a way to achieve this with the Global Blocks? The featured image for each page/post is preferable to a single image determined by the .site-header CSS.
When creating a Global Block and enabling Featured and Custom image, currently an image appears only above or below the title even when the location is chosen as genesis_title rather than above or below header. The consequence is this then creates suboptimal title/image placement.
A Genesis site exemplifying the use of the CSS above and the full viewport effect I aim for but without the featured image option enabled by Blox Lite is
Can we make this happen with Blox (Lite)?
Is my question decipherable? Any thoughts?
Hi ,
Yup I understand what you are trying to do. You are getting into “power user” territory 😉
So Blox generally adds structural content, which is why it is adding the image above and below the title. It does not replace the title block.
That being said, the raw content option can do practically anything. This is what you will need to use.
Using the raw content option you can add some CSS to the header of your site, but also make this CSS dynamic so it pulls the featured image of the page. Take a look at the code below:
<?php
$featured_id = get_post_thumbnail_id();
$featured_url = wp_get_attachment_image_src( $featured_id, 'full', true );
?>
<style>
.site-header {
background-image: url(<?php echo $featured_url[0]; ?>);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
min-height: 100vh;
}
</style>
The PHP portion grabs the url of the featured image, if there is one. Then in the CSS section, we dynamically add this url to the background-image.
In order to make this work, you need to do the following:
- Enter code above in Raw Content box
- Check to enable PHP code
- Check to disable all markup (we are printing the content to head of the page so we don’t want the default wrapper divs)
- On the Position tab, set the hook to genesis_meta
You may need to tweak the CSS portion to get it to look the way you want, but this should do it for you.
Let me know if you run into any trouble.
Nick
Hey Nick:
Thanks for the exceptionally thorough and timely response. I am gracious for your help dude.
I will give this a shot and follow up if I have any questions.
To all those who may visit this thread, clearly this developer is customer service-oriented and Box Lite is disruptive so check it out if you run Genesis!
