Embedded graphic in block does not fill the complete block

Post Reply
User avatar
Oli
Observer
Observer
Posts: 23
Joined: Sat May 28, 2022 4:17 pm
Location: Hamelin / Germany
Station model: HP1000SE PRO
Software: weeWX
Contact:

Embedded graphic in block does not fill the complete block

Post by Oli » Sun Jul 24, 2022 3:43 pm

Hi,

I've been trying all this time, but I can't not get it:

I have created a block that should display a meteogram from meteoblue.
But I don't get the size in the complete box:
Screenshot 2022-07-24 at 17.34.jpg
Screenshot 2022-07-24 at 17.34.jpg (150.07 KiB) Viewed 570 times

How can I fill the complete block?

(I can embed the link with the img tag, but then it automatically scales so large that the whole blocks are no longer displayed in two columns on my weather page.)

my block looks like this:

Code: Select all

<?php

# meteoblue Meteogram
# Namespace: meteoblue_Meteogram
# Meteotemplate Block


// load theme
$designTheme = json_decode(file_get_contents("../../css/theme.txt"),true);
$theme = $designTheme['theme'];

include("../../../config.php");
include("../../../css/design.php");
include("../../../scripts/functions.php");

$languageRaw = file_get_contents($baseURL."lang/gb.php");
$language['gb'] = json_decode($languageRaw,true);
$languageRaw = file_get_contents($baseURL."lang/".$lang.".php");
$language[$lang] = json_decode($languageRaw,true);

?>
<style>

</style>

<!-- BLOCK CONTENT -->
<h4 align="center">Meteogramm von meteoblue</h4></font>


<iframe src="https://my.meteoblue.com/visimage/meteogram_web?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER%2Cdarkmode&apikey=5838a18e295d&temperature=C&windspeed=kmh&precipitationamount=mm&winddirection=3char&city=Coppenbr%C3%BCgge&iso2=de&lat=52.1185&lon=9.5487&asl=136&tz=Europe%2FBerlin&lang=de&sig=d90adba0224359989865dfa54fc9cd67" srcset="https://my.meteoblue.com/visimage/meteogram_web_hd?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER%2Cdarkmode&apikey=5838a18e295d&temperature=C&windspeed=kmh&precipitationamount=mm&winddirection=3char&city=Coppenbr%C3%BCgge&iso2=de&lat=52.1185&lon=9.5487&asl=136&tz=Europe%2FBerlin&lang=de&sig=f39f07e86a21b682fdb8ee9a68d8038d 1.4x" alt="Meteogram - 5 days - Coppenbrügge"></iframe><div><a href="https://www.meteoblue.com/de/wetter/woche/coppenbr%c3%bcgge_deutschland_2939862" target="_blank" rel="noreferrer" style="display: block;">Wetter Coppenbrügge - meteoblue</a></div>

davidefa
Expert
Expert
Posts: 862
Joined: Tue Jan 12, 2021 8:03 am
Location: Italy
Station model: WH2650
Software: WH2650 (direct upload)
Contact:

Re: Embedded graphic in block does not fill the complete block

Post by davidefa » Mon Jul 25, 2022 11:33 am

You can use something similar to this:

Code: Select all

<?php

	# 		Text
	# 		Namespace:		block...
	#		Meteotemplate Block
	
	include("settings.php");
		
	// load theme
	$designTheme = json_decode(file_get_contents("../../css/theme.txt"),true);
	$theme = $designTheme['theme'];
	
	include("../../../config.php");
	include("../../../css/design.php");
	include("../../../scripts/functions.php");
	
?>
	<style>
		
	</style>
	
	<div style="width:98%;margin:0 auto;padding:5px">
		 <img src="https://my.meteoblue.com/visimage/meteogram_web?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&apikey=5838a18e295d&temperature=C&windspeed=kmh&precipitationamount=mm&winddirection=3char&city=Coppenbr%C3%BCgge&iso2=de&lat=52.1185&lon=9.5487&asl=136&tz=Europe%2FBerlin&lang=en&sig=77631080077bd396d765a2653632f68b" srcset="https://my.meteoblue.com/visimage/meteogram_web_hd?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&apikey=5838a18e295d&temperature=C&windspeed=kmh&precipitationamount=mm&winddirection=3char&city=Coppenbr%C3%BCgge&iso2=de&lat=52.1185&lon=9.5487&asl=136&tz=Europe%2FBerlin&lang=en&sig=21cec6014a54dc010af4b3afa0122b8d 1.4x" alt="Meteogram - 5 days - Coppenbr&uuml;gge" width="400px">
		 <!-- <img src="//my.meteoblue.com/visimage/meteogram_multiSimple?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&amp;apikey=5838a18e295d&amp;temperature=C&amp;windspeed=kmh&amp;precipitationamount=mm&amp;winddirection=3char&amp;city=Coppenbr%C3%BCgge&amp;iso2=de&amp;lat=52.1185&amp;lon=9.5487&amp;asl=136&amp;tz=Europe%2FBerlin&amp;dt=1&amp;fcstlength=72&amp;params=NEMS12%2CNEMS12_E%2CNEMSGLOBAL%2CNEMSGLOBAL_E%2C%2CIFS04%2CUMGLOBAL10%2CUKMO2%2CICONEU%2CICON%2CICOND2%2CGFS05%2CGEM15%2CMFFR%2CMFEU%2CMFGLOBAL%2CHARMONIE%2CHIREU7&amp;lang=en&amp;ts=1658737779&amp;sig=d36994868e4df3b56d52cab118466737" class="image-lazyload loaded" data-srcset="//my.meteoblue.com/visimage/meteogram_multiSimple_hd?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&amp;apikey=5838a18e295d&amp;temperature=C&amp;windspeed=kmh&amp;precipitationamount=mm&amp;winddirection=3char&amp;city=Coppenbr%C3%BCgge&amp;iso2=de&amp;lat=52.1185&amp;lon=9.5487&amp;asl=136&amp;tz=Europe%2FBerlin&amp;dt=1&amp;fcstlength=72&amp;params=NMM4%2CNMM22%2CNEMS4%2CNEMS12%2CNEMS12_E%2CNEMSGLOBAL%2CNEMSGLOBAL_E%2CIFS04%2CUMGLOBAL10%2CUKMO2%2CICONEU%2CICON%2CICOND2%2CGFS05%2CGEM15%2CMFFR%2CMFEU%2CMFGLOBAL%2CHARMONIE%2CHIREU7&amp;lang=en&amp;ts=1658737684&amp;sig=38c2d5f1ade72869751381d49dd2b792 1.4x" alt="meteoblue" srcset="//my.meteoblue.com/visimage/meteogram_multiSimple_hd?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&amp;apikey=5838a18e295d&amp;temperature=C&amp;windspeed=kmh&amp;precipitationamount=mm&amp;winddirection=3char&amp;city=Coppenbr%C3%BCgge&amp;iso2=de&amp;lat=52.1185&amp;lon=9.5487&amp;asl=136&amp;tz=Europe%2FBerlin&amp;dt=1&amp;fcstlength=72&amp;params=NEMS12%2CNEMS12_E%2CNEMSGLOBAL%2CNEMSGLOBAL_E%2C%2CIFS04%2CUMGLOBAL10%2CUKMO2%2CICONEU%2CICON%2CICOND2%2CGFS05%2CGEM15%2CMFFR%2CMFEU%2CMFGLOBAL%2CHARMONIE%2CHIREU7&amp;lang=en&amp;ts=1658737779&amp;sig=06d1d3b9cdb58b73de61ae00281ba83a 1.4x">
		 <img src="//my.meteoblue.com/visimage/meteogram_ensemblemembers?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&amp;apikey=5838a18e295d&amp;temperature=C&amp;windspeed=kmh&amp;precipitationamount=mm&amp;winddirection=3char&amp;city=Coppenbr%C3%BCgge&amp;iso2=de&amp;lat=52.1185&amp;lon=9.5487&amp;asl=136&amp;tz=Europe%2FBerlin&amp;fcstlength=168&amp;lang=en&amp;ts=1658738311&amp;sig=716e42c862243e0b561fc0089a3d2ca8" class="image-lazyload loaded" data-srcset="//my.meteoblue.com/visimage/meteogram_ensemblemembers_hd?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&amp;apikey=5838a18e295d&amp;temperature=C&amp;windspeed=kmh&amp;precipitationamount=mm&amp;winddirection=3char&amp;city=Coppenbr%C3%BCgge&amp;iso2=de&amp;lat=52.1185&amp;lon=9.5487&amp;asl=136&amp;tz=Europe%2FBerlin&amp;fcstlength=168&amp;lang=en&amp;ts=1658738311&amp;sig=0ee48b36c992bad31f16860a27c30e63 1.4x" alt="meteoblue" srcset="//my.meteoblue.com/visimage/meteogram_ensemblemembers_hd?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&amp;apikey=5838a18e295d&amp;temperature=C&amp;windspeed=kmh&amp;precipitationamount=mm&amp;winddirection=3char&amp;city=Coppenbr%C3%BCgge&amp;iso2=de&amp;lat=52.1185&amp;lon=9.5487&amp;asl=136&amp;tz=Europe%2FBerlin&amp;fcstlength=168&amp;lang=en&amp;ts=1658738311&amp;sig=0ee48b36c992bad31f16860a27c30e63 1.4x">
		 <img src="//my.meteoblue.com/visimage/meteogram_seasonal?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&amp;apikey=5838a18e295d&amp;temperature=C&amp;windspeed=kmh&amp;precipitationamount=mm&amp;winddirection=3char&amp;city=Coppenbr%C3%BCgge&amp;iso2=de&amp;lat=52.1185&amp;lon=9.5487&amp;asl=136&amp;tz=Europe%2FBerlin&amp;lang=en&amp;ts=1658738348&amp;sig=6ef29d0d2659ab24955ccf6e215291bb" class="image-lazyload loaded" data-srcset="//my.meteoblue.com/visimage/meteogram_seasonal_hd?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&amp;apikey=5838a18e295d&amp;temperature=C&amp;windspeed=kmh&amp;precipitationamount=mm&amp;winddirection=3char&amp;city=Coppenbr%C3%BCgge&amp;iso2=de&amp;lat=52.1185&amp;lon=9.5487&amp;asl=136&amp;tz=Europe%2FBerlin&amp;lang=en&amp;ts=1658738348&amp;sig=0e7e5de5c6655457d4d4e932ad1333a0 1.4x" alt="meteoblue" srcset="//my.meteoblue.com/visimage/meteogram_seasonal_hd?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&amp;apikey=5838a18e295d&amp;temperature=C&amp;windspeed=kmh&amp;precipitationamount=mm&amp;winddirection=3char&amp;city=Coppenbr%C3%BCgge&amp;iso2=de&amp;lat=52.1185&amp;lon=9.5487&amp;asl=136&amp;tz=Europe%2FBerlin&amp;lang=en&amp;ts=1658738348&amp;sig=0e7e5de5c6655457d4d4e932ad1333a0 1.4x">
		 <img src="//my.meteoblue.com/visimage/meteogram_airquality?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&amp;apikey=5838a18e295d&amp;temperature=C&amp;windspeed=kmh&amp;precipitationamount=mm&amp;winddirection=3char&amp;city=Coppenbr%C3%BCgge&amp;iso2=de&amp;lat=52.1185&amp;lon=9.5487&amp;asl=136&amp;tz=Europe%2FBerlin&amp;lang=en&amp;ts=1658737992&amp;sig=d6ba83c4b3c11219154465f89a9714b4" class="image-lazyload loaded" data-srcset="//my.meteoblue.com/visimage/meteogram_airquality_hd?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&amp;apikey=5838a18e295d&amp;temperature=C&amp;windspeed=kmh&amp;precipitationamount=mm&amp;winddirection=3char&amp;city=Coppenbr%C3%BCgge&amp;iso2=de&amp;lat=52.1185&amp;lon=9.5487&amp;asl=136&amp;tz=Europe%2FBerlin&amp;lang=en&amp;ts=1658737992&amp;sig=3102b46bcc16deb2d06b78d3cfe20653 1.4x" alt="meteoblue" srcset="//my.meteoblue.com/visimage/meteogram_airquality_hd?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&amp;apikey=5838a18e295d&amp;temperature=C&amp;windspeed=kmh&amp;precipitationamount=mm&amp;winddirection=3char&amp;city=Coppenbr%C3%BCgge&amp;iso2=de&amp;lat=52.1185&amp;lon=9.5487&amp;asl=136&amp;tz=Europe%2FBerlin&amp;lang=en&amp;ts=1658737992&amp;sig=3102b46bcc16deb2d06b78d3cfe20653 1.4x">
		 <img src="//my.meteoblue.com/visimage/meteogram_air?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&amp;apikey=5838a18e295d&amp;temperature=C&amp;windspeed=kmh&amp;precipitationamount=mm&amp;winddirection=3char&amp;city=Coppenbr%C3%BCgge&amp;iso2=de&amp;lat=52.1185&amp;lon=9.5487&amp;asl=136&amp;tz=Europe%2FBerlin&amp;fcstlength=72&amp;lang=en&amp;ts=1658738129&amp;sig=779f04316bcb2f31fbafac55436cfe3a" class="image-lazyload loaded" data-srcset="//my.meteoblue.com/visimage/meteogram_air_hd?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&amp;apikey=5838a18e295d&amp;temperature=C&amp;windspeed=kmh&amp;precipitationamount=mm&amp;winddirection=3char&amp;city=Coppenbr%C3%BCgge&amp;iso2=de&amp;lat=52.1185&amp;lon=9.5487&amp;asl=136&amp;tz=Europe%2FBerlin&amp;fcstlength=72&amp;lang=en&amp;ts=1658738129&amp;sig=057c75e787fdb96530e7b329402a6e8d 1.4x" alt="meteoblue" srcset="//my.meteoblue.com/visimage/meteogram_air_hd?look=KILOMETER_PER_HOUR%2CCELSIUS%2CMILLIMETER&amp;apikey=5838a18e295d&amp;temperature=C&amp;windspeed=kmh&amp;precipitationamount=mm&amp;winddirection=3char&amp;city=Coppenbr%C3%BCgge&amp;iso2=de&amp;lat=52.1185&amp;lon=9.5487&amp;asl=136&amp;tz=Europe%2FBerlin&amp;fcstlength=72&amp;lang=en&amp;ts=1658738129&amp;sig=057c75e787fdb96530e7b329402a6e8d 1.4x"> -->
		 <a href="https://www.meteoblue.com/en/weather/week/coppenbr%c3%bcgge_germany_2939862" target="_blank" rel="noreferrer" style="display: block;">Weather Coppenbr&uuml;gge - meteoblue</a>
	</div>
I've added also other images available on the meteoblue site ( multimodel, air quality, pollen, seasonal forecast... ).
You could add a block option to select which image to show...
Image

User avatar
Oli
Observer
Observer
Posts: 23
Joined: Sat May 28, 2022 4:17 pm
Location: Hamelin / Germany
Station model: HP1000SE PRO
Software: weeWX
Contact:

Re: Embedded graphic in block does not fill the complete block

Post by Oli » Mon Jul 25, 2022 2:47 pm

Thank you!
The problem was simple the width="400px" in the link. With 720 it looks nice. It can be so simple sometimes.

Post Reply