Switch between Grid and List views

  • Resolved joropress

    (@joropress)


    6 years, 5 months ago

    Hi,

    I have a totally different question that’s why I open another ticket for it. The previous one is about to be resolved any moment but now I need some help with customizing the links to transition between 2, 3, 4 column grid and the list view.

    To the basic 2 buttons of switching between the grid (with 3 columns initially) and the list view I added 2 more buttons and they link me to 2 different pages – with 2 and with 4 columns but they are added by shortcodes so when clicked they don’t change with “?display=grid” in order to dynamically change the grid/list view but instead of this just go to the specified pages with 2 and 4 columns. This is a rather rough way and only partly solves my problem because actually and obviously this is not the right way to be done. I need to have the possibility of switching the view between the 3 possible options of columns (2, 3, 4) and the list view but without the need of going to another page. The best case would be if this effect could be added to the categories pages as well. And by “categories pages” I mean pages like “domain.com/advert-category/The-Category/”.

    How could I achieve this effect?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Greg Winiarski

    (@gwin)

    Hi, right now this is not really possible (at least not without customizing original source code), once you set the number of columns the [adverts_list] has it is not possible to change it dynamically i am afraid.

    Thread Starter joropress

    (@joropress)

    Well, If that’s the case I would try to customize the original source code.
    Could you please give me an initial idea where to start, then I’ll try to do it by myself?

    Plugin Author Greg Winiarski

    (@gwin)

    You will probably want to customize files:
    – wpadverts/includes/shortcodes.php function shortcode_adverts_list() to handle selecting active layout that is number of columns
    – wpadverts/templates/list.php to display some interface for switching the view.

    Thread Starter joropress

    (@joropress)

    Done! It works! ??
    Is it ok if I share my customization here so someone else could use it if needed?

    Plugin Author Greg Winiarski

    (@gwin)

    Sure, feel free to share it :), but please keep in mind that if the changes where done in original WPAdverts files they will be overwritten on WPAdverts update.

    Thread Starter joropress

    (@joropress)

    Ok, so here is how this effect could be achieved, having in mind that default number of columns in my case is set to 2 in the WP Adverts Core:

    1. I use a child list.php template as shown here
    https://wpadverts.com/documentation/child-themes-and-templates/

    2. In wpadverts/includes/shortcodes.php change this line of code:

    if( $switch_views && in_array( adverts_request( "display", "" ), array( "grid", "list" ) ) ) {

    to this:

    if( $switch_views && in_array( adverts_request( "display", "" ), array( "grid", "grid3", "list" ) ) ) {

    then just below this code:

    if( $display == "list" ) {
        $columns = 1;
    }

    add:

    if( $display == "grid3" ) {
        $columns = 3;
    }

    3. Open the child template of list.php and below this line:

    <?php if($switch_views): ?>

    add this:

    <a href="<?php echo esc_html( add_query_arg( "display", "grid3" ) ) ?>" class="adverts-button-small adverts-switch-view" title="View in 3 columns grid"><span class="adverts-square-icon adverts-icon-th"></span></a>

    Now in your Advert’s page you should have a 3rd button changing the grid dynamically to 3 columns.

    4. It would be a good idea to backup the shortcodes.php file otherwise it could be lost during next WP Adverts update.

    That’s it!
    Using the same method could be added another button changing the view to 4 columns grid if needed. The only difference would be that you must use an image for the grid instead of a FontAwesome icon because there is no such an icon yet : )

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Switch between Grid and List views’ is closed to new replies.