PHP Layout Help; Plugin within theme

Hello,
I have a script that I have torn apart and kind of made my own. I have added a custom template to my theme and I'm trying to style this appropriaetly, but it's apparent that it needs some PHP work and styling. Reaching out here for help.

Although it displays on a computer, it's terrible on a mobile device. That's also not quite the layout I was hoping for.

Would like the "title" and "department" and "phone number" and "email address" listed under the image and then the biography to the right of the image. Here's my page content.

<?php get_header(); ?>

<?php $page_id = lsvr_get_current_page_id(); ?>

<?php // PAGE CONTENT BEFORE
get_template_part( 'components/page-content-before' ); ?>

<!-- PAGE CONTENT : begin -->
<div id="page-content">

	<!-- NOTICE DETAIL : begin -->
	<div class="notice-single-page notice-page">

		<?php if ( have_posts() ) : ?>
		<?php while ( have_posts() ) : the_post(); ?>

			<!-- NOTICE : begin -->
			<article <?php post_class( 'notice' ); ?>>
				<div class="notice-inner c-content-box m-no-padding">

					<?php if ( has_post_thumbnail() && lsvr_get_field( 'notice_detail_thumb' ) === 'top' ) : ?>
					<!-- NOTICE IMAGE : begin -->
					<div class="notice-image">
						<a href="<?php the_permalink(); ?>">
						<?php $thumb_data = lsvr_get_image_data( get_post_thumbnail_id() ); ?>
						<?php if ( lsvr_get_field( 'notice_detail_thumb_crop', true, true ) ) : ?>
							<span class="notice-image-inner" style="background-image: url('<?php echo esc_url( $thumb_data['thumbnail'] ); ?>');"></span>
						<?php else: ?>
							<img src="<?php echo esc_url( $thumb_data['thumbnail'] ); ?>" alt="<?php echo esc_attr( $thumb_data['alt'] ); ?>">
						<?php endif; ?>
						</a>
					</div>
					<!-- NOTICE IMAGE : end -->
					<?php endif; ?>

					<!-- NOTICE CORE : begin -->
					<div class="notice-core">

						<!-- NOTICE CONTENT : begin -->
						<div class="notice-content"><div id="content">

				<div id="inner-content" class="wrap cf">

                    <div class="staff-member">
                        <?php if (has_post_thumbnail( $post->ID ) ){
                                $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail' );
                                ?>
                                    <img src="<?php echo $image[0]; ?>" align="left" alt="profile image">
                                <?php
                            } else {
                                $image = get_template_directory_uri() . "/library/images/no-image.png";
                                ?>
                                    <img src="<?php echo $image; ?>" alt="profile image">
                                <?php
                            }
                        ?>
                        <?php //All shortcodes simply return the appropriate strings, so to print them all without the staff loop we have to echo do_shortcode() ?>
                        <div class='staff-info'>
                                <div class='staff-info'>
                                    <?php if(do_shortcode('[name]')): ?>
                                        <div class='name' title="Name">
                                            <i class="fa fa-user" aria-hidden="true"></i>
                                            <?php echo do_shortcode('[name]'); ?>
                                        </div>
                                    <?php endif; ?>
                                    <?php if(do_shortcode('[position]')): ?>
                                        <div class='position' title="Position">
                                            <i class="fa fa-briefcase" aria-hidden="true"></i>
                                            <?php echo do_shortcode('[position]'); ?>
                                        </div>
                                    <?php endif; ?>
                                    <?php if(do_shortcode('[email]')): ?>
                                        <div class='email' title="E-mail address">
                                            <i class="fa fa-envelope" aria-hidden="true"></i>
                                            <?php echo do_shortcode('[email]'); ?>
                                        </div>
                                    <?php endif; ?>
                                    <?php if(do_shortcode('[phone_number]')): ?>
                                        <div class='phone' title="Phone number">
                                            <i class="fa fa-phone" aria-hidden="true"></i>
                                            <?php echo do_shortcode('[phone_number]'); ?>
                                        </div>
                                        <section class="entry-content cf" itemprop="articleBody">
                                <?php
                                    $content = get_the_content();

                                    if($content){
                                        the_content();
                                    } else {
                                        echo "<p> No biography found. </p>";
                                    }

                                ?>
                              </section>
                                    <?php endif; ?>
                                </div>
                        </div>

                    </div>
