Support » Plugin: Yet Another Related Posts Plugin (YARPP) » Change Custom Template for Media Query

  • Resolved b2squared

    (@b2squared)


    Is there a way to change the html used in a custom template according to the media query? Or alternatively, is it possible to change the template used based on media screen size/query?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Michael Nelson

    (@mnelson4)

    Hi @b2squared, interesting question!
    YARPP doesn’t support dynamically loading different templates based on the screen size, but I think you could write a custom template that does exactly that.
    Eg, create a custom template (or use one of the custom templates automatically created for you), then have either:

    1. Adds Javascript to the page, that detects the page size, and lays out the template accordingly
    2. Add some Javascript in the normal WordPres manner (using wp_enqueue_script), and have that Javascript send an AJAX request to the site containing the screen size. Then handle that AJAX request, and store the screen size in a session (a bit like what’s described here.) Then your PHP template code can grab the screen size from the session, and use it to decide how to lay out the HTML.

    Does that make sense?

    Thread Starter b2squared

    (@b2squared)

    Hey, yes it does. Thank you, you’ve given me some ideas to write it myself :). Appreciate you!

    Plugin Author yarpp

    (@jeffparker)

    @b2squared do let us know what you come up with! We’d love to share it with others.

    ps. If you’re looking to create a responsive layout, the most straightforward way to do it would be to use 100% css to manipulate the results for each screen width.

    Thread Starter b2squared

    (@b2squared)

    Thanks.. I already know that as my site is built on Bootstrap, so it is responsive. The custom template I have now has thumbnails wrapped in a div for each post. This template does not scale properly on mobile, hence the need to use CSS media queries to note the viewport size, and then load the template for the recent posts that is most advantageous, which to me is a simplified ul. Because this requires different HTML than the thumbnails option, this is why I needed to check the media screen size to know which YARP custom template to display.

    Plugin Author yarpp

    (@jeffparker)

    @b2squared were you able to figure it out?

    Thread Starter b2squared

    (@b2squared)

    Hey there… sort’ve. I only spent about 30 mins on it thus far [got busy]. And the problem I am running into is that the widget itself is dynamic, so choosing a div id to call the ajax load function to input the correct template doesn’t really work as intended given the yarpp parent div isn’t already on the page when the function is called. therefore, i’m probably going to have to write with the js in the function file & use more backend code than i would prefer. I may go tinker that route, or see if I can get the same effect I want manipulating the css entirely in the media queries since I don’t want to spend too much time on it. Thanks for checking back though!

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.