wbrowar / craft-grid Goto Github PK
View Code? Open in Web Editor NEWA field that lets you content manage CSS Grid in Craft CMS.
License: Other
A field that lets you content manage CSS Grid in Craft CMS.
License: Other
I am building a site which loads all entries and displays them as a slider.
Therefore all entries are rendered in the same html structure.
Now i ran into an issue because i add the generated css code inside a <style scoped>
attribute right next to the grid itself.
(If this is not how it is intended to use it, can you please explain how it is?)
My template looks like this:
<style scoped>
{{ craft.grid.value(entry.gridmatrix.all(), entry.grid).css }}
</style>
{% grid entry.gridmatrix.all() using entry.grid as gridItems with { classes: 'grid-'~entry.id } %}
{% for item in gridItems %}
{% griditem with { classes: "grid-item" }%}
{# rendering grid items #}
{% endgriditem %}
{% endfor %}
{% endgrid %}
Each item gets a class grid__grid__gridmatrix__item--{index}
, but because i have multiple grids on the same page, this will get overridden by the last appearing grid.
I'm aware one can add custom classes to the grid elements, but this won't help, as they won't be used in the generated css selectors.
Possible solution:
Add a property to the grid element to set the base class which will then also be used in the generated css. (Or don't add a new property but instead use the existing class property to generate the css)
When adding a Matrix block but not using it in the grid field, I get an 'Undefined offset' error on save.
I'll see if I can find a fix for this when I got the time.
EDIT: Found a fix: Simply check that an item is not empty.
PART 1: LINE 234 -> 245 in Grid.php
if (!empty($targetIds[$i])) {
$targetId = intval($targetIds[$i]);
$valueId = $value['target']['items'][$i]['id'];
if ($targetId != $valueId) {
$unmatchedIds[] = [
'target' => $targetId,
'value' => $valueId,
];
$value['target']['items'][$i]['id'] = $targetId;
}
}
PART 2: LINE 315 -> 319
if (!empty($fieldValue['target']['items'][$i])) {
if ($breakpoint['id' . $fieldValue['target']['items'][$i]['id']] ?? false) {
$breakpoint['id' . $currentIds[$i]] = $breakpoint['id' . $fieldValue['target']['items'][$i]['id']];
unset($breakpoint['id' . $fieldValue['target']['items'][$i]['id']]);
}
}
Hi,
I was wondering if this is compatible or will be compatible with Neo and Architect.
Thanks
I just purchased Grid as it seemed like the perfect solution to a problem I'm having; the client wants to be able to dynamically resize images in a gallery.
The problem is they also want to be able to add multiple galleries, as well as other components, using a matrix. I'm using Neo for this.
I'm concerned now that actually these two plugins don't work together and I've just wasted $40. When I save out a grid I get an error; Invalid field handle: images
. This only appears when I use Grid with Neo, whether I use one Grid field or multiple.
Is it a case that these two just don't play nice? Is there anything I can do to fix it?
If you're using Grid with a matrix block, please don't upgrade to Craft 3.2 until this issue is resolved
When saving a grid field that's target field is a matrix, the IDs that tie the grid field to the matrix blocks get out of sync as the matrix blocks are updated to create new drafts.
I'm not sure what the right solution is just yet, but I think for matrix blocks, using the indexes of the blocks might work.
When looking at the code in the backend I see you've added position sticky to the items list. However this does not seem to work.
The reason for this is because on '.grid__input__breakpoints' you've added an overflow:hidden.
EDIT: Change your CSS with 'css control panel' (https://plugins.craftcms.com/cp-css) or something to the following for your lists to be sticky again.
.grid__input__breakpoints {
overflow: visible !important;
}
.grid__input__breakpoint--before, .grid__input__breakpoint--after {
opacity: 0 !important;
transition: 0.2s all ease-out !important;
}
The above issue has been fixed for redactor however it still persists on entries with a grid field.
EDIT: not fixed with the new release. https://github.com/craftcms/cms/releases/tag/3.3.14
My site loads pages using XMLHttpRequest combined with crafts conditional 'extends' tag for page layout e.g.
{% extends (craft.app.request.isAjax and not craft.app.request.isLivePreview) ? "_skeleton-layout" : "_layout" %}
If I navigate via XMLHttpRequest to a page containing a grid, from a page without one, the grid is visible but not formatted correctly (all widths are 100%).
Once a page containing a grid is loaded without XMLHttpRequest (by external navigation or refreshing), the grid is then formatted correctly and works as expected on subsequent ajax page navigations.
Any help would be greatly appreciated.
Cheers,
Jamie
Is it possible to get the row or column value from certain items in the twig template? Or do you have an idea on how to fix ie11 compatibility issues? I should be as easy as adding the -ms- prefixes to make it work actually.
EDIT: I did find them when I dump the entry grid field but I cant seem to reach them.
Only update sort order on blur
when setting Breakpoint min-width
I might be missing something, but when trying to eager load matrix blocks I run into the following error: Impossible to access a key ("blockType:assetsField") on a null variable.
Following the documentation from Craft for eager loading and Grid, my template looks like so:
{% grid entry.matrixField.with['blockType:assetsField','blockType2:entriesField'].all() using entry.grid as gridItems %}
{% for item in gridItems %}
{% griditem %}
...
{% endgriditem %}
{% endfor %}
{% endgrid %}
I've intentionally replaced my field labels with generic labels to make it easier to follow along.
If I remove the .with[]
statement, the grid loads correctly minus the benefits of eager loading.
Just started testing out plugin, entered some random data to field setting and got error. Unfortunately im not really sure which thing caused this error specifically.
Undefined index: prevMinWidth
81828384858687888990919293949596979899 * @inheritdoc
*/
public function afterSave(bool $isNew)
{
if (!$isNew) {
// Check for updated breakpoints
$layout = Json::decodeIfJson($this->layout);
$newMinWidths = [];
foreach ($layout['breakpoints'] as $breakpoint) {
if ($breakpoint['prevMinWidth'] !== $breakpoint['minWidth']) {
$newMinWidths[] = [
'old' => $breakpoint['prevMinWidth'],
'new' => $breakpoint['minWidth'],
];
}
}
// Update all elements that have field
if (count($newMinWidths) > 0) {
// Get layouts that include this field
Element 2244 could not be duplicated for site 1: Slug cannot be blank.
Even when making the field translatable or not I can't seem to save it.
EDIT: Error was related to craft.
Target items saved in the field, but that have been deleted, still appear on the items preview grid.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.