XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Community Support forums / 
  3. 2.5.x Support 
  4.  / Automatic image width (for mobile devices)
Register
11
Hadesteam
Re: Automatic image width (for mobile devices)

  • 2017/4/25 16:10

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


Thanks for the help, I added a class to all the pictures in the articles. Checking if everything works is wrong with displaying the same images, I noticed this before when I moved the content of the icontent module to the news. Well, the pictures are separated by a space and before the theme change, they are displayed side by side and now one under another.

For example:
http://www.kulturystyka.org.pl/modules/icontent/index.php?page=41
http://www.kulturystyka.org.pl/modules/news/article.php?storyid=436

Is any method in css to repair ? Regards
12
aerograf
Re: Automatic image width (for mobile devices)

  • 2017/4/25 17:07

  • aerograf

  • Quite a regular

  • Posts: 214

  • Since: 2017/1/7 1


Images in a div block?
At myself I have made so:
img.big {cursor: se-resize; max-width: 150px; padding: 5px;}
img.big:hover {max-width: none; padding: 5px;}
13
Hadesteam
Re: Automatic image width (for mobile devices)

  • 2017/4/25 18:01

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


I have no idea, before adding this
class = "img-responsive"
error has already occurred, should display 3 thumbnail images side by side, line break and again 3.

When i edit article is something like this:
Resized Image

But when i save this i so effects.
14
aerograf
Re: Automatic image width (for mobile devices)

  • 2017/4/25 18:27

  • aerograf

  • Quite a regular

  • Posts: 214

  • Since: 2017/1/7 1


Try to put spaces instead of spaces:
 

Without spaces!
But I would like to see the code ....
15
Hadesteam
Re: Automatic image width (for mobile devices)

  • 2017/4/25 19:16

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


Code of article or my theme?

article html code:
<a href="http://www.kulturystyka.org.pl/fotki/hubert/01.jpg" target="_blank"><img border="0" class="img-responsive" src="http://www.kulturystyka.org.pl/fotki/hubert/01m.jpg" />a> <a href="http://www.kulturystyka.org.pl/fotki/hubert/02.jpg" target="_blank"><img border="0" class="img-responsive" src="http://www.kulturystyka.org.pl/fotki/hubert/02m.jpg" />a> <a href="http://www.kulturystyka.org.pl/fotki/hubert/03.jpg" target="_blank"><img border="0" class="img-responsive" src="http://www.kulturystyka.org.pl/fotki/hubert/03m.jpg" />a> <a href="http://www.kulturystyka.org.pl/fotki/hubert/04.jpg" target="_blank"><img border="0" class="img-responsive" src="http://www.kulturystyka.org.pl/fotki/hubert/04m.jpg" />a> <a href="http://www.kulturystyka.org.pl/fotki/hubert/05.jpg" target="_blank"><img border="0" class="img-responsive" src="http://www.kulturystyka.org.pl/fotki/hubert/05m.jpg" />a> <a href="http://www.kulturystyka.org.pl/fotki/hubert/06.jpg" target="_blank"><img border="0" class="img-responsive" src="http://www.kulturystyka.org.pl/fotki/hubert/06m.jpg" />a>
16
Hadesteam
Re: Automatic image width (for mobile devices)

  • 2017/4/25 21:30

  • Hadesteam

  • Not too shy to talk

  • Posts: 162

  • Since: 2011/9/5 1


When i use
[img] [/img]
then is ok, but is to many pictures to change, Is there no other solution? On old template worked maybe send old css?
17
aerograf
Re: Automatic image width (for mobile devices)

  • 2017/4/26 5:59

  • aerograf

  • Quite a regular

  • Posts: 214

  • Since: 2017/1/7 1


border = "0" does not need to be specified, because In css should be img {border: 0;}. And try without spaces. And in css that is written for a {} and for img {}?
18
aerograf
Re: Automatic image width (for mobile devices)

  • 2017/4/26 6:01

  • aerograf

  • Quite a regular

  • Posts: 214

  • Since: 2017/1/7 1


And more ... What kind of editor do you use? If fckeditor try to replace it. It needs to be updated, in new templates it adds different codes ...
19
Bleekk
Re: Automatic image width (for mobile devices)

  • 2017/4/26 6:46

  • Bleekk

  • Theme Designer

  • Posts: 941

  • Since: 2002/12/14


This is how we add the class in images automatic on xoops.org
<script>
            $( document ).ready(function() {
                $("img").addClass("img-responsive");
                $( "form img" ).removeClass( "img-responsive" );
                $(".xoops-comment-text").each(function() {
                  $(this).find("img").css( "display", "inline" );
                });
                $(".page_bookmarks").each(function() {
                  $(this).find("img").css( "display", "inline" );
                });
                $(".page_icons").each(function() {
                  $(this).find("img").css( "display", "inline" );
                });
            });
        script>
20
aerograf
Re: Automatic image width (for mobile devices)

  • 2017/4/26 7:08

  • aerograf

  • Quite a regular

  • Posts: 214

  • Since: 2017/1/7 1


It seems img-responsive causes conflict. I do not use this template myself, but when using this script I need to clear all the img references from the css files. Or reset css when loading the template. Another problem can be in the description of the div.
Also, I did not pontravilos, when viewing through the browser the source code of the page, the use of capital letters in the indication of tags.
« 1 (2) 3 4 5 »

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Who's Online

335 user(s) are online (253 user(s) are browsing Support Forums)

Members: 0

Guests: 335

more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Nov 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits