Menu icon Foundation

My Posts


My Comments

Mitchell van 't Zelfde commented on Mitchell van 't Zelfde's post over 3 years

Couldnt wait and tried ur codepen. It works. Only how would i go on about implementing that with Wordpress?

Right now i use orbit like this:

<div class="row fullwidth hide-for-small-only">
      <div class="large-12 columns no-pad">
        <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="true" data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
        <ul class="orbit-container">
          <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
          <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
<?php

          // The Query

          $args = array(
            'post_type'=>'orbit',
            'orderby' => 'title',
            'order' => 'ASC',
            'posts_per_page' => 8
          );

          $the_query = new WP_Query( $args );

          // The Loop
          if($the_query->have_posts()) :
                while($the_query->have_posts()) :
                $the_query->the_post();

          /* Restore original Post Data 
           * NB: Because we are using new WP_Query we aren't stomping on the 
           * original $wp_query and it does not need to be reset.

          wp_reset_postdata(); */
          ?>

          <li class="is-active orbit-slide">
            <div class="image-wrap" id="wrapper">
        <?php echo get_the_post_thumbnail(); ?>
        <?php endwhile; else: ?> 
        <?php endif; ?>'
</li>
</div>        
        </ul>
      </div>

       </div>
    </div>

How would i add Background images via wordpress?

Mitchell van 't Zelfde commented on Mitchell van 't Zelfde's post over 3 years

Sorry i removed the pictures yesterday, so thats why nothing was loading.

I have fixed the problem using this method because nothing i tried would keep the image ratio intact or it would receive in the image being so large you would need to scroll.

This is the method i used:

http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/

I ofcourse removed the transitions.

I have the pictures back online, take a look and let me know what you think.

Will try your codepen after work and see it that works as well.

Posts Followed

No Content

Following

    No Content

Followers

My Posts


My Comments

You commented on Mitchell van 't Zelfde's post over 3 years

Couldnt wait and tried ur codepen. It works. Only how would i go on about implementing that with Wordpress?

Right now i use orbit like this:

<div class="row fullwidth hide-for-small-only">
      <div class="large-12 columns no-pad">
        <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="true" data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
        <ul class="orbit-container">
          <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
          <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
<?php

          // The Query

          $args = array(
            'post_type'=>'orbit',
            'orderby' => 'title',
            'order' => 'ASC',
            'posts_per_page' => 8
          );

          $the_query = new WP_Query( $args );

          // The Loop
          if($the_query->have_posts()) :
                while($the_query->have_posts()) :
                $the_query->the_post();

          /* Restore original Post Data 
           * NB: Because we are using new WP_Query we aren't stomping on the 
           * original $wp_query and it does not need to be reset.

          wp_reset_postdata(); */
          ?>

          <li class="is-active orbit-slide">
            <div class="image-wrap" id="wrapper">
        <?php echo get_the_post_thumbnail(); ?>
        <?php endwhile; else: ?> 
        <?php endif; ?>'
</li>
</div>        
        </ul>
      </div>

       </div>
    </div>

How would i add Background images via wordpress?

You commented on Mitchell van 't Zelfde's post over 3 years

Sorry i removed the pictures yesterday, so thats why nothing was loading.

I have fixed the problem using this method because nothing i tried would keep the image ratio intact or it would receive in the image being so large you would need to scroll.

This is the method i used:

http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/

I ofcourse removed the transitions.

I have the pictures back online, take a look and let me know what you think.

Will try your codepen after work and see it that works as well.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content