Re: Automatic image width (for mobile devices) [2.5.x Support]

11

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

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

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:

But when i save this i so effects.

14

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

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

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

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

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

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>

bleekk.com

20

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.

Stats
Goal:	$100.00
Due Date:	Nov 30
Gross Amount:	$0.00
Net Balance:	$0.00
Left to go:	$100.00

Re: Automatic image width (for mobile devices)

Re: Automatic image width (for mobile devices)

Re: Automatic image width (for mobile devices)

Re: Automatic image width (for mobile devices)

Re: Automatic image width (for mobile devices)

Re: Automatic image width (for mobile devices)

Re: Automatic image width (for mobile devices)

Re: Automatic image width (for mobile devices)

Re: Automatic image width (for mobile devices)

Re: Automatic image width (for mobile devices)

Login

Search

Recent Posts

XOOPS MyMenus 1.54.0 Beta 10

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Who's Online

Donat-O-Meter

Latest GitHub Commits

{{ record.sha.slice(0, 7) }} - {{ record.commit.message | truncate }}