</div>
						<!-- NOTICE CONTENT : end -->

					</div>
					<!-- NOTICE CORE : end -->

					<!-- NOTICE FOOTER : begin -->
					<div class="notice-footer">
						<div class="notice-footer-inner">

							<!-- NOTICE DATE : begin -->
							<div class="notice-date">

								<i class="ico tp tp-clock2"></i>
								<span class="notice-date-holder">
								<?php if ( lsvr_get_field( 'notice_detail_categories_enable', true, true ) ) : ?>
									<?php $categories_html = ''; ?>
									<?php $terms = wp_get_post_terms( get_the_id(), 'lsvrnoticecat' ); ?>
									<?php foreach ( $terms as $term ) : ?>
										<?php $categories_html .= '<a href="' . get_term_link( $term ) . '">' . $term->name . '</a>, '; ?>
									<?php endforeach; ?>
									<?php if ( $categories_html !== '' ) : ?>
										<?php $categories_html = rtrim( $categories_html, ', ' ); ?>
										<?php echo sprintf( '%s in %s', get_the_date(), $categories_html ); ?>
									<?php else: ?>
										<?php echo get_the_date(); ?>
									<?php endif; ?>
								<?php else: ?>
									<?php echo get_the_date(); ?>
								<?php endif; ?>
								</span>

								<?php if ( lsvr_get_field( 'notice_detail_author_enable', false, true ) ) : ?>
								<span class="notice-author">
									<?php echo sprintf( 'by %s', get_the_author_posts_link() ); ?>
								</span>
								<?php endif; ?>

							</div>
							<!-- NOTICE DATE : end -->

						</div>
					</div>
					<!-- NOTICE FOOTER : end -->

				</div>
			</article>
			<!-- NOTICE : end -->

		    <?php if ( comments_open() ) : ?>
		    <!-- ARTICLE COMMENTS : begin -->
			<div class="article-comments" id="comments">
				<div class="c-content-box">
				  <?php comments_template(); ?>
				</div>
			</div>
		    <!-- ARTICLE COMMENTS : end -->
		    <?php endif; ?>

		<?php endwhile; ?>
		<?php endif; ?>

	</div>
	<!-- NOTICE DETAIL : end -->

	<?php // PAGINATION
	get_template_part( 'components/pagination' ); ?>

</div>
<!-- PAGE CONTENT : end -->

<?php // PAGE CONTENT AFTER
get_template_part( 'components/page-content-after' ); ?>

<?php get_footer(); ?>
  • Adam Czajczyk

    Hello David,

    I hope you're well today and thank you for your question!

    I took a look at this code but it seems it's quite specific so is there any chance to see it "in action" on your site? Or maybe you could share entire theme and your custom code(s) with me along with a guide on how to set it up?

    One way or another, it would help a lot if I could check that working instead of just a part of the code. I hope that makes sense :slight_smile:

    Let me know please.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello David!

    Thank you for this additional information.

    I could get the plugin that you are using but I don't have access to the theme. I did however checked the your site (the page that you linked to) and I'm a bit confused.

    It looks really nice in mobile views for me. I tested it in browser so maybe it's a matter of a specific device - if so, could you let me know about it? Though I might as well be missing your goal so a rough sketch/mockup/drawing of a desired mobile view could also be very helpful!

    Would like the "title" and "department" and "phone number" and "email address" listed under the image and then the biography to the right of the image. Here's my page content.

    Based solely on the code provided initially and the look on your site, I'd move the description "<section>" outside of the external ".staff-info" dive and then wrapped both image and the ".staff-info" div in an additional wrapper like this (it's just a part of entire code, relevant to the case):

    <div class="staff-member">
    
    					<div class="staff-member-card">
                            <?php if (has_post_thumbnail( $post->ID ) ){
                                    $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail' );
                                    ?>
                                        <img src="<?php echo $image[0]; ?>" align="left" alt="profile image">
                                    <?php
                                } else {
                                    $image = get_template_directory_uri() . "/library/images/no-image.png";
                                    ?>
                                        <img src="<?php echo $image; ?>" alt="profile image">
                                    <?php
                                }
                            ?>
                            <?php //All shortcodes simply return the appropriate strings, so to print them all without the staff loop we have to echo do_shortcode() ?>
                            <div class='staff-info'>
                                        <?php if(do_shortcode('[name]')): ?>
                                            <div class='name' title="Name">
                                                <i class="fa fa-user" aria-hidden="true"></i>
                                                <?php echo do_shortcode('[name]'); ?>
                                            </div>
                                        <?php endif; ?>
                                        <?php if(do_shortcode('[position]')): ?>
                                            <div class='position' title="Position">
                                                <i class="fa fa-briefcase" aria-hidden="true"></i>
                                                <?php echo do_shortcode('[position]'); ?>
                                            </div>
                                        <?php endif; ?>
                                        <?php if(do_shortcode('[email]')): ?>
                                            <div class='email' title="E-mail address">
                                                <i class="fa fa-envelope" aria-hidden="true"></i>
                                                <?php echo do_shortcode('[email]'); ?>
                                            </div>
                                        <?php endif; ?>
                                        <?php if(do_shortcode('[phone_number]')): ?>
                                            <div class='phone' title="Phone number">
                                                <i class="fa fa-phone" aria-hidden="true"></i>
                                                <?php echo do_shortcode('[phone_number]'); ?>
                                            </div>
                                        <?php endif; ?>
                            </div>
    					</div>
    
    					<div class="staff-member-desc">
    						<section class="entry-content cf" itemprop="articleBody">
                                    <?php
                                        $content = get_the_content();
    
                                        if($content){
                                            the_content();
                                        } else {
                                            echo "<p> No biography found. </p>";
                                        }
    
                                    ?>
                             </section>
    					</div>
    
                        </div>

    As a result the ".staff-member" would be a "general" wrapper of member and then you could style:

    - ".staff-member-card" to "float:left"
    - ".staff-member-card img" to "clear:both;"
    - ".staff-member-desc" to "float:right;" or "float:left"

    That simplifed but with this change in template I think you should be able to achieve this. It's possible that some additional styling would be necessary though.

    Please note: make a backup of your current code because I didn't test that change so it would be better if you were able to return to your original one in case that didn't quite work.

    Best regards,
    Adam