Large images are not resized for small screens.

Discussion in 'Article Script / Article Directory Script' started by olairmarcos, Feb 22, 2016.

  1. olairmarcos

    olairmarcos Member

    Subrion 405
    Articles Script 4.01
    Template Kickstart 1.0.3

    Large images in the text, are not resized for small screens.
    When we insert large images within the text, and the size of the preview window. Images are not automatically resized to the space when we visualize the article.

    [​IMG]

    On mobile devices the images also are not resized for the device screen size, remaining in the original size.

    [​IMG]

    Thanks for help

    Attached Files:

  2. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hey @olairmarcos !

    As you probably know, we use Bootstrap 3.x in our templates. In this version, Bootstrap developers dropped support for all images to be responsive. Here is an original quote:
    What we can suggest:
    On View Article page, we have a class that wraps all content, related to article - .ia-item-view
    You can add these styles to make all images in article to be responsive:
    Code (CSS):
    .ia-item-view img {
        display: block;
        max-width: 100%;
        height: auto;
    }
    This should solve your problem.

    Thanks!
    olairmarcos, Andrew_G. and Dayir_A. like this.
  3. olairmarcos

    olairmarcos Member

    I tried a number of ways, but does not work correctly, the image is not resized correctly, within the space.
    The image is scaled only in width, height size remains normal (large).
    The problem appears only for large images inserted into the text using the graphic editor.
    Thank you for your help.
  4. olairmarcos

    olairmarcos Member

    It works perfectly with the following CSS

    Code (CSS):
    .ia-item-view img {
        display: block;
        max-width: 100%;
        height: auto !important;
    }
    Last edited: Mar 2, 2016
    Gleb_S., Dayir_A. and Greg like this.
  5. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Ahh I see.. It happens because Editor adds explicit height and width for the images. Your solution is perfect!
  6. olairmarcos

    olairmarcos Member

    The example above works well for article script text with large images. You will not adjust the large images uploaded to the blog plugin. So I decided to apply the style directly img class, so all images will fit the available space within the template. Is there any objection to that? Thanks.

    Code (Text):
    img {
        display: block;
        max-width: 100%;
        height: auto !important;
    }
  7. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hi @olairmarcos !

    I think it will be better to add specificity here. Eg, only make images responsive for blog view page. Something like:
    Code (CSS):
    .blog-view-page img { ... }
    Thanks!
    olairmarcos and Andrew_G. like this.
  8. olairmarcos

    olairmarcos Member

    Thanks for the tip
  9. Pylo

    Pylo New Member

    May I ask what the actual name for that class would be, for blog page that is?
    I'm also using Kickstarter and sub 4.0.5.


    thnx
  10. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hi @Pylo !

    You will need to add new class and also some html tags to view blog post page.
    In file [root]\plugins\personal_blog\templates\front\index.tpl find this code:
    HTML:

    {if $blog_entry.image}
        {printImage imgfile=$blog_entry.image fullimage=true title=$blog_entry.title|escape:'html' class='img-responsive m-b'}
    {/if}

    {$blog_entry.body}
     
    and change to:
    HTML:

    <div class="blog-view-content">
    {if $blog_entry.image}
        {printImage imgfile=$blog_entry.image fullimage=true title=$blog_entry.title|escape:'html' class='img-responsive m-b'}
    {/if}

    {$blog_entry.body}
    </div>
     
    Then in user-style.css of your template add:
    Code (CSS):

    .blog-view-content img {
      display: block;
      max-width: 100%;
      height: auto !important;
    }
     
    Thanks!
    Andrew_G. likes this.
  11. Pylo

    Pylo New Member

    Thank you so much for this info.
    This opened many doors for me..


    :)
    Gleb_S. likes this.
  12. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    You are always welcome here!

Share This Page