Image with caption didn't resize (bug?)

Discussion in 'Feed Module Discussion' started by esafaree1, Jul 3, 2015.

  1. esafaree1

    esafaree1 New Member

    Joined:
    Jun 29, 2015
    Messages:
    23
    Likes Received:
    3
    I just notice that when a post inside my feed have image with caption, that particular image wont resize to fit the screen unlike any image without caption. Could this be a bug? or is it related to my own feed? @appyet

    Screenshot_2015-07-04-06-41.jpg Screenshot_2015-07-04-06-25-17.png
     
    #1
    Last edited: Jul 5, 2015
  2. appyet

    appyet Support Team Member
    Staff Member

    Joined:
    Feb 2, 2015
    Messages:
    1,286
    Likes Received:
    443
    What is your feed URL?
     
    #2
  3. Jesús Romero

    Jesús Romero New Member

    Joined:
    May 14, 2015
    Messages:
    4
    Likes Received:
    1
    #3
  4. joseph raphael

    joseph raphael Well-Known Member

    Joined:
    Feb 3, 2015
    Messages:
    776
    Likes Received:
    312
    Try to force resizing of all images using css code

    Code:
    <style type="text/css">
    .appyet_article img {max-width:100%; width:100%; height:auto; margin:auto;}
    </style>
     
    #4
  5. esafaree1

    esafaree1 New Member

    Joined:
    Jun 29, 2015
    Messages:
    23
    Likes Received:
    3
    here is the affected feed (deleted)
     
    #5
    Last edited: Jul 9, 2015
  6. esafaree1

    esafaree1 New Member

    Joined:
    Jun 29, 2015
    Messages:
    23
    Likes Received:
    3
    Tried this. Still the same
     
    #6
  7. appyet

    appyet Support Team Member
    Staff Member

    Joined:
    Feb 2, 2015
    Messages:
    1,286
    Likes Received:
    443
    Following are existing styles, applied by AppYet before extra header is appiled.
    Code:
    img {display:block; width: auto !important; height: auto !important; max-width: 100%; padding:0px !important; margin-left:0px !important; margin-right:0px !important; margin-top:0px !important; margin-bottom:0px !important}
    
     
    #7
  8. joseph raphael

    joseph raphael Well-Known Member

    Joined:
    Feb 3, 2015
    Messages:
    776
    Likes Received:
    312
    Then why it doesn't apply on his feed's images ?
     
    #8
  9. appyet

    appyet Support Team Member
    Staff Member

    Joined:
    Feb 2, 2015
    Messages:
    1,286
    Likes Received:
    443
    there must be something new in RSS content that the existing CSS aren't able to resize it. will have to look into it
     
    #9
  10. joseph raphael

    joseph raphael Well-Known Member

    Joined:
    Feb 3, 2015
    Messages:
    776
    Likes Received:
    312
    I figure out the problem, it's on his RSS code. The code force a specific width for the div that contains the image

    Code:
    <div id="attachment_11034" style="width: 769px" class="wp-caption aligncenter"><a href="http://munsyeed.com/malay/2015/04/gambar-konsert-opick-live-acoustic-di-dewan-auditorium-mbsa/konsertopick-fedtri-yahya/"><img class="wp-image-11034" src="http://i0.wp.com/munsyeed.com/malay/wp-content/uploads/2015/04/konsertopick-fedtri-yahya.jpg?resize=759%2C502" alt="konsertopick fedtri yahya" data-recalc-dims="1"></a>
    <p class="wp-caption-text">Ahmad Fedtri Yahya selaku pengacara konsert.</p>
    </div>
    
    So, this is not a general problem, it's just bad coding.
     
    #10
    appyet likes this.
  11. esafaree1

    esafaree1 New Member

    Joined:
    Jun 29, 2015
    Messages:
    23
    Likes Received:
    3
    ahah! That could be it. Let me check and confirm this first.
     
    #11
  12. joseph raphael

    joseph raphael Well-Known Member

    Joined:
    Feb 3, 2015
    Messages:
    776
    Likes Received:
    312
    Remove the <div></div> that contains the images along with the <a>link</a> too.

    AppYet already opens the images in a native photo viewer.
     
    #12
  13. appyet

    appyet Support Team Member
    Staff Member

    Joined:
    Feb 2, 2015
    Messages:
    1,286
    Likes Received:
    443
    Sin
    Is this a WordPress auto generated RSS?
     
    #13
  14. esafaree1

    esafaree1 New Member

    Joined:
    Jun 29, 2015
    Messages:
    23
    Likes Received:
    3
    Yes. Then I send it to Feedburner. But the problem still exist even when I use the Wordpress auto generated rss.
     
    #14
  15. esafaree1

    esafaree1 New Member

    Joined:
    Jun 29, 2015
    Messages:
    23
    Likes Received:
    3
    There's no <div> at my end.

    This the code for image with caption on my wordpress post
    Code:
    [caption id="attachment_11034" align="aligncenter" width="1000"]<a href="http://munsyeed.com/malay/2015/04/gambar-konsert-opick-live-acoustic-di-dewan-auditorium-mbsa/konsertopick-fedtri-yahya/"><img class="wp-image-11034 size-full" src="http://munsyeed.com/malay/wp-content/uploads/2015/04/konsertopick-fedtri-yahya.jpg" alt="konsertopick fedtri yahya" width="1000" height="662" /></a> Ahmad Fedtri Yahya selaku pengacara konsert.[/caption]
    And this is the code for image without caption
    Code:
    <a href="http://munsyeed.com/malay/2015/04/gambar-konsert-opick-live-acoustic-di-dewan-auditorium-mbsa/konsertopick-2/"><img class="aligncenter wp-image-11010" src="http://munsyeed.com/malay/wp-content/uploads/2015/04/konsertopick-2.jpg" alt="konsertopick (2)" width="759" height="503" /></a>
    
    still wondering what is the real problem.
     
    #15
  16. joseph raphael

    joseph raphael Well-Known Member

    Joined:
    Feb 3, 2015
    Messages:
    776
    Likes Received:
    312
    Provide an xml version of your RSS feed and I will help you.
     
    #16
    mn rd and appyet like this.
  17. esafaree1

    esafaree1 New Member

    Joined:
    Jun 29, 2015
    Messages:
    23
    Likes Received:
    3
    here the xml file
     

    Attached Files:

    • xml.txt
      File size:
      116.3 KB
      Views:
      7
    #17
  18. joseph raphael

    joseph raphael Well-Known Member

    Joined:
    Feb 3, 2015
    Messages:
    776
    Likes Received:
    312
    it works good, check the code here: http://jsfiddle.net/5am30c5a/2/

    I removed the links around the <img /> tags using jQuery and added default appyet CSS code, all images are resized correctly.
     
    #18
    mn rd and appyet like this.
  19. esafaree1

    esafaree1 New Member

    Joined:
    Jun 29, 2015
    Messages:
    23
    Likes Received:
    3
    so what should I do?
     
    #19
  20. esafaree1

    esafaree1 New Member

    Joined:
    Jun 29, 2015
    Messages:
    23
    Likes Received:
    3
    @joseph raphael You use an article that I didn't put caption on any of it images. That post didn't have such problem.
     
    #20

Share This Page