The incompatibility refers to Radix, not my subtheme. On some of the earlier RC releases, my subtheme also failed, but I was able to correct things - probably by re-writing the components correctly per the new way.
These are the Upgrade Status results:
Radix (radix) Contributed theme Installed 6.0.0-rc6
Local 11-Ready: Incompatible
Drupal.org 11-Ready: Compatibletstermitz → created an issue.
Slight change suggestion:
1. If you need to modify a component, copy/paste it from the parent radix theme from `radix/components` into your 'mytheme/components' directory.
Thanks. There really should be filter/tag for examples and tips.
Thank you Doxigo.
I composer updated to RC3, created a new subtheme with drush, and followed the instructions to arrive at a newly compiled subtheme.
I remember the not-so-old days when there were configuration issues and glitches in npm, so I'd like to congratulate you and the team with arriving at this success point.
I can now do the "smoke-test", as we "sparkys" used to call it: plug it in and see if it doesn't blow up.
tstermitz → created an issue.
Thanks Amstercad. Your article is very interesting and explains the situation well.
I guess my Radix 5 issue is useful as documentation or an example of how to do a carousel with views. It probably isn't necessary to add it to the Radix theme.
Thanks Sohail. I'm pretty good with SCSS, but don't claim to be a good twig programmer.
Also, although I maintain my own websites with git, I confess I've never sent a merge request to Drupal... maybe you could pm me or help educate me on that.
I pulled the carousel.scss file out to my own styles as you suggested. The BS default white makes it impossible to see the indicators and arrows, so most people will need their own colors and styles
I cleaned up the view-carousel.twig file a little taking out the debugging code. I don't know all the Drupal coding standards so I'd appreciate any other suggestions. The Aria stuff gets pretty complicated to do correctly; or else just leave it as Bootstrap defaults.
I did forget to mention how the Views Carousel gets invoked.... It needs a template over-ride file which merely imports the component:
File: templates/views/views-view-unformatted--carousel.html.twig
Contents: {% include "@tangodxrdx/carousel/view-carousel.twig" %}
Here's the carousel code:
<div id="carousel--{{ view.storage.id }}-{{ view.current_display }}" class="carousel slide" data-bs-ride="carousel" data-bs-wrap="true">
<div class="carousel-indicators">
{% for item in rows %}
<button type="button"
data-bs-target="#carousel--{{ view.storage.id }}-{{ view.current_display }}"
data-bs-slide-to="{{ loop.index-1 }}"
aria-label="arialabel-{{ item.content['#node'].label }}"
{{ loop.first ? 'class="active"'}} {{ loop.first ? 'aria-current="true"' }}>
</button>
{% endfor %}
</div>
<div class="carousel-inner">
{% for item in rows %}
<div class="carousel-item {{ loop.first ? 'active' }} carousel--{{ view.storage.id }}-{{ view.current_display }}" data-bs-interval="5000" >
{% block views_row %}
{{ item.content }}
{% endblock %}
</div>
{% endfor %}
</div>
<button class="carousel-control-prev" type="button"
data-bs-target="#carousel--{{ view.storage.id }}-{{ view.current_display }}"
data-bs-slide="prev" style="cursor:pointer">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button"
data-bs-target="#carousel--{{ view.storage.id }}-{{ view.current_display }}"
data-bs-slide="next" style="cursor:pointer">
<span class="carousel-control-next-icon"></span>
</button>
</div>
tstermitz → created an issue.
The better title for this suggestion is that webpack.mix.js easily compiles multiple CSS files. Then the theme.library.xml file declares which one to be used. Or else an Appearance Page admin button could choose, so that the CSS template choice is in the DB, while the code base remains in git.
The Bootstrap file structure and philosophy encourages you to make a few finite changes to a variable override file. If you set up your files logically you can "re-skin" a website via some very minor changes to three or four color variables.
I have two immediate use cases.
(1) I have three websites with different colors and logos, but the code base is identical but for the theming. I'm happy with everything else: structure, page-sizes, layout, views, menus. I could maintain three completely different themes, but my life will be infinitely easier if I mange updates on one local, and do a git pull to each remote site. I become a "yeoman wordpress developer" and sell ten or fifteen websites in 15 different brand colors, that I could maintain with minimal effort.
(2) Another typical use case would be to have a landing page or site sub-section, let's say members vs anonymous. In my case I was looking for a way to brand a subsection of my website for a separate business purpose.
This led me to several modules in the domain ecosystem, but as I mentioned, they are not ready for Drupal 10. Maybe Domain Library Attach almost does what I suggested, providing an admin interface that selects Primary, Secondary or Tertiary CSS library.
(I'm not that guy, as I'm a mere "front-end" developer, and only mess occasionally with twig templates.)
tstermitz → created an issue.
Please add a comment to the release notes for releases after 5.0.7 that it is necessary and safe to comment out these three lines, and move the offcanves.scss to your custom theme - if it is indeed safe to do that. I didn't immediately notice any issues after doing so.
Suggestion #10 worked for me, however...
I had to add the directive in two locations, the main server block and also the Location PHP block.
Drupal Media Systemt and NGINX file upload problem, client_max_body_size
NGINX Error log Message: "client intended to send too large body"
I recently rebuilt a new Digital Ocean server with LEMP, and installed Drupal 10 with success.
Media files uploads were sometimes failing without a user visible error message.
To fix this I had to add a client_max_body_size in TWO locations in my conf file. This directive is not suggested in any of the common Drupal NGINX conf examples.
Here is my working nginx.conf file main Server block:
server {
listen 443 ssl;
listen [::]:443 ssl;
root /var/www/mydomain/web;
server_name mydomain.com www.mydomain.com;
index index.html index.htm index.nginx-debian.html index.php;
client_max_body_size 100M;
location / {
try_files $uri $uri/ /index.php$is_args$args;
}
location = /favicon.ico { log_not_found off; access_log off; }
location = /robots.txt { log_not_found off; access_log off; allow all; }
location @rewrite {
rewrite ^/(.*)$ /index.php?q=$1;
}
location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
try_files $uri @rewrite;
expires max;
log_not_found off;
}
location ~ \.php$ {
try_files $uri =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
client_max_body_size 100M;
}
# Deny Access to all of Wordpress Front End files
location ~* ^/(/wp-admin*|/wp-cron*|/wp-config*) {
rewrite ^ / permanent;
}
ssl_certificate /etc/letsencrypt/live/mydomain.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/mydomain.com/privkey.pem; # managed by Certbot
}Drupal Media Sysetm and NGINX file upload problem, client_max_body_size
Error Message: "client intended to send too large body"
I recently rebuilt a new Digital Ocean server with LEMP, and installed Drupal 10 with success. (Relatively smooth sailing, I must say!).
I had to work through a few issues that would be easier if there were some good Drupal-successful NGINX Conf files. I uses a couple of tutorials, and examples including the Drupal recipe listed above in the initial issue:
https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on...
https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-wit...
A difficult issue I had was dealing with Media upload of files which failed silently. I was only able to identify the problem in the nginx error logs. Even with php.info max_file_size set to 100M, NGINX needs a "client_max_body_size: 100M;" directive. This needed to be placed in both the main Server block, and the PHP Location block.
The requirement of adding the client_max_body_size directive is not very well documented as I discovered after searching with many google attempts.
For the record here is my NGINX main server block:
server {
listen 443 ssl;
listen [::]:443 ssl;
root /var/www/mydomain/web;
#server_name _;
server_name mydomain.com www.mydomain.com;
index index.html index.htm index.nginx-debian.html index.php;
client_max_body_size 100M;
location / {
try_files $uri $uri/ /index.php$is_args$args;
}
location = /favicon.ico { log_not_found off; access_log off; }
location = /robots.txt { log_not_found off; access_log off; allow all; }
location @rewrite {
rewrite ^/(.*)$ /index.php?q=$1;
}
location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
try_files $uri @rewrite;
expires max;
log_not_found off;
}
location ~ \.php$ {
try_files $uri =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
client_max_body_size 100M;
}
# Deny Access to all of Wordpress Front End files
location ~* ^/(/wp-admin*|/wp-cron*|/wp-config*) {
rewrite ^ / permanent;
}
ssl_certificate /etc/letsencrypt/live/mydomain.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/mydomain.com/privkey.pem; # managed by Certbot
}
server {
if ($host = www.mydomain.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = mydomain.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
listen [::]:80;
server_name mydomain.com www.mydomain.com;
return 302 https://$server_name$request_uri;
}