SOLVED How To: Add Image Picker To Header Section
-
-
- Cynthia Spry
- Newbie
- Posts: 17
- Thanks: 0
-
Hello,
I want to add the image picker for the background of the Header section of the Interstellar theme. I found information here:
docs.gantry.org/gantry5/advanced/customizing-theme-files
However the actual paths no longer jive with the theme.
How can I add a image picker for the background for the header section?
Thanks
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
It’s easier to just use custom css. But if you really want to do it, Please post url, superuser ID and password in the secure tab of your reply and I will look for you. Also, please provide ftp login too.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Cynthia Spry
- Newbie
- Posts: 17
- Thanks: 0
-
Thanks for your reply.
Can you give me some example CSS and tell me where we would insert it?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Use this code...
#g-header { background-image: url("yourimageurlgoeshere"); background-size: cover; background-repeat: no-repeat; }
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Cynthia Spry
- Newbie
- Posts: 17
- Thanks: 0
-
Hi Mark,
Tanks for that CSS. Unfortunately it did not work for me, however after reading the documentation you linked for the CSS I saw that when the directories are not present to create them and it turns out this was the case I was mentioning in my original post.
So I revisited adding the image picker per these docs:
docs.gantry.org/gantry5/advanced/customizing-theme-files
And after creating the files and directories that is now working. I like this solution better because later if any other user(s) need to change the background it will be easier to pick one this way instead of needing to chase down some CSS.
Now that the image is possible to be picked I encountered another issue: How do I set the size of the image?
I am trying to replicate this:
iproperty.thethinkery.net
Here is waht I have so far:
dev.move2oregon.com
The image I have picked is not displaying properly. I have tried changing ther section "Variations" to (for example) "No Margin All" and several other but the image never displays properly. What do I need to do next?
Regards,
John
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
The CSS that I gave you works absolutely fine because I tried it on your site. and you have to create the folder for the file so the file that should have been created is /templates/rt_interstellar/custom/scss/custom.scss (you likely would have had to create the scss folder).
Anyway....
As you added a background image this has absolutely no bearing on the height of the container to which you applied the background. The height of the container is driven by the content within it. So, to overcome this you are going to have to write some custom CSS. It's innevitable that you will use custom CSS on your site so it's better to get used to that now by creating the file in the location that I gave above.
Use this code....ip_qsmod_holder { padding: 150px; }
Had you used the CSS that I gave you that image would have behaved better than it does now too. So, you've still got to use similar CSS to correct that anyway...
#g-header .section-background { background-size: cover; background-position: center center; background-repeat: no-repeat; }
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Cynthia Spry
- Newbie
- Posts: 17
- Thanks: 0
-
As you added a background image this has absolutely no bearing on the height of the container to which you applied the background. The height of the container is driven by the content within it.
This however is not the case. Here is a link to the image being used:
dev.move2oregon.com/images/slides/1650-c...e-oregon-slide-1.png
You can see what is being displayed is not the full height of the content.
I added the custom.scss file here:
/templates/rt_interstellar/custom/scss
Here is the contents of custom.scss
.ip_qsmod_holder { padding: 150px; } #g-header .section-background { background-size: cover; background-position: center center; background-repeat: no-repeat; }
Afterwards I recompiled both home, default and base outline as you suggested. Unfortunately the image is still not displaying properly.
Regards,
John
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
I see no custom CSS on your site... Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you. Also, Please post your FTP logon, password and FTP URL in the secure area of your post.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Cynthia Spry
- Newbie
- Posts: 17
- Thanks: 0
-
There was a typo - custom.scss was named custon.scss. You can see the url to the costom.scss works now as does the image on the homepage header.
You mentioned that the container will adjust to the content size but the image seems to change aspect ratio when dragging the width on a desktop browser. Making the browser window narrower shows more height of the actual image.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Nope I didn't mention that at all. I said that the image was a background image and it had no bearing on the height of the image and that it was the content that drove the image size. The aspect ratio of the image is not being changed from the original image (if it was doing that then the image would be distorted - which it isn't).
What is is doing is preserving the height of the container now (with the CSS that I gave to you). As the image is a background image it is being centered (vertically and horizontally) - This means that the sides of the background will be clipped as the viewport reduces in order to keep the height at 100% of the available space without distorting the image.
If you wanted to, you could change the CSS that I gave you to use "contain" instead of "cover" but then you will see that you will end up with white border top and bottom of the image which doesn't look good - so personally I think it looks better as it is.
Also I should point out that the image you are using is too small at only 1274px wide - it needs to be at least 1950px wide.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.066 seconds