Skip to content

Commit

Permalink
GH-484, GH-482 - image with content component fixes, and styling upda…
Browse files Browse the repository at this point in the history 
…tes (#619)
  • Loading branch information
@jhung
jhung authored Jun 22, 2023
1 parent 71857ff commit 4ff2d31
Show file tree
Hide file tree
Showing 4 changed files with 211 additions and 46 deletions.
26 changes: 14 additions & 12 deletions src/admin/previews.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,23 +245,25 @@ CMS.registerEditorComponent({
{
name: 'imagePosition',
label: 'Image Position',
hint: 'The "center" choice applies to the image only case when the content is not provided. If the "center" is selected when the content is provided, the image position will be reset to "left"',
hint: 'The "Center" choice only applies if the "Content" field below is empty.',
widget: 'select',
options: [{value:'left', label: 'Left'}, {value:'center', label: 'Center'}, {value:'right', label: 'Right'}]
options: [{value:'left', label: 'Left'}, {value:'center', label: 'Center (default)'}, {value:'right', label: 'Right'}],
default: 'center'
},
{
name: 'scale',
label: 'Scale',
label: 'Scale Image Width',
widget: 'select',
default: '100%',
options: [{value:'25%', label: '25%'}, {value:'50%', label: '50%'}, {value:'75%', label: '75%'}, {value:'100%', label: '100%'}]
default: '100',
options: [{value:'25', label: '25%'}, {value:'50', label: '50%'}, {value:'75', label: '75%'}, {value:'100', label: '100% (default)'}]
},
{
name: 'maxHeight',
label: 'Max Height in Pixel',
widget: 'string',
default: 'auto',
hint: 'Enter a number. For example 100.'
label: 'Max Height of Image',
hint: 'Useful for restricting height of tall images that may take too much vertical space.',
widget: 'select',
default: 'Auto',
options: [{value:'auto', label: 'Auto (default)'},{value:'200px', label: '200px'}, {value:'400px', label: '400px'}, {value:'600px', label: '600px'},{value:'800px', label: '800px'} ]
},
{
name: 'content',
Expand All @@ -273,11 +275,11 @@ CMS.registerEditorComponent({
},
{
name: 'verticalAlignment',
label: 'Vertical Alignment of Content',
hint: 'Only select when the content is provided.',
label: 'Vertical Alignment of Content to Image',
hint: 'Vertical Alignment of Content only applies if "Content" field above is not empty.',
required: false,
widget: 'select',
options: [{value:'top', label: 'Top'}, {value:'center', label: 'Center'}, {value:'bottom', label: 'Bottom'}]
options: [{value:'top', label: 'Top (default)'}, {value:'center', label: 'Center'}, {value:'bottom', label: 'Bottom'}]
}
],
pattern: /^{% imagePositionWithText "([\s\S]*?)", "([\s\S]*?)", "([\s\S]*?)", "([\s\S]*?)", "([\s\S]*?)", "([\s\S]*?)" %}([\s\S]*?){% endimagePositionWithText %}/,
Expand Down
220 changes: 193 additions & 27 deletions src/assets/styles/vendors/_cms-editor-components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,17 @@
align-self: end;
}

// General styles for image with text block.
.image-and-text {
display: grid;

.image-and-text__content {
margin-left: rem(25);
margin-top: 1rem;
}

.image-and-text__media {
align-self: center;
margin-top: 1rem;
}

img {
Expand All @@ -33,23 +35,43 @@
}
}

// Styling for media and text block with media on the left
.image-and-text--image-left {
grid-template-columns: 20% auto;
// Styling for image scaling. Default to 100% width for small screens
.image__scale--25,
.image__scale--50,
.image__scale--75,
.image__scale--100 {
max-width: 100%;
}

// Styling for media and text block with media on the right
// Styling for media with text block. Default to single column layout for small screens
.image-and-text--image-left,
.image-and-text--image-right {
.image-and-text__media {
grid-column: 2;
grid-row: 1;
}
grid-template-columns: auto;
}

.image-and-text__content {
grid-column: 1;
grid-row: 1;
margin-left: 0;
}
// Styling for image max height 200px.
.image__max-height--200px {
max-height: 200px;
}

// Styling for image max height 400px.
.image__max-height--400px {
max-height: 400px;
}

// Styling for image max height 600px.
.image__max-height--600px {
max-height: 600px;
}

// Styling for image max height 800px.
.image__max-height--800px {
max-height: 800px;
}

// Styling for image max height auto.
.image__max-height--auto {
max-height: auto;
}

// Styling for YouTube video block
Expand All @@ -68,7 +90,7 @@ video {
width: 100%;
}

// Styling for Image Position block
// Styling for Image Position block with no text block
.image-position--center {
display: block;
margin-left: auto;
Expand All @@ -87,8 +109,151 @@ video {
margin-right: 0;
}

.image-position--image-height {
max-height: var(--image-position-max-height, auto);
@include breakpoint-up(sm) {
// Styling for just image 25% width
.image__scale--25 {
max-width: 25%;
}

// Styling for just image 50% width
.image__scale--50 {
max-width: 50%;
}

// Styling for just image 75% width
.image__scale--75 {
max-width: 75%;
}

// Styling for just image 100% width
.image__scale--100 {
max-width: 100%;
}

// Styling for image aligned left with text block
.image-and-text--image-left {
.image-and-text__content {
margin-left: 1rem;
}

// Styling for media and text block with media at 25% width on the left
&.image-and-text--image-25 {
grid-template-columns: 25% auto;
}

// Styling for media and text block with media at 50% width on the left
&.image-and-text--image-50 {
grid-template-columns: 50% auto;
}

// Styling for media and text block with media at 75% width on the left
&.image-and-text--image-75 {
grid-template-columns: 75% auto;
}

// Styling for media and text block with media at 100% width on the left
&.image-and-text--image-100 {
grid-template-columns: 100%;
grid-template-rows: auto auto;

.image-and-text__media {
grid-column: 1;
grid-row: 1;
}

// Put text on second row.
.image-and-text__content {
grid-column: 1;
grid-row: 2;
margin-left: 0;
}
}
}

// Styling for image aligned right with text block
.image-and-text--image-right {
// Position image in right column.
.image-and-text__media {
grid-column: 2;
grid-row: 1;
}

// Position text in left column
.image-and-text__content {
grid-column: 1;
grid-row: 1;
margin-right: 1rem;
}

// Styling for media and text block with media at 25% width on the right
&.image-and-text--image-25 {
grid-template-columns: auto 25%;
}

// Styling for media and text block with media at 50% width on the right
&.image-and-text--image-50 {
grid-template-columns: auto 50%;
}

// Styling for media and text block with media at 75% width on the right
&.image-and-text--image-75 {
grid-template-columns: auto 75%;
}

// Styling for media and text block with media at 100% width on the right
&.image-and-text--image-100 {
grid-template-columns: 100%;
grid-template-rows: auto auto;

// Put image 100% on second row.
.image-and-text__media {
grid-column: 1;
grid-row: 2;
}

.image-and-text__content {
grid-column: 1;
grid-row: 1;
margin-right: 0;
}
}
}

// Styling for image aligned center with text block.
.image-and-text--image-center {
img {
margin-left: auto;
margin-right: auto;
}

// Styling for media and text block with media at 100% width centered
&.image-and-text--image-100 {
img {
width: 100%;
}
}

// Styling for media and text block with media at 75% width centered
&.image-and-text--image-75 {
img {
width: 75%;
}
}

// Styling for media and text block with media at 50% width centered
&.image-and-text--image-50 {
img {
width: 50%;
}
}

// Styling for media and text block with media at 25% width centered
&.image-and-text--image-25 {
img {
width: 25%;
}
}
}
}

@include breakpoint-up(md) {
Expand All @@ -98,25 +263,26 @@ video {
margin-left: rem(25);
}

img {
height: 100%;
width: 100%;
// at 100% image width text content is on a different line - remove left margin.
&.image-and-text--image-100 {
.image-and-text__content {
margin-left: 0;
}
}
}

// Styling for media and text block with media on the right
.image-and-text--image-right {
.image-and-text__content {
margin-left: 0;
margin-right: rem(25);
}
}

// Styling for Image Position block
.image-position--center,
.image-position--left,
.image-position--right {
width: var(--image-position-width, auto);
// remove margin if content is 100% width.
&.image-and-text--image-100 {
.image-and-text__content {
margin-right: 0;
}
}
}

// Styling for YouTube video block
Expand Down
9 changes: 3 additions & 6 deletions src/shortcodes/image-position-with-text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,12 @@ const markdownFilter = require('../filters/markdown.js');

module.exports = (content, image, alt, imagePosition, scale, maxHeight, verticalAlignment) => {
content = content.trim();
maxHeight = maxHeight.trim() === 'auto' ? 'auto' : maxHeight + 'px';
let output = '';

let output;
output = `<style>:root {--image-position-max-height: ${maxHeight}; --image-position-width: ${scale};}</style>`;
if (content === '') {
output += `<img src="${image}" alt="${alt}" class="image-position--${imagePosition} image-position--image-height" />`;
output += `<p><img src="${image}" alt="${alt}" class="image-position--${imagePosition} image-position--image-height image__scale--${scale} image__max-height--${maxHeight}" /></p>`;
} else {
imagePosition = imagePosition.trim() === 'center' ? 'left' : imagePosition;
output += `<div class="image-and-text image-and-text--image-${imagePosition} image-and-text--vertical-${verticalAlignment}"><figure class="image-and-text__media"><img src="${image}" alt="${alt}" class="image-position--image-height" /></figure><div class="image-and-text__content">${markdownFilter(content)}</div></div>`;
output += `<div class="image-and-text image-and-text--image-${imagePosition} image-and-text--image-${scale} image-and-text--vertical-${verticalAlignment}"><figure class="image-and-text__media"><img src="${image}" alt="${alt}" class="image-position--image-height image__max-height--${maxHeight}" /></figure><div class="image-and-text__content">${markdownFilter(content)}</div></div>`;
}
return output;
};
2 changes: 1 addition & 1 deletion src/utils/generateProjectPermalink.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ module.exports = (data) => {
}

const locale = data.locale;
const localeSlug = config.languages[locale].slug || locale;
const localeSlug = config.languages[locale]?.slug || locale;
const slug = data.permalink || slugFilter(data.page.fileSlug);
const root = (locale === config.defaultLanguage) ? '/projects/' : `/projects/${localeSlug}/`;

Expand Down

0 comments on commit 4ff2d31

Please sign in to comment.