Thank you for your time helping me debug this. I knew it was unlikely a bug and appreciate your help. I will investigate with your suggestion.
Sure, here it is. Looks fine on desktop, Mobile is messed up.
I don't understand the misunderstanding here. The image that you are providing for evidence is NOT center justified.
It is clearly left justified.
Am I mistaken? Comparing my image above that is center justified to your image that is left justified.
You are showing a left-justified image to say that my scenario of center justified usage is a flawed issue.
Ravi, that screen shot is left justified. This post is about center justified.
Can you just confirm that your test shown above results in the proper behavior? You showed centering the menu with a class but you won't confirm that it looks proper on mobile.
Not what I am observing. Default is left aligned under the parent item
while left aligned is left aligned on the page.
You are missing my point....
Prior to ever editing that section, the submenu is directly under the parent.
Once you touch and of the alignment options you can never get back to the default behavior. Do you understand what I am trying to convey?
So does it look ok on mobile when you do that or not?
In your example, the menu is left justified. I noted in my OP that the issue happens when the menu is centered.
If you have testing ability on your site, can you apply the
justify-content-center
class to the menu block in the block layout configuration page?
It is the "justify-content-center" class on the menu block on the block layout page that is messing things up.
But if I don't have that, then the fact that I put the edge-to-edge screws up my alignment.
The goal of having edge-to-edge AND centered is proving a challenge.
I know this is old and closed but....
This is the root reason I have been looking for how to find the old stacked layouts with layouts such as
Section x
--------------
| |
| 1 |
---------------
| | |
| 1 | 2 |
| | |
---------------
| |
| 1 |
---------------Thank you so much for the pointer to block-class. I will try that out tonight.
On the layouts question... this gets back to the fundamental pros/cons of using pre-built distributions. I personally think that Varbase is a great out of the box solution but there are times when I want to not be shackled into a single vendor who gets to their solution by rebuilding a whole bunch of core modules with their specific versions.
Well, I think that requiring logos to be under a maximum pixel height in order to display properly is a poor design.
In your method, one must customize the theme and rebuild it in order to adjust for varying logo heights.
But, hey, whatever.
In the short term, I just removed the hardcoded navbar height and rebuilt the subtheme.
I'm a fan of shrinking the image to fit the hardcoded sccs navbar height as a safety feature. I can't think of any case where we would not want the logo height capped to avoid clipping. I'm going to go try to find the proper sccs code to do that now and rebuild my sub-theme.
It is always preceded by an update.
Unfortunately, this means that I update infrequently because when I do, I have a 50/50 chance of having to revert to backups.
I think I fixed it by tweaking my nginx reverse proxy server block
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $proxy_protocol_addr;
proxy_set_header X-Forwarded-For $proxy_protocol_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “upgrade”;
proxy_buffering off;
proxy_pass http://10.220.127.232:80/;
}I am running an Nginx reverse proxy that does my certificates and that is set up to proxy to port 80...
###############################################
# Virtual Host configuration for my drupal install.
#
server {
server_name my_domain.com www.my_domain.com sub1.my_domain.com sub2.my_domain.gop sub3.my_domain.com ;
listen [::]:443 ssl proxy_protocol; # managed by Certbot
listen 443 ssl proxy_protocol; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/xxxx/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/xxxx/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
real_ip_header proxy_protocol;
proxy_set_header X-Real-IP $proxy_protocol_addr;
proxy_set_header X-Forwarded-Proto $scheme;
add_header 'Content-Security-Policy' 'upgrade-insecure-requests';
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $proxy_protocol_addr;
proxy_set_header X-Forwarded-For $proxy_protocol_addr;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “upgrade”;
proxy_pass http://10.220.127.232:80/;
}
So, maybe by the time Drupal detects the URL it is only sensing the http flavor that was proxy_passed to it.
Yes, that is what I am asking. Odd that I would need to use some API to modify that on a straight up initial build.
We aren't on the same page here...
That Drupal Config Page screen is setting the default homepage for the Drupal instance. See the attached image.
It is clearly pulling a base URL from somewhere and it is pulling the http flavor.
Do you know where that base url is getting its value from?
Found it. There is a view published terms and names for each content type. That was not set for anonymous.
I never did fix it.
HeneryH → created an issue.
Thank you. Now I remember turning that on in Simple SIte Map. Thank you for correcting my error.
Argh! posting images is always hard here in the forums. Issues can upload image files but the forum doesn't allow that. I'll try again.
Politician bios tagged with an 'Office' taxonomy.
The view page or block would then organize the list of politician bios by the office:
- Group the politicians tagged as "State" offices in one block
- Group "County" in the next block
- Group "Town" in the last block
Got it. Finally.
In my nginx reverse proxy
add_header 'Content-Security-Policy' 'upgrade-insecure-requests';
Thank you for bearing with me.
You can close this ticket.
I have my reverse proxy upgrading all of the connection requests to https. Looking into the image url being http proto.
There were some https http errors but I am not sure if they are normal. Those errors are not on my site that is working. I will dive into that issue. Maybe a security setting somewhere. But it works on background image style.
I have a reverse proxy that catches the https with the Lets Encrypt certs then forwards to the Drupal instance over http
www.bucks.gop/:1 Mixed Content: The page at 'https://www.bucks.gop/' was loaded over HTTPS, but requested an insecure image 'http://www.bucks.gop/drimage/400/225/5/-/jpg'. This request has been blocked; the content must be served over HTTPS.
www.bucks.gop/:1 Mixed Content: The page at 'https://www.bucks.gop/' was loaded over HTTPS, but requested an insecure image 'http://www.bucks.gop/drimage/400/225/4/-/png'. This request has been blocked; the content must be served over HTTPS.
www.bucks.gop/:1 Mixed Content: The page at 'https://www.bucks.gop/' was loaded over HTTPS, but requested an insecure image 'http://www.bucks.gop/drimage/400/225/8/-/png'. This request has been blocked; the content must be served over HTTPS.
No logs above warnings.
I can access the images directly from the path in a separate browser window.
I tried to inspect the html but there is some drimage magic going on there with two image references.
Here is just the image I think
<div class="drimage" data-drimage="{"fid":"8","filename":"bucksgop_logo_b_title.png","threshold":100,"upscale":100,"downscale":3600,"multiplier":1,"imageapi_optimize_webp":null,"lazy_offset":100,"subdir":"","original_width":"499","original_height":"100","original_source":"\/sites\/default\/files\/2023-08\/bucksgop_logo_b_title.png","image_handling":"aspect_ratio","aspect_ratio":{"width":"16","height":"9"}}">
<a href="/media/4/edit"><picture>
<img src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='9'%20viewBox='0%200%2016%209'%20%3E%3C/svg%3E" width="16" height="9" alt="Logo Blue w Title" />
</picture></a>
</div>
<noscript>
<img src="/sites/default/files/2023-08/bucksgop_logo_b_title.png" alt="Logo Blue w Title" width="499" height="100">
</noscript>
</div>Cards with dynamic responsive image - cover format
Going to a dynamic responsive - fixed ratio scale format
Results in
And there are still no drimage image styles. Whoops, one just popped up, but still no-go on the image showing.
Hmmm, there are no newly created styles after I deleted them. Let me go check my display settings to see how I have them setup.
Deleted the drimage_.... styles.
How do I kick it to recreate?
Ran into a second case of this I think... I colored my footer background color in my gin-custom.css file in the docroot/sites/default/files directory. That works.
But changing the footer menu link text color to have contracting colors is stumping me.
Is that the same concept of editing the
page-footer/
├── README.md
├── page-footer.component.yml
├── page-footer.css
├── page-footer.scss
└── page-footer.twigand then recompiling the component css?
Cloning the component seems straight forward.
How do I compile the component scss --> css when the item in question is not a theme.
I am more used to using yarn commands like theme:init and theme:build but in this case it is not a theme.
Here is the Varbase homepage and I am trying the theme the slider to get more contrast on the text over the flag.
There are currently four drimage styles in the media - image style settings.
If I delete them, what happens to the content that may be currently using them?
Then I assume I need to recreate the image styles and reset all the content somehow?
This could get huge because the Varbase distribution is set by default to use drimage.
Rajab, I will make edit suggestions via a, issue fork.
I have made great progress in understanding how to override sass variables in the scss files. And the theme build instructions you pointed me to work great.
One area that is also new to me and not yet working for me is how to "theme" (for lack of a better word) a component. For instance the media hero slider is its own component in the modules directory structure and it has its own scss and css files over there.
In the my new theme directory where I am having success with theme edits of a more general site-wide nature, I see a section in my scss/_my_theme-variables.scss where it seems to allow me to customize the colors of the hero media slider content background but they are not taking effect.
./scss/_bucks_gop-variables.scss
// Custom Varbase Hero slider media variables.
// -----------------------------------------------------------------------------
// Text color.
//$hero-title-text-color: #fff;
//$hero-brief-text-color: #fff;
//$hero-link-text-color: #fff;
$hero-title-text-color: $my-custom-color;
$hero-brief-text-color: $my-custom-color;
$hero-link-text-color: $my-custom-color;
// Font sizes with responsive sizes.
$hero-xlarge-title-font-size-xs: 3.3rem;
$hero-xlarge-title-font-size-sm: 3.3rem;
$hero-xlarge-title-font-size-md: 57px;
$hero-xlarge-title-font-size-lg: 57px;
$hero-xlarge-title-font-size-xl: 57px;
// Hero content style.
$hero-content-hover-opacity: 0.7;
//$hero-content-background-color1: rgb(0,0,0);
//$hero-content-background-color2: rgba(0,0,0,0.3);
$hero-content-background-color1: $my-custom-color;
$hero-content-background-color2: rgba(x, y, z,0.9);Do you have any hints on how to pull in component theme edits when the scss and css are in the modules directory rather than my theme directory?
I want to change the color of the hero content text elements and put a semi-transparent background color on the content block.
OK, that set of instructions worked fine. This ticket can be reclassified as a "Vartheme_bs5 ReadMe" error since those instructions are not accurate.
Thank you.
I am having a strange problem with my images not showing up on my site. It is a new install of Varbase.
When I format my images as just 'images' they work fine. It actually works fine in drimage if I use the 'background' option.
When I format them using drimage Responsive Images with scale or crop, they come up as if there is a bad hyperlink.
I have another site I built about a month ago that is largely the same setup but that site works fine. Both were Varbase 10.alpha2 installs with Drupal 10.1.2 but one seems fine with the drimage viewing and the other does not. I cannot find the difference.
Any advice?
This ticket has the comparisons ... https://www.drupal.org/project/varbase_media/issues/3381989#comment-1519... 🐛 New install - media images not showing due to bad links? Active
Oh, great, I went to vartheme_bs4 and now my media hero isn't working. So now none of my media images or remote videos display.
Any hints?
I can't keep my conservative politics secret anymore, it gets tiresome. Hopefully I am not shunned :-)
Here is the side by side. One difference I think I see is that the working version is using vartheme_bs4 while the non-working one is on bs_5.
I'll try that to see if it matters.
Open these images in a new tab to get the detail.
I've got two varbase installs, both on d10.1.2 and using the Varbase varbase-10.0.0-alpha2 profile.
The one I installed a while back is working but the new one is not. I checked the directory permissions and they are the same.
I've compared the source html generated by each and they look similar except I am not a drimage expert to know about that.
I am getting to a wall in diagnosing why the media images are coming up with bad links when displaying teasers and full content.
The links to the media image work fine if I put them into a browser standalone but not on the page.
Does that narrow the problem down to what drimage is doing with them?
Not related to just the blog. Basic page also. Creating a new ticket in the correct spot.
Updated the title since it is not just the blog that is failing the media images. The basic page does too.
But the Hero slider is good.
Could this be the error?
The path for the image source in the page does not have the domain part...
<noscript>
<img src="/sites/default/files/2023-08/logo-fop-lodge-53.png" alt="FOP Logo" width="600" height="538">
</noscript>
If I look in the settings - media - filesystem I see the path that should reference the media image. And indeed I can get to that image directly in the web browser
I checked the path and permissions on the file which seemed good.
ls -la docroot/sites/default/files/2023-08/
total 392
drwxrwx--- 2 me www-data 3 Aug 18 16:33 .
drwxrwx--- 8 me www-data 14 Aug 18 15:54 ..
-rw-rw-r-- 1 www-data www-data 395935 Aug 18 16:33 logo-fop-lodge-53.png<div class="card varbase-impressed-card medium bordered h-100 anchor-all">
<div data-component-id="varbase_components:field" class="field field--name-field-media field--type-entity-reference field--label-hidden field__item"><div class="contextual-region media media--type-image media--view-mode-media-16-09" data-component-id="varbase_components:media">
<div data-contextual-id="media:media=4:changed=1692376423&ds_bundle=image&ds_view_mode=media_16_09&langcode=en" data-contextual-token="1xyKtsk07H1-M0UPBaVTox15Bnzo4bTHrL4-TQqugpU" data-drupal-ajax-container=""></div>
<div data-component-id="varbase_components:field" class="field field--name-field-media-image field--type-image field--label-hidden field__item">
<div class="drimage" data-drimage="{"fid":"10","filename":"logo-fop-lodge-53.png","threshold":100,"upscale":100,"downscale":3600,"multiplier":1,"imageapi_optimize_webp":null,"lazy_offset":100,"subdir":"","original_width":"600","original_height":"538","original_source":"\/sites\/default\/files\/2023-08\/logo-fop-lodge-53.png","image_handling":"aspect_ratio","aspect_ratio":{"width":"16","height":"9"}}">
<picture>
<img src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='9'%20viewBox='0%200%2016%209'%20%3E%3C/svg%3E" width="16" height="9" alt="FOP Logo" />
</picture>
</div>
<noscript>
<img src="/sites/default/files/2023-08/logo-fop-lodge-53.png" alt="FOP Logo" width="600" height="538">
</noscript>
</div>HeneryH → created an issue.
I still can't get this to render properly. Anybody?
I think it has to do with the proper way to add margin top and bottom for buttons. I have read that it should be done by css on the parent container but I can't see how to fix it.
My google indexing is failing because of this.
I'm also having trouble figuring out the login replacement feature where:
Replace Drupal login with Keycloak single sign-on (SSO)
Changes Drupal's authentication back-end to use Keycloak by default. Drupal's user login and registration pages will redirect to Keycloak. Existing users will be able to login using their Drupal credentials at /keycloak/login.
Checking that box does not seem to actually 1) make the login look like the keycloak login OR 2) use the keycloak mechanics even if it doesn't look like keycloak.
If I add the OpenID block in addition to the standard drupal login then that works.
I want all my users to be forced to use the Keycload method.
Is there a way to push newly created users in Drupal to Keycloak? I'd like to keep all users there because I am also trying to make a NextCloud instance where the same users have access.
I'll contribute where I can:
My Home Network Reverse Proxy
I wanted to use my Keycloak instance behind a central Nginx firewall that I have routing different domain name ingresses to my home network all over the place. That Nginx reverse proxy does my Let's Encrypt certs as well as the routing.
Nginx Server File
#########################################
# Keycloak server configuration
#
server {
server_name keycloak.flynnconsultingllc.com;
listen [::]:443 ssl http2; # managed by Certbot
listen 443 ssl http2; # managed by Certbot
# listen [::]:443 ssl proxy_protocol; # managed by Certbot
# listen 443 ssl proxy_protocol; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/keycloak.flynnconsultingllc.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/keycloak.flynnconsultingllc.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
# real_ip_header proxy_protocol;
# set_real_ip_from 127.0.0.1;
#include /etc/nginx/templates/ssl.tmpl;
#include /etc/nginx/templates/misc.tmpl;
access_log /var/log/nginx/keycloak.access.log;
error_log /var/log/nginx/keycloak.error.log;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
location = / {
proxy_pass http://192.168.50.145:8080;
#return 301 https://$host/realms/example/account/#/;
}Of note above, I normally use proxy protocol but I don't think that works well in this case. Need to investigate more.
Keycloak Docker Stack From Portainer
version: '3'
services:
keycloak_srv:
image: quay.io/keycloak/keycloak:latest
command: start-dev
environment:
KC_DB: postgres
KC_DB_URL_HOST: postgres_srv
KC_DB_URL_DATABASE: keycloak
KC_DB_PASSWORD: pa55w0rd
KC_DB_USERNAME: keycloak
KC_DB_SCHEMA: public
KEYCLOAK_ADMIN: admin
KEYCLOAK_ADMIN_PASSWORD: pa55w0rd
KC_PROXY: edge
KC_HOSTNAME: "keycloak.my-domain.com"
KC_HOSTNAME_STRICT_HTTPS: 'true'
ports:
- "8080:8080"
depends_on:
postgres_srv:
condition: service_healthy
networks:
- keycloak_env_network
postgres_srv:
image: postgres:latest
command: postgres -c 'max_connections=200'
volumes:
- pgdata-keycloak_vm:/var/lib/postgressql/data
environment:
POSTGRES_DB: keycloak
POSTGRES_USER: keycloak
POSTGRES_PASSWORD: pa55w0rd
healthcheck:
test: "exit 0"
ports:
- "5436:5432"
networks:
- keycloak_env_network
volumes:
pgdata-keycloak_vm:
networks:
keycloak_env_network:
driver: bridgeThis launches fine and then I can get to it from my Nginx reverse proxy with https://keycloak.my-domain.com .
I created a Realm for my domain I wish to manage access to.
Insert screen shots
Insert Drupal Config
OK, so I tried to create a drupal user AND then go create a keycloak user. That failed login due to duplicate.
So I deleted the drupal user and retried the login.
That worked, but the user was blocked and had to be unblocked.
A simple refresh on the private window that was a user logging in then worked.
Trying to figure out the optimal new user process.
Magically went away with reloads and cache clears and prayers.
Hm, not sure why the image links didn't work. Trying images again.
Just tried the beta4 of simple_oauth and it yields the same circular reference.
A page refresh seemed to work though. Hold please while I investigate....
varbase-10.0.0-alpha2
8.1.2-1ubuntu2.11
Thank you, but the error logs are showing that I have something wrong with my varbase modules. I'll work on that separately
[Wed Aug 02 12:21:10.606846 2023] [proxy_fcgi:error] [pid 8465:tid 140235413370432] [client 10.220.127.13:50600] AH01071: Got error 'PHP message: Uncaught PHP Exception Symfony\\Component\\DependencyInjection\\Exception\\ServiceCircularReferenceException: "Circular reference detected for service "Drupal\\Core\\Logger\\LoggerChannelFactoryInterface", path: "authentication_subscriber -> authentication -> authentication_collector -> simple_oauth.authentication.simple_oauth -> simple_oauth.server.resource_server.factory -> file_system -> logger.channel.file -> Drupal\\Core\\Logger\\LoggerChannelFactoryInterface -> logger.syslog"." at /var/www/varbase/docroot/core/lib/Drupal/Component/DependencyInjection/Container.php line 147', referer: https://www.mydomain.org/update.php/resultsHeneryH → created an issue.
Good suggestion. I'll try to add memory allocation and rerun while watching the logs.
I can share the actual URL to anyone who wants to see the live effect. I'd just rather not post it here.
The photo was of the rendering on an iPhone. You can see the large margins on the simulated mobile view when I override the button class margins via the sites/default/files/gin-custom.css file. I cannot seem to get that to render on my phone.
It is all good, just capturing my experiences. I create a new view for myself and use that. I look forward to learning more about these new card based views and how to migrate towards using them. Thanks.
Nope, saying that Trans Rights are being attacked IS the culture war. Saying that the Drupal Association, by their statement, is not playing in the culture wars is just plain naïve (or worst, lying).
Well, the Drupal Association is sure chiming in with their viewpoints and with such confidence that their views are bedrock solid. Is there another place to comment on the official Drupal position they took on the USA Culture Wars?
Are these the "rights" that are being listed?
marriage equality, right to gender affirming medical care, right to privacy and comprehensive anti-discrimination laws that encompass employment, housing, healthcare, and public accommodations.
Is gender affirming care actually a 'right' in that society must pay the costs for anyone to transition? Is it a 'right' to have children transition?
Is is a right for those who have gone through puberty with testicles to compete against women?
Where are these 'rights' coming from?
Does the Drupal community support those who want women to have fair competition without men domination? Is is supportive of those who want their daughters to be able to use locker rooms without open display of penises?
Does the community support those who prefer not to expose children to life altering medical procedures?
Just curious how those opposing beliefs are treated by the community?
Putting the following in my gin-overrides solved the "clickable items too close" issue
.btn {
margin: 0.25rem;
}jjflynn22 → created an issue.