TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

March 28, 2024, 08:48:58 AM

Login with username, password and session length
Members
Stats
  • Total Posts: 195,104
  • Total Topics: 21,212
  • Online today: 212
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 1
  • Guests: 213
  • Total: 214
  • illori

Pictures responsive?

Started by Wichtlmex, June 05, 2019, 06:34:52 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Wichtlmex

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

lurkalot

What type of blocks? re you using? and how are you inserting the images?

@rjen

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 Latest TP on SMF2.1 at: www.fjr-club.nl

Wichtlmex

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

@rjen

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 Latest TP on SMF2.1 at: www.fjr-club.nl

Wichtlmex

of course..... so embarrasing :-(
SMF 2.1 RC1, TP 1.6.3

lurkalot

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..

<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>

Oldiesmann

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.