Author Topic: Wrong size of images inside the news (Version 4.2.8)  (Read 4701 times)

Offline Bix

  • Full Member
  • *****
  • Posts: 30
  • Karma: +0/-0
Wrong size of images inside the news (Version 4.2.8)
« on: January 20, 2017, 01:32:17 PM »
phpEnter Web Hosting
I'm not sure if that's a problem from the original script: I'm doing a lot of customization changes (also some very bad coding, indeed :-[ ) so maybe I've done something wrong... Anyway:

When I add images inside the news (NOT the main one, the ones added via the WYSIWYG editor), I can define width and height and in the preview of the posting page that works fine...

But after being posted, when opened in the main page (news.php), images appear in their original sizes, limited only by the same margins used by the text.

Can somebody help me find the problem?

Thankyou very much in advance.
:)
« Last Edit: January 22, 2017, 09:55:55 PM by alexa »

Offline goli

  • Full Member
  • *****
  • Posts: 40
  • Karma: +2/-0
Re: Wrong size of images inside the news (Version 4.2.8)
« Reply #1 on: January 20, 2017, 11:00:22 PM »
Try in news.css with this code:

Code: [Select]
.featuredcontainer img{
max-width:300px;
}

Offline Bix

  • Full Member
  • *****
  • Posts: 30
  • Karma: +0/-0
Re: Wrong size of images inside the news (Version 4.2.8)
« Reply #2 on: January 21, 2017, 11:03:43 AM »
Thank you (again) goli but I need to view images in the size I selected throughout the posting procedure, not simply limit their size to a fixed value. Anyway...

###UPDATE###

