Video or Slider in Tile

  • Resolved esisaacs

    (@esisaacs)


    11 years, 2 months ago

    First off I’d like to say great product, thanks for all your hard work.

    Sorry if this is an ignorant question but is there any way to put a video from youtube or some other source in a tile? Also I would like to be able to put a slider in a tile for current events as well. I’m using this shortcode for the layout as I need the tiles to show specific posts in certain tiles and it works for both the desktop and mobile versions. The slider would be in the post ID 315 and the video in ID 1. Any help would be greatly appreciated!

    [wp-tiles id="368,370,372,374,392,315,1,320" grids="Home 3" small_screen_grid="Mobile 2" breakpoint="800"]

    My Grid

    AABBCCDDHHHH
    EEEEFFFFHHHH
    EEEEFFFFHHHH
    EEEEGGGGHHHH
    EEEEGGGGHHHH

    https://wordpress.org/plugins/wp-tiles/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Mike Martel

    (@mike_cowobo)

    11 years, 1 month ago

    Hi @esisaacs,

    Thanks for your comment!

    I love the idea of displaying videos on the tiles. Out of the box this is not possible though. I do think it is possible with some custom coding though. Here is an outline of what you could do:

    • Set a custom field on your posts for a video embed code
    • Set the byline template to display this embed code (%meta:META_KEY%)
    • In your css, make videos in WP Tiles stretch the whole size of the tile (position:absolute;top:0;left:0;right:0;bottom:0), and try to get it to display behind the link and the byline.

    Let me know if you’re going down this track and if you have any luck, I’d be very interested to see it!

    Cheers,
    Mike

    Thread Starter esisaacs

    (@esisaacs)

    11 years, 1 month ago

    Thanks Mike!

    I was on a right start with using a widget embed shortcode in the post for a video and I got that working, I couldn’t get the tile to pick up anything but the Featured Image though. I’m still getting used to bylines and other css type of coding, been out of the game a long time lol. CSS i’ve got a good handle on but the byline is giving me a bit of trouble, do you have a link to a good tutorial or anything that could help me along? I tried putting functions in the ID locations in the shortcode but that obviously didn’t work. I’ll play around with this and see what I can come up with. Of course if I get it to work I’ll let you know how I did it. Thanks again!

    Scott

    b00ner

    (@b00ner)

    10 years, 7 months ago

    Hi Scott,

    I’m not sure if you managed to get something working, but I’ve been putting video content in the tiles of my site for a while. It works mostly except for full-screen function in some browsers. I use the video embed code in a post and then preview the post in the byline, it works specifically for what I want (music videos/audio) then. Check out the website and see if it’s what you’re after, happy to provide more details!

    http://www.soundundefined.com

    Cheers

    Andrew

    OiGP

    (@oigp)

    10 years, 5 months ago

    HI b00ner can you provide more details on how to get video playing into the tiles??

    Thanks!!!!

    kidcajes

    (@kidcajes)

    10 years, 5 months ago

    Hi B00ner, can you please share exactly how you did it?

    b00ner

    (@b00ner)

    10 years, 5 months ago

    Hi Guys

    I’m not big on coding, so a lot of what I do is pretty hacky. If it works, I’m happy 🙂

    So in a post I just put the embed code direct from Youtube/soundcloud/etc and alter the size a bit. I’ve got a couple of links in there for bands websites and then display tags. Here’s a sample post code:

    ‘<h1><iframe width=”100%” height=”50%” src=”https://www.youtube.com/embed/Z2trL6X-tu4?rel=0&showinfo=0&#8243; frameborder=”0″ allowfullscreen></iframe><img src=”http://www.soundundefined.com/wp-content/uploads/2015/04/facebook-icon.jpg&#8221; alt=”facebook-icon” width=”24″ height=”24″ /> <img src=”http://www.soundundefined.com/wp-content/uploads/2015/04/twitter-icon.png&#8221; alt=”twitter-icon” width=”24″ height=”24″ /> <img src=”http://www.soundundefined.com/wp-content/uploads/2015/05/bandcamp.png&#8221; alt=”bandcamp” width=”24″ height=”24″ /></h1>’

    Because I don’t want people going to the actual post page, I don’t care what it looks like. All this serves is creating ‘content’ to be displayed as the byline.

    So in Byline Content of the WP Tiles options, I don’t link to anything through the tile. Under the Byline Template I have:

    ‘1 %content%
    2 %tag_links%’

    So the content I create in the posts is just for the byline. On the main page I just display the tiles and it comes out like you see. I make sure I add a feature image to each post and use that as the tile image.

    I’m sure if someone knows what they’re doing they could make it a lot better. It works well on desktop monitors but doesn’t adjust to smaller sizing/mobiles etc. As I said, full screen function doesn’t seem to work in some browsers, and everytime there’s a resize of the browser window, it resets the page and stops playing the video/audio.

    Happy to explain more but this is about the extent of it. Let me know how you go with it!

    Cheers

    Andrew

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Video or Slider in Tile’ is closed to new replies.