News: April 7th, 2019, The Tinyportal team is pleased to announce the release of ~~ TinyPortal 1.6.3! GET IT NOW!!!

Login  |  Register
HTML5 Icon HTML5 Icon
TP on Social Media
Welcome, Guest. Please login or register.
Did you miss your activation email?

September 15, 2019, 09:01:43 PM

Login with username, password and session length

Recent

Members
  • Total Members: 3752
  • Latest: Alizee
Stats
  • Total Posts: 188888
  • Total Topics: 20752
  • Online Today: 80
  • Online Ever: 629
  • (November 08, 2018, 01:36:54 PM)
Users Online
Users: 0
Guests: 33
Total: 33

Author Topic: Pictures responsive?  (Read 581 times)

0 Members and 1 Guest are viewing this topic.

Offline Wichtlmex

  • Jr. Member
  • **
  • Posts: 88
Pictures responsive?
« on: June 04, 2019, 11:34:52 PM »
Good morning,
my blocks are nicely responsive.... when only containing text. Is there any chance, inserted pictures will behave responsive too?
Regards
Michael
SMF 2.1 RC1, TP 1.6.3

Offline lurkalot

  • Administrator
  • *
  • Posts: 6216
    • Camera Craniums
Re: Pictures responsive?
« Reply #1 on: June 05, 2019, 12:01:57 AM »
What type of blocks? re you using? and how are you inserting the images?

Offline @rjen

  • Support Team
  • *
  • Posts: 1807
    • FJR-club Nederland
Re: Pictures responsive?
« Reply #2 on: June 05, 2019, 02:12:36 AM »
As far as I can see images in your articles ARE responsive.

But I suspect you are expecting something specific.
Can you please explain what you are expecting to see, and what it is not doing?

Example appreciated...
Running TP1.6.3 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline Wichtlmex

  • Jr. Member
  • **
  • Posts: 88
Re: Pictures responsive?
« Reply #3 on: June 05, 2019, 05:10:01 AM »
Hi,
the pictures are contents of a block. The block is from type "single article".
The text around the pictures moves around when using different breakpoints/screen width, but the images/graphics keep their size.
I insert the images by different ways. Either using the HTML-editor "insert float right/left" or by entering <div style float right...>

 
SMF 2.1 RC1, TP 1.6.3

Offline @rjen

  • Support Team
  • *
  • Posts: 1807
    • FJR-club Nederland
Re: Pictures responsive?
« Reply #4 on: June 05, 2019, 05:44:51 AM »
So you want the images to become larger?

They keep their size because you have assigned a width attribute in their style.

The responsive design of TinyPortal is focussing on making sure that images are being resized to fit on smaller screens not the other way around: it will not enlarge pictures that are assigned a certain width.

If you want the images to show larger, you must assign the corresponding width to the images. The responsive design will make sure they are shrunk to not exceed the screen.

You will need to play with percentage widths like 60%, 100%...

This is general html and css and is not specific to Tinyportal..
For more information: https://www.w3schools.com/howto/howto_css_image_responsive.asp
Running TP1.6.3 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline Wichtlmex

  • Jr. Member
  • **
  • Posts: 88
Re: Pictures responsive?
« Reply #5 on: June 05, 2019, 07:36:02 AM »
of course..... so embarrasing :-(
SMF 2.1 RC1, TP 1.6.3

Offline lurkalot

  • Administrator
  • *
  • Posts: 6216
    • Camera Craniums
Re: Pictures responsive?
« Reply #6 on: June 05, 2019, 02:40:13 PM »
I still tend to add the css to the to the embed code itself, like this example. This is a image link, Nearly every image on my GG site https://guitaristguild.com uses this code..

Code: [Select]
<a href="https://www.machinemart.co.uk/" target="_blank"><img src="https://guitaristguild.com/tp-images/block_images/machinemart.png" width="90%" alt="Machine-Mart" border="0"></a>

Offline Oldiesmann

  • Jr. Member
  • **
  • Posts: 27
    • Cincy Space
Re: Pictures responsive?
« Reply #7 on: June 05, 2019, 09:45:58 PM »
If you want to have real fun, the img tag in HTML5 has a "srcset" attribute that lets you serve different files for different screen sizes. See https://html.com/attributes/img-srcset/ for more details.