Giter VIP home page Giter VIP logo

craft-grid's Introduction

Hi there ๐Ÿ‘‹

craft-grid's People

Contributors

wbrowar avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

craft-grid's Issues

Add possibility to add more than one grid on a page

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)

Unused matrix block error.

When adding a Matrix block but not using it in the grid field, I get an 'Undefined offset' error on save.

image

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']]);
  }
}

Invalid field handle

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?

Incompatibility with Craft 3.2 when saving matrix fields

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.

input list should be sticky.

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;
}

Craft XMLHttpRequest page navigation not initiating grid layout on first load

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

Get column / row value.

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.

Eager loading matrix blocks

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.

Undefined index: prevMinWidth

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.