group-compat.php
8 years ago
group-extra.php
8 years ago
group-fields.php
8 years ago
group-form.php
8 years ago
group-query.php
8 years ago
group-slideshow.php
7 years ago
group-style.php
8 years ago
option-background.php
8 years ago
option-boilerplate.php
9 years ago
option-category.php
8 years ago
option-classes.php
8 years ago
option-client-section.php
7 years ago
option-color.php
8 years ago
option-content.php
7 years ago
option-divi.php
8 years ago
option-form-ajax.php
9 years ago
option-form-category.php
8 years ago
option-id.php
8 years ago
option-layout.php
8 years ago
option-limit.php
8 years ago
option-order.php
8 years ago
option-pagination.php
8 years ago
option-read-more-page.php
8 years ago
option-select.php
8 years ago
option-slideshow-behavior.php
8 years ago
option-slideshow-breakpoints.php
7 years ago
option-slideshow-navigation.php
7 years ago
option-slideshow-num.php
7 years ago
option-slideshow-transition.php
7 years ago
option-slideshow-type.php
7 years ago
option-template-list.php
8 years ago
option-thumbnail.php
8 years ago
option-title.php
8 years ago
template-input.php
8 years ago
template-not-found.php
8 years ago
template-options.php
8 years ago
view-mode.php
8 years ago
view-name.php
9 years ago
view-shortcode.php
8 years ago
option-layout.php
148 lines
| 1 | <th> |
| 2 | <?php _e( 'Layout', 'strong-testimonials' ); ?> |
| 3 | </th> |
| 4 | <td colspan="2"> |
| 5 | <div class="section-radios layout-section"> |
| 6 | |
| 7 | <!-- Inputs --> |
| 8 | <div class="radio-buttons"> |
| 9 | <ul class="radio-list layout-list"> |
| 10 | <li> |
| 11 | <input type="radio" |
| 12 | id="view-layout-normal" |
| 13 | name="view[data][layout]" |
| 14 | value="" <?php checked( false, $view['layout'] ); ?>> |
| 15 | <label for="view-layout-normal"> |
| 16 | <?php _e( 'normal', 'strong-testimonials' ); ?> |
| 17 | </label> |
| 18 | </li> |
| 19 | <li> |
| 20 | <input type="radio" |
| 21 | id="view-layout-masonry" |
| 22 | name="view[data][layout]" |
| 23 | value="masonry" <?php checked( 'masonry', $view['layout'] ); ?>> |
| 24 | <label for="view-layout-masonry"> |
| 25 | <?php _e( 'Masonry', 'strong-testimonials' ); ?> |
| 26 | </label> |
| 27 | </li> |
| 28 | <li> |
| 29 | <input type="radio" |
| 30 | id="view-layout-columns" |
| 31 | name="view[data][layout]" |
| 32 | value="columns" <?php checked( 'columns', $view['layout'] ); ?>> |
| 33 | <label for="view-layout-columns"> |
| 34 | <?php _e( 'columns', 'strong-testimonials' ); ?> |
| 35 | </label> |
| 36 | </li> |
| 37 | <li> |
| 38 | <input type="radio" |
| 39 | id="view-layout-grid" |
| 40 | name="view[data][layout]" |
| 41 | value="grid" <?php checked( 'grid', $view['layout'] ); ?>> |
| 42 | <label for="view-layout-grid"> |
| 43 | <?php _e( 'grid', 'strong-testimonials' ); ?> |
| 44 | </label> |
| 45 | </li> |
| 46 | </ul> |
| 47 | </div> |
| 48 | |
| 49 | <!-- Layout Info --> |
| 50 | <div> |
| 51 | <div class="radio-description" id="view-layout-info"> |
| 52 | |
| 53 | <div class="layout-description view-layout-normal"> |
| 54 | <p><?php _e( 'A single column.', 'strong-testimonials' ); ?></p> |
| 55 | </div> |
| 56 | |
| 57 | <div class="layout-description view-layout-masonry"> |
| 58 | <p><?php printf( __( 'A cascading, responsive grid using the jQuery plugin <a href="%s" target="_blank">Masonry</a>.', 'strong-testimonials' ), esc_url( 'http://masonry.desandro.com/' ) ); ?></p> |
| 59 | <p><?php _e( 'The universal solution that works well regardless of testimonial lengths.', 'strong-testimonials' ); ?></p> |
| 60 | <p><?php _e( 'Not compatible with pagination.', 'strong-testimonials' ); ?></p> |
| 61 | </div> |
| 62 | |
| 63 | <div class="layout-description view-layout-columns"> |
| 64 | <p><?php printf( __( 'Using <a href="%s" target="_blank">CSS multi-column</a>. Fill from top to bottom, then over to next column.', 'strong-testimonials' ), esc_url( 'https://css-tricks.com/guide-responsive-friendly-css-columns/' ) ); ?></p> |
| 65 | <p><?php _e( 'Works well with both long and short testimonials.', 'strong-testimonials' ); ?></p> |
| 66 | <p><?php _e( 'Compatible with pagination.', 'strong-testimonials' ); ?></p> |
| 67 | </div> |
| 68 | |
| 69 | <div class="layout-description view-layout-grid"> |
| 70 | <p><?php |
| 71 | $url = 'https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties'; |
| 72 | printf( __( 'Using <a href="%s" target="_blank">CSS flexbox</a>.', 'strong-testimonials' ), esc_url( $url ) ); |
| 73 | ?></p> |
| 74 | <p><?php _e( 'Testimonials will be equal height so this works best when they are about the same length either naturally or using excerpts.', 'strong-testimonials' ); ?></p> |
| 75 | <p><?php _e( 'Compatible with pagination.', 'strong-testimonials' ); ?></p> |
| 76 | </div> |
| 77 | |
| 78 | </div> |
| 79 | |
| 80 | <!-- Column selector --> |
| 81 | <div class="radio-description options" id="column-count-wrapper"> |
| 82 | <div> |
| 83 | <label for="view-column-count"><?php _e( 'Number of columns', 'strong-testimonials' ); ?></label> |
| 84 | <select id="view-column-count" name="view[data][column_count]"> |
| 85 | <option value="2" <?php selected( $view['column_count'], 2 ); ?>>2</option> |
| 86 | <option value="3" <?php selected( $view['column_count'], 3 ); ?>>3</option> |
| 87 | <option value="4" <?php selected( $view['column_count'], 4 ); ?>>4</option> |
| 88 | </select> |
| 89 | </div> |
| 90 | </div> |
| 91 | </div> |
| 92 | |
| 93 | <!-- Examples --> |
| 94 | <div> |
| 95 | <div class="layout-example view-layout-normal"> |
| 96 | <div class="example-container"> |
| 97 | <div class="box"><span>1</span></div> |
| 98 | <div class="box size2"><span>2</span></div> |
| 99 | <div class="box"><span>3</span></div> |
| 100 | <div class="box size2"><span>4</span></div> |
| 101 | <div class="box"><span>5</span></div> |
| 102 | </div> |
| 103 | </div> |
| 104 | <div class="layout-example view-layout-masonry"> |
| 105 | <div class="example-container col-2"> |
| 106 | <div class="grid-sizer"></div> |
| 107 | <div class="box"><span>1</span></div> |
| 108 | <div class="box size2"><span>2</span></div> |
| 109 | <div class="box"><span>3</span></div> |
| 110 | <div class="box size3"><span>4</span></div> |
| 111 | <div class="box"><span>5</span></div> |
| 112 | <div class="box size2"><span>6</span></div> |
| 113 | <div class="box"><span>7</span></div> |
| 114 | <div class="box size3"><span>8</span></div> |
| 115 | <div class="box"><span>9</span></div> |
| 116 | </div> |
| 117 | </div> |
| 118 | <div class="layout-example view-layout-columns"> |
| 119 | <div class="example-container col-2"> |
| 120 | <div class="box"><span>1</span></div> |
| 121 | <div class="box size2"><span>2</span></div> |
| 122 | <div class="box"><span>3</span></div> |
| 123 | <div class="box size3"><span>4</span></div> |
| 124 | <div class="box"><span>5</span></div> |
| 125 | <div class="box size2"><span>6</span></div> |
| 126 | <div class="box"><span>7</span></div> |
| 127 | <div class="box size3"><span>8</span></div> |
| 128 | <div class="box"><span>9</span></div> |
| 129 | </div> |
| 130 | </div> |
| 131 | <div class="layout-example view-layout-grid"> |
| 132 | <div class="example-container col-2"> |
| 133 | <div class="box"><span>1</span></div> |
| 134 | <div class="box"><span>2</span></div> |
| 135 | <div class="box"><span>3</span></div> |
| 136 | <div class="box"><span>4</span></div> |
| 137 | <div class="box"><span>5</span></div> |
| 138 | <div class="box"><span>6</span></div> |
| 139 | <div class="box"><span>7</span></div> |
| 140 | <div class="box"><span>8</span></div> |
| 141 | <div class="box"><span>9</span></div> |
| 142 | </div> |
| 143 | </div> |
| 144 | </div> |
| 145 | |
| 146 | </div> |
| 147 | </td> |
| 148 |