[Resolved] Easy Responsive Background Images in Toolset

[Author]

Posts

[marcB-6]

To make sure the site will load fast i did some research on responsive background images.
Actually; it's quite easy to implement since WP allready create different size images and it's just a CSS trick. See here: hidden link

Can we Implement it in toolset content template?

Thanks

[Beda]

Content Templates replace only the_content(), so you can apply any CSS on this part of the Front End.
And of course, any CSS will work.

You can add your CSS to the CSS editor in the Content Template or, in the HTML section within style tags (Which is not suggested, but if you need dynamic URL paths with shortcodes, this is the only solution)

Please acknowledge that while we make it possible to add ShortCodes within CSS code if you add them to the HTML section, or even add CSS to ShortCodes, this is not intended to work by WordPress itself, and we cannot extend this functionality.
It is generally not suggested to create CSS with ShortCodes, by WordPress.

Please let me know if you find issues with that.

[marcB-6]

Can you provide me with best solution?

[diyanK]

Hi Marc,

Best solution is to just use CSS for that. Like in the example shown here:

hidden link

D.

[Beda]

Yes, @marcb-6, as @diyank yourself stated, this is simple CSS to be applied.
An example you show in your link.

There are many more examples and DOC's, but basically it all falls back to this:
hidden link

CSS and JS are required knowledges to use Toolset properly, I cannot provide code CSS or JS in the forum because of that, but, I can give the hints and links necessary.

With above DOC, you will be able to add a background image to your HTML elements.
In Content Templates as example you can either target the parent Theme's HTML container for the_content() or use HTML in your Content Template and target that.

For such global CSS it is useful to use the Theme instead of Content Templates, but it is possible, of course, to do it in Content Templates as well.

[marcB-6]

Thanks...but using css it wont work with dynamic images as mentioned below.

<section class="main-banner text-center" style="background-image:url('[types field='home-header-image' output='raw'][/types]')">

[Mohammed]

Hi Mark,

Beda is not available today. so, I will handle your request instead.

I think that the problem now is that the mage is not displayed as a background of the <selction>, I mean you don't see it.
Am I right?

To save some time, I will set the next reply as a private one so that I can check your website if needed.

Please provide me the access details for your admin dashboard and the link to the page where the issue exists in the next private reply.

[Beda]

As in the link you shared with me, this is a CSS solution.

WordPress does not wish to have ShortCodes in CSS, or CSS in ShortCodes, or any other thing but strings, in a ShortCode.
I am sure you know that, it was a major issue long time ago, several thousand sites broke because WordPress updated it's API for ShortCodes silently.

We brought back all features - they are possible to be used in Views mainly.
You can - if you use Toolset - still pass such things to ShortCodes.

But in the CSS editor you cannot.
You need to pass this CSS in the Code editor for the HTML section, within some <style> tags.
Then, you can populate the URL of the Image with a ShortCode - which allows dynamic loading of data.