I noticed that the problem is NOT present in the original version of the script. That means that something in my customization editing is wrong. :(

As I said before, I've done some very bad thing to the code. More specifically, due to the need to put header and main menu of my site above the News page and the same for the footer, I've been forced to do a crappy thing: include pages in a way that, at the end, the results is a page with a structure like this:

<html>
    <head>
        (------------>CODE)
    </head>
    <body>
        (------------>CODE)
        <html>
            <head>
                (------------>CODE)
            </head>
            <body>
                (------------>CODE)
            </body>
        </html>
        (------------>CODE)
    </body>
</html>


I know: that's horrible. But that was the only way to make everything work... Until now!


This is an example of a resulting page code (news.php):

Code: [Select]
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="../scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../scripts/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Icons -->
    <link href="../scripts/icons/general/stylesheets/general_foundicons.css" media="screen" rel="stylesheet" type="text/css" /> 
    <link href="../scripts/icons/social/stylesheets/social_foundicons.css" media="screen" rel="stylesheet" type="text/css" />
    <!--[if lt IE 8]>
        <link href="scripts/icons/general/stylesheets/general_foundicons_ie7.css" media="screen" rel="stylesheet" type="text/css" />
        <link href="scripts/icons/social/stylesheets/social_foundicons_ie7.css" media="screen" rel="stylesheet" type="text/css" />
    <![endif]-->
    <link rel="stylesheet" href="../scripts/fontawesome/css/font-awesome.min.css">
    <!--[if IE 7]>
        <link rel="stylesheet" href="scripts/fontawesome/css/font-awesome-ie7.min.css">
    <![endif]-->

    <link href="http://fonts.googleapis.com/css?family=Syncopate" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Abel" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">

    <link href="../styles/custom.css" rel="stylesheet" type="text/css" />

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->

</head>
<body id="pageBody">

<img class="top_image-replacer" src="../images/10x10px.jpg"/>
<!-- <img class="top_image" src="../images/top_image-panorama.jpg" alt=""/> -->

<div id="superHeader">

  <div class="container">
    <div class="divPanel notop nobottom">

<div class="row-fluid">
        <div class="span9">
            <a href="/index.php" id="divSiteTitle">&nbsp;Ginger GROUP</a>
        </div>
<div class="social_bookmarks">                   
<!--       <a href="#"><div class="icon_twitter"></div></a>     -->
<!-- <a href="#"><div class="icon_facebook"></div></a>    -->
<!-- <a href="#"><div class="icon_google"></div></a>       -->
<!-- <a href="#"><div class="icon_pinterest"></div></a>     -->
</div>             
</div>
               
</div>                           
</div>             
               
</div>

<div id="divBoxed" class="container">

<!--    <div class="transparent-bg" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;zoom: 1;"></div> -->

    <div class="divPanel notop nobottom">
           
              <!--Edit Site Name and Slogan here-->
<!--
<div id="divLogo">
<div class="row-fluid">
       <div class="span12">
            <a href="/index.php" id="divSiteTitle">Ginger GROUP</a><br />
            <a href="/index.php" id="divTagLine"></a>
       </div>
   </div>
</div>
-->               
            <div class="row-fluid">
                <div class="span12">
                    <div class="centered_menu">                     
                    <!--Edit Navigation Menu here-->
<div class="navbar">

<button type="button" class="btn btn-navbar-highlight btn-large btn-primary" data-toggle="collapse" data-target=".nav-collapse">
    NAVIGAZIONE <span class="icon-chevron-down icon-white"></span></button>

    <div class="nav-collapse collapse">
    <ul class="nav nav-pills ddmenu">
       
<li class="dropdown">
            <a href="/index.php" class="dropdown-toggle">HOME  <!-- <b class="caret"> --> </b></a>
            <!-- <ul class="dropdown-menu">
<li class="dropdown">
                  <a href="index-alt.php" class="dropdown-toggle">Home 2</a>                                           
                  </li>                                       
</ul> -->
</li>

          <li class="dropdown">
<a href="/group.php" class="dropdown-toggle">Ginger</a>
  </li>

  <li class="dropdown">
<a href="/studio.php" class="dropdown-toggle">IL tempio</a>
  </li>  
          <li class="dropdown">
<a href="/transcriptor.php" class="dropdown-toggle">transcriptor</a>
  </li>
          <li class="dropdown">
<a href="/gallery.php" class="dropdown-toggle">GALLERIE <b class="caret"></b></a>
<ul class="dropdown-menu">                                       
<li><a href="/galleria-villa.php">Villa</a></li>
                  <li><a href="/galleria-studio.php">Studio</a></li>
                  <li><a href="/galleria-transcriptor.php">transcriptor</a></li>
  <!-- <li><a href="portfolio-item.php">Portfolio Item</a></li> -->
  <!-- <li><a href="video-page.php">Video Page</a></li> -->
</ul>
</li>
           
           <!-- <li><a href="page.php">FAQ </a></li> -->
           
<li><a href="/staff.php">STAFF</a></li>
           <li><a href="/callus.php">CONTATTI</a></li>
           
</ul>
</div>
   
</div>                                   
                  </div>
            </div>
            </div>
    </div>

    <div class="contentArea">
        <div notop page-content">   
            <div class="row-fluid">
                <div class="span12" id="divMain">
               
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="cache" />
<meta name="ROBOTS" content="All" />
<meta name="keywords" content="Ginger group, news, news, notizie, musica, studio, registrazione, produzione, tecnologia, discografia" />
<meta name="description" content="Inserito alle 8:31 del 17/01/2017" /> 
<link href="themes/classic/styles/images/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<link rel="stylesheet" type="text/css" href="themes/classic/styles/basic.css" />
<link rel="stylesheet" type="text/css" href="themes/classic/styles/news.css" />
<link href="themes/classic/styles/css_pirobox/style_1/style.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/atom+xml" title="Ginger Group - RSS" href="/news/rss.php" />
<title>Controllo orario - Ginger Group</title>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="scripts/pirobox_extended.js"></script>
<script type="text/javascript">

$(document).ready(function(){$("[id^=rating_]").hover(function(){rid=$(this).attr("id").split("_")[1];$("#rating_"+rid).children("[class^=star_]").children('img').hover(function(){
$("#rating_"+rid).children("[class^=star_]").children('img').removeClass("hover");var hovered=$(this).parent().attr("class").split("_")[1];while(hovered>0){
$("#rating_"+rid).children(".star_"+hovered).children('img').addClass("hover");hovered--;}});});
$("[id^=rating_]").children("[class^=star_]").click(function(){var current_star=$(this).attr("class").split("_")[1];var rid=$(this).parent().attr("id").split("_")[1];$('#rating_'+rid).load('send.php',{rating:current_star,id:rid});});});
$(document).ready(function() {
$().piroBox_ext({
piro_speed : 700,
bg_alpha : 0.5,
piro_scroll : true
});
});
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

</script>

<meta property="og:image" content="/news/maxthumb/2017123331.jpg" />
 
</head>
<body>
<div id="content">
<div id="header">

<div id="divHeaderLine1"><a href="/news">Ginger news</a></div>
<div id="search">
<div id="sestext">
<form action="/news/search.php" method="GET"><input
id="intext" class="txt" type="text" name="id" placeholder="Cerca nelle notizie" />
<button class="b-search" value="go" type="submit"></button>
</form>
</div>
</div>
</div>

<div id="menu">
<ul id="coolMenu">
<li><a href="/news"><img src="themes/classic/styles/images/homes.png" width="18" height="16" border="0" /></a></li>
<li><a href="categories.php?id=1">News</a>
<ul>
</ul>
</li>
<li><a href="categories.php?id=2">Tecnologia</a>
<ul>
</ul>
</li>
<li><a href="categories.php?id=3">Works</a>
<ul>
</ul>
</li>
<li>
</ul>
</div>
<div>
<ul id="sectabs">
<li><a href="browse.php">Articoli per Categoria</a></li>
<li><a href="toprated.php">Articoli Pi&ugrave; Votati</a></li>
<li><a href="archive.php">[Archivio]</a></li>
<li><a href="gallery.php">Galleria</a></li>
<li><a href="video.php">Video</a></li>
<li><a href="members.php">Membri</a></li>
<li><a href="rsscat.php">Feed RSS</a></li>
<li><a href="link.php">Invia News</a></li>
</ul>

</div><div id="blanks">
<div id="leftblock">
<div class="featuredcontainer">
<span class="ha4">Controllo orario</span>
<div id="brief">Inserito alle 8:31 del 17/01/2017</div><div class="thumb-image-wrapper"><a href="uploads/2017123331.jpg" rel="gallery"  class="pirobox_gall" title="Controllo orario">
<img src="maxthumb/2017123331.jpg" alt="Controllo orario" width="300px" height="250px" /></a>
<a href="profile.php?id=1"><img src="minthumb/2017120742.jpg" alt="Fabrizio" width="25px" height="25px" /></a>
<div id="linker">
<i><a href="profile.php?id=1">Fabrizio</a> il martedì, 17 gennaio 2017<br />recensioni [1]</i>
<a href="categories.php?id=2" title="Tecnologia">Tecnologia [7]</a>
</div>
<p>Inserito alle 8:33 del 17/01/2017</p>
<div>
<div class="thumb-image-wrapper" style="float:left;line-height:30px;"><a href="uploads/2017120742.jpg" title="Fabrizio"></a></div>
<div style="clear:both"></div>
</div>
</div>
</div>
<div id="icons">
<span id="rating_28">
<span class="star_1"><img src="themes/classic/styles/images/star_blank.png" width="16px" height="16px" alt=""  /></span>
<span class="star_2"><img src="themes/classic/styles/images/star_blank.png" width="16px" height="16px" alt=""  /></span>
<span class="star_3"><img src="themes/classic/styles/images/star_blank.png" width="16px" height="16px" alt=""  /></span>
<span class="star_4"><img src="themes/classic/styles/images/star_blank.png" width="16px" height="16px" alt=""  /></span>
<span class="star_5"><img src="themes/classic/styles/images/star_blank.png" width="16px" height="16px" alt=""  /></span>
</span>
&nbsp;&nbsp;
<a href="/news/print.php?name=2017123125" title="Stampa questa pagina" target="_blank"><img src="/news/themes/classic/styles/images/print.png" border="0" width="16px" height="16px" /></a>
&nbsp;&nbsp;<a href="tella.php?id=/news/news.php?name=2017123125" title="Invia questa notizia a un amico" rel="content-311-261" class="pirobox_gall1"><img src="themes/classic/styles/images/send.png" border="0" width="16px" height="16px"></a>
<a href="editnews.php?id=28">
&nbsp;&nbsp;<img src="themes/classic/styles/images/editnews.png" title="Edit" border="0" width="16px" height="16px" /></a>&nbsp;&nbsp;<g:plusone size="small"></g:plusone>
</div>
<div id="blockhead">&nbsp;&nbsp;Commenti</div>
<div id="comments">
<div class="featurecat">
<div class="thumb-image-wrapper">
<a href="uploads/2017120742.jpg" rel="gallery" class="pirobox_gall" title="Fabrizio">
<img src="minthumb/2017120742.jpg" alt="Fabrizio" width="25x" height="25px" border="0"></a>
</div>
<a href="uploads/2017120742.jpg" rel="gallery" class="pirobox_gall" title="Fabrizio"><span class="haty">Fabrizio</span></a>
Commentato alle 8:38
<br />
<span class="smally">
<span class="time">&nbsp;</span>martedì, 17 gennaio 2017&nbsp;&nbsp;
<span class="docy">&nbsp;</span>4 giorni&nbsp;fa&nbsp;&nbsp;
</span>
</div>
</div>
<a name="section"></a>
<div>
<h3 class="listingTitleSec"></h3>
<a href="signin.php?return=2017123125">&#187; Devi effettuare il login per poter commentare.</a>
</div>
</div>
<div id="rightblock">
<div id="blockd">
<div id="blockhead">Articoli correlati</div>
<div id="rfeat"><a href="news.php?name=2017012537"><span class="haty">I libri colorati</span></a></div>
Il formato CD nacque nei primi anni 80 da una ricarca di Sony e Philips come supporto digitale per l'audio.
Il supporto per&ograve; si prestava ad altre applicazioni oltre a....
</div>
</div>
</div><div class="foclear"></div>
<div id="footer">
<!--
<a href="/news">Home</a> |
<a href="/news/signup.php">Sign Up</a> |
<a href="/news/link.php">Sign In</a> |
<a href="/news">CopyRight Ginger Group news</a><br /><br />
<a href="/news/privacy.php">Privacy</a> |
<a href="/news/aboutus.php">About Us</a> |
<a href="/news/terms.php">Terms of Use</a> |
<a href="/news/archive.php">Archive</a>
-->
</div>
</div>
</body>
</html> 
  </div>
            </div>
        </div>
    </div>
</div>
   
    <!--Edit Footer here-->
 <div id="divFooter" class="footerArea shadow">

        <div class="divPanelFooter">

            <div class="row-fluid">
                <div class="span3" id="footerArea1">
               
                    <h3>Ginger GROUP</h3>

                    <p><a href="/studio.php" title="">IL tempio  Studio</a><br>
                    <a href="/transcriptor.php" title="">transcriptor </a><br>
                      <a href="#" title="">Ginger Tunes</a><br>
                      <a href="#" title="">Ginger Publishing</a><br>
                      <a href="#" title="">Ginger Educational</a><br>
                      <a href="#" title="">Ginger Tech</a><br />
                      <br>
                    </p>

                </div>
                <div class="span3" id="footerArea2">

                    <h3>&nbsp;</h3>
                </div>
                <div class="span3" id="footerArea3">

                  <h3>&nbsp;</h3>

                </div>
                <div class="span3" id="footerArea4">

                    <h3>Contatti</h3>
                    <ul id="contact-info">
                    <li>
                        <i class="general foundicon-mail icon"></i>
                        <span class="field">Email:</span>
                        <br />
                        <a href="&#109;&#x61;&#105;&#x6c;&#116;&#111;&#x3a;&#x69;&#x6e;&#x66;&#111;&#x40;&#109;&#105;&#114;&#x61;&#99;&#x6c;&#101;&#103;&#x72;&#x6f;&#117;&#x70;&#x2e;&#99;&#104;"><img src="/images/e-infooter.png" width="133" height="28"  alt=""/></a>
                    </li>
                    <li>
                        <i class="general foundicon-home icon" style="margin-bottom:50px"></i>
                        <span class="field">Sede principale:</span>
                        <br />
                      Ginger Group</li>
                    </ul>

                </div>
            </div>

            <br /><br />
            <div class="row-fluid">
            <div class="span12">
            <p class="copyright">
            Copyright © 2015 Ginger Group Sagl. All Rights Reserved.
            </p>

            <div class="social_bookmarks">                   
                             
            </div>
            </div>
            </div>

        </div>
    </div>
</div>   
<br /><br /><br />

<script src="../scripts/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../scripts/default.js" type="text/javascript"></script>

</body>
</html>


I really don't know how to put all the <head>, <body>, etc. parts together without causing pages to stop working...

HEEEEEELP! :'(

Offline goli

  • Full Member
  • *****
  • Posts: 40
  • Karma: +2/-0
Re: Wrong size of images inside the news (Version 4.2.8)
« Reply #3 on: January 22, 2017, 01:22:02 PM »
Something is wrong with some of your css files, not with your html.

Offline Bix

  • Full Member
  • *****
  • Posts: 30
  • Karma: +0/-0
Re: Wrong size of images inside the news (Version 4.2.8)
« Reply #4 on: January 22, 2017, 05:55:42 PM »
Something is wrong with some of your css files, not with your html.

That's possible, but... Where? :-[

In addition, a (very) strange thing is that images seem to be perfectly defined via the <img> tag.

<img style="float: left; margin: 2px 8px;" src="http://.../43222285.jpg" alt="libro" width="359" height="200" />

I've looked for css ables to override that but I only found a couple of "width:auto", "height:auto" and "max-width:100%" declarations (plus a IE specific "width:auto\9").

I really don't understand where the problem can be...
 >:(

Offline goli

  • Full Member
  • *****
  • Posts: 40
  • Karma: +2/-0
Re: Wrong size of images inside the news (Version 4.2.8)
« Reply #5 on: January 22, 2017, 06:21:04 PM »
I think problem is in
Code: [Select]
width:100%

Offline Bix

  • Full Member
  • *****
  • Posts: 30
  • Karma: +0/-0
Re: Wrong size of images inside the news (Version 4.2.8)
« Reply #6 on: January 22, 2017, 06:26:51 PM »
I think problem is in
Code: [Select]
width:100%

Ehm... Where have you found that?  :o

Offline goli

  • Full Member
  • *****
  • Posts: 40
  • Karma: +2/-0
Re: Wrong size of images inside the news (Version 4.2.8)
« Reply #7 on: January 22, 2017, 09:53:33 PM »
If you have images in original sizes, somewhere in css files must be img{width:100%;height:auto}

Offline Bix

  • Full Member
  • *****
  • Posts: 30
  • Karma: +0/-0
Re: Wrong size of images inside the news (Version 4.2.8)
« Reply #8 on: January 23, 2017, 12:57:29 AM »
If you have images in original sizes, somewhere in css files must be img{width:100%;height:auto}

No. Nowhere. I've checked and rechecked. Nothing... :(

Offline Bix

  • Full Member
  • *****
  • Posts: 30
  • Karma: +0/-0
Re: Wrong size of images inside the news (Version 4.2.8)
« Reply #9 on: January 23, 2017, 02:38:53 AM »
You know what? I think I'll follow your first suggestion: put that limit of 300px to the container. That's not what I really need, but it works and that's definitely better than nothing.

Thank you very much for your patience, goli!!! :)

Offline Bix

  • Full Member
  • *****
  • Posts: 30
  • Karma: +0/-0
Re: Wrong size of images inside the news (Version 4.2.8)
« Reply #10 on: January 23, 2017, 09:57:53 AM »
Ehm.... I'm here again....  :-[


After some test, I noticed that the worse of the (obvious) side effects of the "max-width:300px;" solution will be:
  • force the shrinking of any horizontal image larger than 300px (preventing the ability to put any full-page horizontal banner-like image inside my news);
  • force ANY square or vertical image to that fixed 300 pixels width size;
This can be very annoying..........  :-\


I also noticed that there are 4 elements (3 stylesheets + the <img> tag attributes) affecting these specific images, in the following cascading order…

The first, into the bootstrap.min.css:
Code: [Select]
img{width:auto\9;height:auto;max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}

The second, into the custom.css file of the editable bootstrap template:
Code: [Select]
img {max-width:100%;height:auto;width:auto;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}

The third, inside phpEnter's news.css file:
Code: [Select]
.featuredcontainer img {max-width:300px; float: left; margin-top: 3px; margin-right: 10px; background: #FFF; border: 1px solid #CCC; padding: 2px; }

And, finally, the attributes of the specific images, assigned from the WYSIWYG editor inside phpEnter posting page (post.php):
Code: [Select]
<img style="float: left; margin: 2px 8px;" src="http://image.ch/one.jpg" alt=“” width="359" height="200" />


Now:
  • I simply can't edit the two first css without affecting the appearance of my whole site.
  • A possible way, as suggested, is to edit the third one: I'm asking myself if there isn't a better solution, here.
  • The best way would (perhaps) be to insert a style:...!important parameter (or something like that) directly inside the image itself, causing the overwriting of all previous styles, but all that parameters are set from the editor and I don't know if/how it's possible to force editor doing so.

Maybe that helps... If you or someone finds another solution, I'll appreciate. ;)
« Last Edit: January 23, 2017, 10:01:12 AM by Bix »