CouchCMS Forum Bug Reporting and Troubleshooting
Problems, need help? Have a tip or advice? Post it here.
11 posts Page 1 of 2
Post a reply
Previous 1, 2 Next

Background url in css

avatar
scratz
Registered User
Hey all.

I have a css file with the following for the background image:
Code: Select all
.page-header {
    background: linear-gradient(to right, rgba(2, 36, 91, 1) 0%, rgba(2, 36, 91, 0) 100%), url(../img/carousel-2.jpg) center center no-repeat;
    background-size: cover;
}

My issue is with the url() and how to get my image link to populate it.
I've tried <cms:show, <cms:get_field, <cms:link, I've tried using the the pages tag, but seeing as it's not a php file, but a css file, it's not able to read the cms tags. I can't find anything that will populate the url section with the path to the correct image. The image I need to populate it with is created from JCROPTHUMB (not sure if that matters, but there's no hard image file to point to)

Does anyone have any experience with this type of background image from the css file using jcropthumb?

Re: Background url in css

avatar
scratz
Registered User
As a solution, I added style="background-image:url(<cms:show page_img />)" to my front-end <div> tag.

I am wondering if there is a way to populate the css file, though if anyone has any tricks?

Re: Background url in css

User avatar
trendoman
Registered User
There was a post from KK about converting CSS to PHP thus making it manageable with CMS code.

Re: Background url in css

avatar
KK
Moderator
@scratz, here is the post @trendoman was referring to -
viewtopic.php?f=2&t=7406#p10769

TBH, there is nothing wrong with using inline styling if the contents of it are dynamic (i.e. served by a CMS) as in your case.
Trivia - Themeforest is notorious for its enforcement of 'best- practices' in WP themes but it allows inline styling if it is dynamic.

Re: Background url in css

avatar
scratz
Registered User
Thank you both for your timely responses.

Initially, I tried it, but my site is using routes, and the image is a jcropthumb. I could only get it to show using a hard-coded <cms:get_field tag (hardcoded masterpage and page params). Once I used the rt variables, the url broke.

I'll test more later to see if missed something.

Re: Background url in css

avatar
scratz
Registered User
OK, I see the difference between the post to which you are referring, and what I'm trying to do. Similar but not the same.

It looks like madebym is looking create editable regions in the css file. That's an interesting idea for sure, but that would not be a solution for me. It's possible there may not be a solution for this issue I'm facing at this point. Inline styling is an ok workaround. It would be cool to see a solution using couch tags, though.

For my issue, I'm trying to make a dynamic property of the url in a background image of a css file. This image is coming from a jcropthumb thumbnail from a main image of a cloned page.

The original code in the style.css file is
Code: Select all
.bg-breadcrumb {
    background: linear-gradient(rgba(19, 53, 123, 0.50), rgba(19, 53, 123, 0.25)), url(../img/carousel-2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}


My issue is making that url() be dynamic using couch tags.
From the referred post (thank you KK and Anton), I have done the following:
Renamed the file 'style.php' and added include/invoke tags. I hard-coded the url (ie <cms:pages / <cms:show -or- <cms:get_field ) and it works, but I have to hard-code the masterpage and page name. If I use k_template_name, to make it dynamic, it uses style.php as the k_template. And obviously, a hard coded statement can't be used throughout the site.

Can anyone think of a solution, or is there a cms: tag I'm not thinking about? Happy to read up because I love reading this forum, there's always great and amazing solutions from yall.

Re: Background url in css

User avatar
genxcoders
Registered User
I usually have a "header.html" file in the snippets that contains everything from doctype to the starting body tag. This helps me have the head tag that houses the meta, link, etc. It also allows me to have the <style>...</style> tag in there.

Now what I have understood, from that I can suggest something like the following for you to give a try.

1. Create a header.html file in the snippets.
2. Add the CSS code in a style tag.
3. Enclose the css of the <style> tag in <cms:pages>
Code: Select all
<html>
    <head>
        <style>
            .bg-breadcrumb {
                <cms:pages masterpage=k_template_name>
                    background: linear-gradient(rgba(19, 53, 123, 0.50), rgba(19, 53, 123, 0.25)), url(../img/carousel-2.jpg);
                </cms:pages>
            }
        </style>
    </head>
    <body>
        ...
    </body>
</html>


This should work for the clonable pages.

If you want a specific page_name, then possibly this could help:
Code: Select all
<cms:pages masterpage=k_template_name page_name=k_page_name>
    ...
</cms:pages>


I have not tested any of the above, but going though the post and what I could understand I have shared. Hope this gives you a start towards the solution you are looking for.

Regards,
GXCPL (CTR)
Image
where innovation meets technology

Re: Background url in css

User avatar
trendoman
Registered User
Alternative to @genxcoders solution (which is indeed a solution) one may add query string params to the style.php link e.g.

Code: Select all
style.php?page=<cms:show k_template_name />&post=<cms:show k_page_id />


, and now the parameters (casually read by cms:gpc) are available for dynamic code

Code: Select all
<cms:pages masterpage="<cms:gpc 'page' />" id="<cms:gpc 'post' />" > .... </cms:pages>


, which is cool as it possibly allows some alternative styling in case of <cms:no_results>.

Re: Background url in css

avatar
scratz
Registered User
genx and anton, I really do appreciate your help with this.

Genx, yes, that is a solution, however, it is more coding that just adding the inline style to my front-end <div tag. Also, your solution breaks up the css styling into 2 separate locations, which could get confusing. I really do appreciate your help, tho.

anton, you say
one may add query string params to the style.php link e.g.

I'm confused on which file I would be putting that query string in. I'm assuming I've renamed style.css to style.php and added the include/invoke tags, right? And is your query string on my style link in the page header?

Re: Background url in css

User avatar
trendoman
Registered User
scratz wrote: I'm confused on which file I would be putting that query string in. I'm assuming I've renamed style.css to style.php and added the include/invoke tags, right? And is your query string on my style link in the page header?


A foreword. Having styles as a Couch-managed template (.php) allows to run Couch tags in it and it is not necessary to define any editable field there.
Now, you put a link to the styles.php in header as usual and add parameters to that url with couch tags, as shows my code example,, because this is exactly a method to pass dynamic information to styles template. Essentially, every page the visitor opens in browser will send its ID and masterpage to the styles, so the styles will have the information about which page is being visited and will display an image accordingly (dynamically).
Post a reply
Previous 1, 2 Next
11 posts Page 1 of 2
Return to Bug Reporting and Troubleshooting

cron