Support

Account

Home Forums General Issues Turn subfield radio button options into icons

Solving

Turn subfield radio button options into icons

  • I have 3 radio button options for my custom field ‘event_type’ Presentation, Workshop and Break in the back end. These display perfectly as words in the front end. However I want to replace the words with icons. Anybody any idea how I do this from the following code:
    <?php the_sub_field(‘event_type’); ?> I’m pretty new to php! Thanks.

  • Hi @ailsa_c

    You can do this like so:

    
    <?php
    
    $type = get_sub_field(‘event_type’);
    
    ?>
    <i class="icon-<?php echo $type; ?>"></i>
    

    This will produce an element with a class containing the $type. You can then style this with CSS to add the icon background image

    Thanks
    E

  • Hi Elliot,
    Do I need to replace something in the above code with reference to ‘presentation’ etc. as I have three icons for each of the three event types. Sorry my php is very basic. I created three classes for the icons .icon-presentation, .icon-workshop, .icon-break which all show background images as you suggest but nothing comes up in the front end.
    Many thanks.

  • Hi @ailsa_c

    Please use firebug to confirm the HTML is rendered correctly using the correct classes. Then, please use firebug to make sure your icon classes properly us attributes to display the image.

    You may need to use properties such as display, height, width

    Thanks
    E

  • Hi Elliot,
    Thanks I did as you suggested with display etc. I still get nothing (firebug is great though thanks for tip!). In Firebug I just get <i class=”icon-“></i> It doesn’t seem to pull in the ‘event type’ field.
    If I change the php to <i class=”icon-presentation”> they all end up being presentations (which I don’t want of course) but I was just testing if the classes were working, so they’re fine.
    Any ideas?

  • Hi @ailsa_c

    If the value of event_type is not being loaded, perhaps there is another issue on the template. Can you please post the code including the repeater field loop?

    Thnaks
    E

  • Hi Elliot,
    Here’s the code – thanks!

    <!-- BEGIN .entry-content -->
                            <div class="entry-content">
                            <p style="margin-bottom: 1rem"><img style="vertical-align:middle;margin-left:10px" src="http://new.cesi.ie/wp-content/uploads/2014/01/presentation-icon.png" /> = Presentation<img style="vertical-align:middle;margin-left:10px" src="http://new.cesi.ie/wp-content/uploads/2014/01/workshop_icon.png" /> = Workshop</p>
                                <?php the_content(); ?>
                                <?php g1_wp_link_pages(); ?>
                                <?php if(get_field('event_programme')): ?>
                     <div id="g1-table-1" class="g1-table g1-table--solid ">
                    
    			<?php while(has_sub_field('event_programme')): ?>
                  <table>
                <caption><h2><?php echo date('l, M jS', strtotime(get_sub_field('date'))) ?></h2></caption>
            <?php if(get_field('event_programme')): ?>
    		 <?php while(has_sub_field('event_details')): ?> 
             <thead> <tr> <th colspan="3">
    		 <?php the_sub_field('start_time'); ?> - <?php the_sub_field('end_time'); ?>
             </th> </tr> </thead> 
             <?php if(get_field('event_programme')): ?>
    		 <?php while(has_sub_field('presentation_details')): ?>  
                 <tbody> <tr><td>
    <?php
    
    $type = get_sub_field(‘event_type’);
    
    ?>
    <i class="icon-<?php echo $type; ?>"></i></td> 
                 <td><strong><?php the_sub_field('title'); ?></strong><?php the_sub_field('speaker'); ?></td>
                 <td><?php the_sub_field('location'); ?></td></tr> 
                 </tbody> 
             <?php endwhile; ?>
    	 <?php endif;  ?> 
           <?php endwhile; ?>
    	 <?php endif;  ?> </table><p></p>        					  	 
       <?php endwhile; ?></div>	
      <?php endif;  ?>	 
    </div>
    			<p><?php echo do_shortcode("[feather_share]"); ?></p>
                            <!-- END .entry-content -->
  • Hi @ailsa_c

    I can see there is an incorrect field_name in your second has_sub_field function:

    
    <?php if(get_field('event_programme')): ?>
    		 <?php while(has_sub_field('presentation_details')): ?>  
    

    This should be event_programme.

    Please also indent your code. This makes it much easier to read.

    Thanks
    E

  • Hi Elliot,
    If I put in `
    <?php if(get_field(‘event_programme’)): ?>
    <?php while(has_sub_field(‘event_programme’)): ?> `
    all my fields under event_programme disappear leaving me with just dates and no information under them.
    I imagine I should reference ‘presentation_details’ somewhere in the code in order to pull in all the timetable data. ‘presentation_details’ is my repeater field which contains the details of any one presentation. Maybe I misunderstood your instruction?
    Thanks

  • Hi @ailsa_c

    In normal situations, the field name used in a has_sub_field function should be the same field name in the get_field function before it.

    Your code showed 2 different field names, so I was simply stating they should be the same.

    If you want to load data from the presentation_details field, then yes, use this field name.

  • Hi Elliot,
    I changed the get_field to `presentation_details’ and all my data disappeared.
    The data before has the format where the ‘get_field’ and ‘has_sub-field’ are different

     <?php if(get_field('event_programme')): ?>
       <?php while(has_sub_field('event_details')): ?> 
        <thead> <tr> <th colspan="3">
    	<?php the_sub_field('start_time'); ?> - <?php the_sub_field('end_time'); ?>
             	</th> </tr> </thead>

    and it works fine to pull in the time so I thought the other would be fine too. And it is except for pulling in the different icons! Weird isn’t it. Maybe it’s just not possible to call in that ‘event_type’ field.

  • Hi @ailsa_c

    Can you please attach a screenshot of the field group edit page with all sub fields expanded, and also a screenshot of the post edit page.

    I need to better understand where your data is, and what the field names are.

    Thanks
    E

  • Hi Elliot,
    Here’s a link to the edit page screenshot
    screengrab edit field
    Thanks

  • Hi @ailsa_c

    Thanks for the screenshot. It is important to note that you have a NESTED repeater field. This is why your code did not work.

    You must first loop throug the event_programme, then for each row, loop through the event_details, then for each row, output the title, type, speak, etc.

    Please read the docs for the repeater field to better understand how to work with nested repeater fields.

    Thanks
    E

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Turn subfield radio button options into icons’ is closed to new replies.