Jump to content

Display pages - separate background image for each page

Rik Brown

By Rik Brown
in General discussion

Recommended Posts

Rik Brown Advanced Member

Rik Brown

Posted
Posted (edited)

Using "Advanced Module Manager" and "HD Custom CSS" module (which allows one to place "body" css in the page <head>), I am able to have separate full-screen, background images for each of our JReviews categories. But what I really would like to do is to be able to display a unique full-screen background image targeted to every single one of our Display (landing) pages.

I played around with the JReviews Fields Manager and was able to create a field called jr_bgimage to hold an image file/location. I was then able to place a <style> directly in the body area of a page using a module: 

<style>
body {
    background: url(https://[domain]/images/landing/{FIELDTEXT});
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}
</style>

Then in the custom.css file for our Joomla template, I made the image full-screen. It worked (I know: this is a bad way of using css). And since the css is not in the <head> area it could run into conflicts with other elements created by our Joomla template.

But the nice thing was that with that {Filetext} data stored in the jos_jreviews_content.jr_bgimage field allowed for a separate image for every single JReviews display page.

And I could run a MySQL query to mass assign a full-screen background image to every page in a category. Or, within a category such as restaurants, I could assign a specific image to each different restaurant chain. I could also assign an image to a single page. 

I could also just edit any listing's jr_bgimage field via a submission page to input the image name and location. That method just required making a setting to our custom.css once which could then apply to every one of our display pages.

Now to my question: Is there anything built into JReviews that would allow me to read the jr_bgimage {FIELDTEXT} data and then place that into each page's <head> area as a css override like the following: 

.t3-wrapper {
  background-image: url("https://[domain]/images/landing/{FIELDTEXT}"); 
  background-position: center;
  background-repeat: space;
  background-size: cover; 
  height: auto;
  min-height: 100%;
}

Any suggestions are appreciated.

Thanks. -- Rik

Edited by Rik Brown
Link to comment
Go to topic listing
×
×
  • Create New...