Zach Starnes
Zach Starnes

Reputation: 3198

Make icons appear if variable is set

I created a config file for a template I am making. I am trying to make the social icons only appear if the variable is set so if they don't enter information for that icon it does not show in the line of icons.

I know that I can do it with an if statement but I would prefer not to have to make 12 if statements (one per icon)

here is the config section for the icons

/* ==========================================================================
   Social Media Acct. Information Below
   ========================================================================== */

/*** INLCUDE FULL URL FOR ALL FIELDS ***/

// Facebook
define('FACEBOOK_URL', '#');

// Twitter
define('TWITTER_URL', '#');

// Linkedin
define('LINKEDIN_URL', '#');

// Pinterest
define('PINTEREST_URL', '#');

// Google Plus
define('GOOGLE_URL', '#');

// Dribbble
define('DRIBBBLE_URL', '#');

// Youtube
define('YOUTUBE_URL', '#');

// Vimeo
define('VIMEO_URL', '#');

// Flickr
define('FLICKR_URL', '#');

// Yelp
define('YELP_URL', '#');

// Stumble Upon
define('STUMBLE_URL', '#');

//Specify icon color below (white or dark)

define('ICON_COLOR', 'white');

and here is the html for each icon

<div id="social_icons">
    <a href="#"><div class="icon_container" id="facebook_icon"></div></a>
    <a href="#"><div class="icon_container" id="twitter_icon"></div></a>
    <a href="#"><div class="icon_container" id="linkedin_icon"></div></a>
    <a href="#"><div class="icon_container" id="google_icon"></div></a>
    <a href="#"><div class="icon_container" id="pinterest_icon"></div></a>
    <a href="#"><div class="icon_container" id="dribble_icon"></div></a>
    <a href="#"><div class="icon_container" id="youtube_icon"></div></a>
    <a href="#"><div class="icon_container" id="vimeo_icon"></div></a>
    <a href="#"><div class="icon_container" id="flickr_icon"></div></a>
    <a href="#"><div class="icon_container" id="yelp_icon"></div></a>
    <a href="#"><div class="icon_container" id="stumbleupon_icon"></div></a>
</div>

I want to be able to accomplish this without placing an if statement around each link. Is there a way? Thanks!

EDIT Here is the new code snippets based on @thtjuan's answer if this helps answer the full question.

PHP

$social_links = array(

   'facebook'       => '#',

   'twitter'        => '#',

   'linkedin'       => '#',

   'google'         => '#',

   'pinterest'      => '#',

   'dribbble'       => '#',

   'youtube'        => '#',

   'vimeo'          => '#',

   'flickr'         => '#',

   'yelp'           => '#',

   'stumbleupon'    => '#'
);

HTML

<div id="social_icons">
     <?php foreach( $social_links as $icon => $url ): ?>
     <a href="<?php echo $url; ?>"><div class="icon_container" id="<?php echo $icon?>_icon"></div></a>
     <?php endforeach;?>
</div>

Upvotes: 0

Views: 998

Answers (1)

0x6A75616E
0x6A75616E

Reputation: 4716

Create an array of links and then use a for loop to print them all:

e.g.

$links = array(
   'facebook' => '#',
   'twitter' => '#'
);

and then:

<div id="social">
  <?php foreach( $links as $icon => $url ): ?>
      <a href="<?php echo $url; ?>"><div class="icon_container" id="<?php echo $icon?>_icon"></div></a>
  <?php endforeach;?>
</div>

Note that any links that are not in the $links array will not show up at all on your page. If you must have all the entries in the array, then you can keep the ones without a url hidden by doing this:

<div id="social">
  <?php foreach( $links as $icon => $url ): ?>
      <?php if( strlen($url) && $url != '#' ): ?>
          <a href="<?php echo $url; ?>"><div class="icon_container" id="<?php echo $icon?>_icon"></div></a>
      <?php endif; ?>
  <?php endforeach;?>
</div>

Upvotes: 2

Related Questions