Hamilton and Gutenberg

Hello,
by introducing Gutenberg, there are difficulties with the galleries. The galleries are beautifully designed in Hamilton by Anders Norén. But Gutenberg forces the galleries on the text width. In Gutenberg, although the extension to “Wide width” and “Full width” in principle provided, but you have to unlock them by code changes. I found a first solution, but I had to change something for my website.

First, the code line must be added in the function.php (in the child theme):

add_theme_support( 'align-wide' );

Then the design of Wide with and Full width must be designed by CSS commands. The following CSS sentence works for this (insert in Appearance / Customize / Additional CSS):

/* G U T E N B E R G */
/* Block-Breiten für Galerien in Gutenberg erweitern */
.alignfull,
.alignwide {
	left: 44.6%;
	position: relative;
	transform: translate(-50%);
	width: 100vw;
}
.alignwide {
	max-width: 920px;
}
.alignfull {
	max-width: 1240px;
}
.alignfull img,
.alignwide img {
	width: 100%;
}
.body {
	overflow-x: hidden;
}
p.alignfull,
p.alignwide {
	padding-left: 1rem;
	padding-right: 1rem;
}

Now when I insert a gallery into a Gutenberg block I can change the gallery width to 920 or 1240 pixels by clicking on the two newly added symbols for Wide with and Full with.

But the beautiful block-like gallery designs, which Anders Norén has provided under the old TinyMC Editor, can not be realized well; they look much better. Among other things, the caption in Gutenberg is too small and not as clearly highlighted as provided in Hamilton.

The code described above does not seem to me to be optimal. Does anyone have an idea how to solve this better?

• This topic was modified 6 years, 3 months ago by martineller.
• This topic was modified 6 years, 3 months ago by martineller.

The page I need help with: [log in to see the link]