WP Tiles 1.0 add custom classes or ids to specific tiles and more

  • Resolved MadsK

    (@madsk)


    10 years, 7 months ago

    Hello

    I’ve just started using this plugin as it really did something I’ve been trying to recreate for some time without any luck.

    But I’m having some problems and hoping i can get some help and clarification.

    I’ve inserted WP tiles directly into my theme with this.

    <?php the_wp_tiles( array('grids'=>'tabtarget', 'posts_query'=>'category=3', 'small_screen_grid'=>'Mobile', 'breakpoint'=>'768', 'padding'=>'0') ); ?>

    First off i’ve created a custom grid, which is as follows

    AAB
    AAC

    Which i’ve then loaded into the array.

    Small grid and breakpoint does not seem to work. Its supposed to load the tiles into this setup

    AA
    BC

    But it still uses the same grid system regardles of window size.

    So my first question will be how do I get it fall back to the mobile version on the breakpoint?

    Second question

    All tiles when loaded have all the specific styles directly coded into the html so I’ve had to use !important tag to override most of the styles.

    The container of which the tiles have been put in is 380px, but it seems to just extend further than that regardless of the fact. So i’ve had to use !important tag to override it.

    Is there a better solution for this?

    Last question

    I had finally gotten the WP tiles to show my 3 latest post and I used the tiles ID to style them.

    I then tried to add a new post with the category i’ve specified and suddenly it loaded all 4 instead of just 3 (which is the grid I’ve drawn in the grid designer).

    Not only that, but instead of rotatin the 3 previous “news” around so the first of the 4 would be gone I had thought the tiles would reuse the id’s and fill into them with the new data.

    But how do I give ex. the A tile a specific id and the B and C?

    I really really hope you can help me out as I would really like to use the plugin.

    I’ve taken the theme site out of development mode, until I’ve solved the issues so a early alpha build of the theme is availabe to see here.

    https://tabtarget.dk/

    https://www.ads-software.com/plugins/wp-tiles/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter MadsK

    (@madsk)

    I just tried adding ‘posts_per_page’=>3 to the array and that solved 1 problem. I now only get the 3 latest news.

    Now I just need to know if there is a better way to style my way out of the inline styling and if I can give a specific ID to Grid A, B and C.

    Plugin Author Mike Martel

    (@mike_cowobo)

    Hi @madsk,

    Thanks for trying the WP Tiles beta! Let me try to answer all your questions:

    So my first question will be how do I get it fall back to the mobile version on the breakpoint?

    Two things: make sure you have a small_screen_grid set up in your code, and that the breakpoint is set correctly. It takes the breakpoint from the width of the parent container, so if your parent container is 380px, make sure that the breakpoint is smaller than than – otherwise you will always have the mobile grid.

    The container of which the tiles have been put in is 380px, but it seems to just extend further than that regardless of the fact. So i’ve had to use !important tag to override it.

    Is there a better solution for this?

    Tiles will extend to the size of the first parent container that has the css property position set to anything-but-static. So if you give your 380px wide container the style position: relative the tiles should respect this. If they do not: please let me know.. that would be a serious problem.

    As far as the other inline styling goes: the JS applies inline styles based on settings that are part of the plugin – like the text color, background color and of course the grid sizes themselves. Unfortunately there is no way to not do these inline, as they are all JS generated. My recommendation is to see how far you get with the plugin settings, and resorting to custom css only after that.

    I hope that answers your questions! If I missed one or you have more questions, let me know!

    Also, it sounds like you’re doing interesting things with the plugin – if the website is up, please share the end result!

    Cheers,
    Mike

    Thread Starter MadsK

    (@madsk)

    Hello Mike

    Thank you for your response.

    The Tiles do not respect the height of their parent container even with position relative. It seems to keep creating its own height, which is a big problem.

    And also I would like to know if it is possible to give the grids an ID.
    It would be nice if you could actually add an ID to a grid in the grid editor so that A B and C had an GridA and GridB and GridC ID so they where easier to style.

    Plugin Author Mike Martel

    (@mike_cowobo)

    Hi again!

    I misunderstood – I thought you meant the width of the parent container. The height will always be based on the content. 1 character in the grid editor represents 1 square unit. So if you have this template:

    A A . .
A A . .

    the grid will be 4 squares wide and 2 high. If the width of the container is 800px (say), the height will be ( 800 / 4 ) * 2 = 400px. Ignoring padding that is.

    I like your suggestion of adding classes to tiles based on the letter they have in the grid editor. I’ll look into that!

    Mike

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘WP Tiles 1.0 add custom classes or ids to specific tiles and more’ is closed to new replies.