[Resolved] Using Layouts to display page's featured image; featured image in menu cell

[Author]

Posts

[Mark Sund]

Tell us what you are trying to do?

I'm an experienced WordPress developer using Toolset for the first time. In the past I've used Pods and ACF+CPTUI to create relationships, but Toolset looks like a better choice because of ability to design the front end. Also the beta for relationships is so much better than before, that really tips to scales to Toolset.

So I'm using the Toolset Starter Theme and installed the starter layouts. I played with other themes but would like to use Toolset's Starter Theme and Layouts plugin. Yet I can't find a way to put the menu and featured image in the header. There's a menu cell – great I can style it, and I'm using myStickyMenu to make it sticky. For the background image, right now it's static, defined in css. But I can't find a way to make the featured image the background image in the menu cell.

I see how to insert the featured image in Layouts using the Visual Editor and shortcode [wpv-post-featured-image size="full"]. Great. But how to I put the featured image behind the menu. I actually want to create a header with menu and page title on top of the featured image.

Is there any documentation that you are following?

Yes all the documentation I've found for Layouts. It simply doesn't mention a way to insert the featured image or anything else into a menu cell.

Is there a similar example that we can see?

Lots of websites do this... here's one under development: hidden link . It uses a video but same idea – the menu and page title should be on top, and featured image behind it.

What is the link to your site?

Here's the best page...

hidden link

Thank you for your help!

Mark Sund, Studio Director, Sund + Co (Cincinnati USA)

[Mark Sund]

Toolset Support,

This is a follow-up to the previous message. I've been experimenting with Layouts more, and the really important thing is this: how to set a background image as a Types field image from the current post.

In Layouts, it's easy to make the background image a certain url in the css. And it's easy to insert an image from a field for that post into a cell using the Visual Editor. But I need the background image to be a field from the current post. It's a common situation: in heading banners where the page title goes on top of a full-width background image, or in page content areas where text (in a boxed div) goes on top of a background image (full width of the browser window).

So you can mostly ignore the long request above and this is the thing I need: how to use an image from the current post as a background image on a div/row/whatever.

Thank you for your help,

Mark Sund, Studio Director, Sund + Co (Cincinnati USA)

[Nigel]

Hi Mark

Firstly, if you are just starting out with Toolset I would caution you that some time ago we stopped developing the Toolset Starter Theme, which is effectively deprecated in favour of themes such as those you can find on the recommended themes page.

It was decided that our resources could be better directed at ensuring compatibility with a number of themes that specialise in one thing—making themes—rather than trying to continuously improve our own theme. Use it for a while and you are like to run into limitations.

The main advantage of the theme is that it is fully-integrated with Layouts, meaning you can use Layouts to design the entire page, and not just the content area, with the header and footer coming from your theme as is the case with just about every other theme.

One of our team is a real fan of using Layouts this way, and maintains a theme himself which is very lightweight, and fully-integrated with Layouts. It is not officially supported, but is very well documented (in the code itself), so if you are an experienced developer you should be able to follow what it involved. See hidden link

As to the question itself, background images are a CSS property, but there is no provision for dynamically setting such CSS style rules.

However, it is easy enough to implement yourself.

Use a Visual Editor cell, which lets you add HTML to the page, and directly add style tags into the cell editor so that you can use shortcodes to generate dynamic CSS. Something like this:

<style type="text/css">
.some-div {
  background-image: url("[wpv-post-featured-image output='url']");
}
</style>

Lastly, note that you are posting in the Community Forum for users of the free Types plugin. As a Toolset customer you can and should post in the Technical Support forum which we prioritise and where you should receive speedier service.

[Mark Sund]

[I just realized, thanks to your "cleanup robot", that the email reply I wrote went to noreply@. Here it is...]

Nigel,

Thanks – this is helpful info!

Yes trying the Toolset Starter Theme reminded me how much work it is to style a menu, and how important it is to choose a theme based on menu options. I revisited themes we like and that you-all recommend/integrate with, and Astra Pro is great. It’s modern with many menu and banner options, and we’ll likely use Astra Pro for more projects.

The MinimaX1 theme sounds interesting – thanks. But we’re developing this site for a good multi-year client and need to stick with a commercially-developed theme.

I very much appreciate knowing that the shortcodes can be used in the Visual Editor in Layouts. I worked on it yesterday, haven’t got the background image displaying full-width yet, but that’s what I’m about to turn to. [update: now working]

I’m very happy you-all streamlined the many-to-many relationships in Toolset Types (beta). That was a pain before. I’m used to working with Pods and ACF-CPTUI, where many-to-many is easy. But they don’t have good front-end development. This is our first time using Toolset Layouts and it’s looking great.

Thank you again for your help,

Mark