php – setting text equal to the height of an image to the left of it in wordpress if the height of the image changes

Question

I’ve gone through a few informative posts on stack overflow but haven’t found anything that works with my situation so far unfortunately and it’s wordpress specific so I thought I’d try and ask here.

I need the text to the right of an image to match the height of that image. In my project I’m using advanced custom fields. The image gets resized to 500px width and the height adjusts so the image scales and maintains it’s original proportions. This is done through a custom image size coded into the functions.php file. I’ve gone through a solution that adjusts the height using added jquery but I’m not fluent in jquery and I’m not sure how to identify the image in the jquery code because mine is coded using php and wp_get_attachment_image and in the solution I was looking at the image is coded using just the img html tag.

Alternatively there was also a solution that suggested using flex-grow but I haven’t had luck with that because the size of the div around the image and the text would have to change height based on the image height for it to work which isn’t what’s happening for me right now.

Here’s the functions.php code with the custom image size:

if ( function_exists( 'add_image_size' ) ) { 
    add_image_size( 'cover-img', 500, false ); //(scaled)
}

Here’s the content.php code for the post:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <div class="entry-content container" id="standard-post">

        <!--cover image on the left-->
        <div class="cover" id="heightmatching">
            <?php 
            $image = get_field('cover_image');
            $size="cover-img"; // (thumbnail, medium, large, full or custom size)
            if( $image ) {
                echo wp_get_attachment_image( $image, $size );
            }
            ?>
        </div>

        <!--all the text on the right-->
        <div class="post-text">
            <!-- blog post publication date -->
            <h2 class="post-date">
                Published <?php the_date(); ?>
            </h2>

            <!-- blockquote -->
            <h4 class="blockquote">
                <?php the_field('quote') ?>
            </h4>

            <!-- review -->
            <div class="review">
                <p>
                    <?php the_field('review') ?>
                </p>
            </div>

            <!-- publisher information-->
            <div class="publisher">
                <h3>
                    <?php the_field('publisher') ?>
                </h3>
            </div>

            <!--links and alt designs drop down aligned at the bottom of the post -->
            <div class="post-footer">
                <!-- links -->
                <div class="links">
                    <!-- goodreads link -->
                    <?php 
                    $link = get_field('goodreads_link');
                    if( $link ): ?>
                        <a class="button" href="<?php echo esc_url( $link ); ?>">Goodreads</a>
                    <?php endif; ?>
                    <!-- indiebound link -->
                    <?php 
                    $link = get_field('indiebound_link');
                    if( $link ): ?>
                        <a class="button" href="<?php echo esc_url( $link ); ?>">Indiebound</a>
                    <?php endif; ?>
                </div>
                <div class="altdesigns">
                    <!-- right side of links alt designs -->
                    <?php if( get_field('alt_designs') ): ?>
                    <!-- title 'alt designs' with arrow drop down to the right of the title-->
                    <a href="#" class="altdesigns-text">
                        Alt Designs
                    </a>
                    <?php endif ?>
                </div>
            </div>
        </div>
    </div><!-- .entry-content -->
</article><!-- #post-<?php the_ID(); ?> -->

Here’s the jquery script I repurposed and have been tinkering with:

$("#standard-post").find('.post-text').css("height", $("image").outerHeight());

var $img = $("#standard-post").find('.post-text');
$img.on('load', function() {
   $("#heightmatching").find('.post-text').css("height", $("image").outerHeight());
});

window.onresize = function() {
   $("#heightmatching").find('.post-text').css("height", $("image").outerHeight()); 
}

Sorry if my post here isn’t formatted correctly. I’m probably missing something very basic. Would love to hear any suggestions.

0
Maddy 1 month 2021-08-18T15:29:06-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse