Morning burridge,
So I have “half” of a solution for you. The other piece will come in the plugin update I have planned for this weekend.
The best way to go about accomplishing this is to simply use the static image content option and modify the css on the image caption. In my test, I used a global block so I could target multiple pages, but this works for local blocks as well.
Use the static image option, choose any image you want and make sure to check the “Set As Background” option. Enter in the page title in the caption. For my test, I did something like <h1>My Page Title</h1>. (I know manually typing the title is not ideal. This is the other “half” that I will address in the next update).
Then on the style tab, in the “Custom Block CSS” section, add the following code:
#blox_global_6 .blox-image-wrap {
display: table;
height: 500px; /* Adjust image container height as needed */
}
#blox_global_6 .blox-caption-container {
display: table-cell;
position: static;
text-align: center;
vertical-align: middle;
width: 100%;
}
#blox_global_6 .blox-caption-wrap {
background: none !important;
}
@media only screen and (max-width: 480px) {
#blox_global_6 .blox-image-wrap {
height: 300px; /* Adjust as needed for mobile */
}
}
Note that wherever I have #blox_global_6 replace it with your block’s id. You may need to make some adjustment to the heights to get it to look the way you want, but the above code should get you most of the way there. I also included a media query to reduce the height of the image on mobile, but you could add more media queries for the different breakpoints on your site.
You will also likely need to style the caption text to make it look the way you want. To do that, you can target the text with something like the following code. Note the <h1> is in there because that is what I wrapped my caption in. remove it if you don’t want it:
#blox_global_6 .blox-caption-wrap h1 {
color: _____;
font-size: ______;
etc.
}
To address the issue of manually typing in the page title, I am going to be adding a number of shortcodes to the plugin, so all you would need to add is something like [page-title] to the caption box and it would automatically pull the caption. After reading your post, I realized that there is a bunch of information that would be handy if available via shortcode like the author name, the last time a page was updated, etc. So I will be adding these in the next release, which will likely be before the weekend is out.
Anyway, I hope this helps and let me know if you have any questions on the CSS.
Nick
