Center Align Featured Images

Homepage › Community Forums › Epik Theme Support › Center Align Featured Images

Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 23, 2013 at 3:01 am #4127
    Dinesh Sharma
    Customer

      Hi Wes,

      How can I center align featured images on blog page? Otherwise sometime the excerpts text just gets mangled in little space between image and content box.

      You can see the exact problem here.

      http://www.dscentral.in/page/2/

      Thanks,

      Dinesh

       

      April 24, 2013 at 12:28 am #4148
      Wes
      Moderator

        I don’t see a way to center it based on the way the featured image is added in with Genesis….you could add clear: both; to the “p” tag inside of the entry content like this –

        `.entry-content p {
        clear: both;
        }`

        That will keep the text on its own line. It doesn’t center it, but thats about the only thing I can think of.

        April 24, 2013 at 7:00 am #4159
        Dinesh Sharma
        Customer

          Alright that is also a possible solution but I would have loved to center align images. I will see if I can get some support from Genesis guys, so that it is possible to manipulate featured images using CSS.

          If I find a better solution I will post it here.

          Thanks,

          Dinesh Sharma

          April 24, 2013 at 2:38 pm #4174
          hotsaucedaily
          Customer

            @Dinesh – all of your featured images are of different sizes. They should be the exact same size for each post, and based on your media settings.

            April 25, 2013 at 12:17 am #4237
            Dinesh Sharma
            Customer

              Yes you are right. That is one thing I am working on.

              But still even if I make them of same size (a smaller size) I would like to center align them. And if I get to center align them above post text, then may be I can work with any image size.

              The problem is that Genesis does not add images in a separate DIV. Which makes difficult to manipulate them from CSS.

              I have found a way to add a image and content in a separate DIV now using following Genesis hook, and now able to center align images, apply borders etc. But there is some problem with this code. I am not able to see more than two posts with this hook active. Trying to figure out that.

              <?php
              /** Change the featured image */
              remove_action( ‘genesis_post_content’, ‘genesis_do_post_image’ );
              add_action(‘genesis_post_content’,’ibfy_post_image’, 0) ;
              function ibfy_post_image() {
              if (  ! is_singular() ) {
              $img = genesis_get_image( array( ‘format’ => ‘html’, ‘size’ => genesis_get_option( ‘image_size’ ), ‘attr’ => array( ‘class’ => ‘post-image’ ) ) );
              printf( ‘<div class=”featured-image”><a href=”%s” title=”%s”>%s</a></div>’, get_permalink(), the_title_attribute( ‘echo=0’ ), $img );
              echo genesis_do_post_content();
              }
              }
              ?>

              Anyway Thanks for the reply.

              April 26, 2013 at 2:35 pm #4328
              kronos
              Customer

                I had a similar issue with another Genesis theme, but decided to just make all of my images the same size.  It’s the Genesis Framework that controls this functionality, so you could probably ask someone over at the StudioPress community forums if they have ever done something like this.

                April 27, 2013 at 7:46 am #4383
                Dinesh Sharma
                Customer

                  @kronos – well I have submitted my request in studiopress community forums also.

                  BTW, I have now found a solution by wrapping featured image in a div.
                  I had to add DIV in function genesis_do_post_image() { } in post.php as shown below:


                  function genesis_do_post_image() {

                  if ( ! is_singular() && genesis_get_option( 'content_archive_thumbnail' ) ) {
                  $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );

                  if( ! empty( $img ) )
                  printf( '<div class="featured-image">%s</div>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
                  }
                  }

                  Following is the CSS:`
                  .featured-image {
                  text-align: center;
                  }

                  .featured-image img {
                  margin: 0;
                  }
                  `

                  I was able to do it using Genesis Hooks also except I didn’t see post excerpt in first post. So I just added the required code in Genesis itself. But I guess it will get overwritten with Genesis update. Well until then it good for me.

                  You can have a look here.
                  http://www.dscentral.in/page/2/

                  Thanks,

                  Dinesh Sharma

                  April 28, 2013 at 7:05 am #4390
                  Dinesh Sharma
                  Customer

                    I have now documented it, just in case someone has same requirements.

                    Center Align Featured Images in Genesis

                    Thanks,

                    Dinesh Sharma

                  • Author
                    Posts
                  Viewing 8 posts - 1 through 8 (of 8 total)
                  • You must be logged in to reply to this topic.