Page 1 of 1
Embedded graphic in block does not fill the complete block
Posted: Sun Jul 24, 2022 3:43 pm
by Oli
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 (150.07 KiB) Viewed 4665 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>
Re: Embedded graphic in block does not fill the complete block
Posted: Mon Jul 25, 2022 11:33 am
by davidefa
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ügge" width="400px">
<!-- <img src="//my.meteoblue.com/visimage/meteogram_multiSimple?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&dt=1&fcstlength=72&params=NEMS12%2CNEMS12_E%2CNEMSGLOBAL%2CNEMSGLOBAL_E%2C%2CIFS04%2CUMGLOBAL10%2CUKMO2%2CICONEU%2CICON%2CICOND2%2CGFS05%2CGEM15%2CMFFR%2CMFEU%2CMFGLOBAL%2CHARMONIE%2CHIREU7&lang=en&ts=1658737779&sig=d36994868e4df3b56d52cab118466737" class="image-lazyload loaded" data-srcset="//my.meteoblue.com/visimage/meteogram_multiSimple_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&dt=1&fcstlength=72&params=NMM4%2CNMM22%2CNEMS4%2CNEMS12%2CNEMS12_E%2CNEMSGLOBAL%2CNEMSGLOBAL_E%2CIFS04%2CUMGLOBAL10%2CUKMO2%2CICONEU%2CICON%2CICOND2%2CGFS05%2CGEM15%2CMFFR%2CMFEU%2CMFGLOBAL%2CHARMONIE%2CHIREU7&lang=en&ts=1658737684&sig=38c2d5f1ade72869751381d49dd2b792 1.4x" alt="meteoblue" srcset="//my.meteoblue.com/visimage/meteogram_multiSimple_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&dt=1&fcstlength=72&params=NEMS12%2CNEMS12_E%2CNEMSGLOBAL%2CNEMSGLOBAL_E%2C%2CIFS04%2CUMGLOBAL10%2CUKMO2%2CICONEU%2CICON%2CICOND2%2CGFS05%2CGEM15%2CMFFR%2CMFEU%2CMFGLOBAL%2CHARMONIE%2CHIREU7&lang=en&ts=1658737779&sig=06d1d3b9cdb58b73de61ae00281ba83a 1.4x">
<img src="//my.meteoblue.com/visimage/meteogram_ensemblemembers?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&fcstlength=168&lang=en&ts=1658738311&sig=716e42c862243e0b561fc0089a3d2ca8" class="image-lazyload loaded" data-srcset="//my.meteoblue.com/visimage/meteogram_ensemblemembers_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&fcstlength=168&lang=en&ts=1658738311&sig=0ee48b36c992bad31f16860a27c30e63 1.4x" alt="meteoblue" srcset="//my.meteoblue.com/visimage/meteogram_ensemblemembers_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&fcstlength=168&lang=en&ts=1658738311&sig=0ee48b36c992bad31f16860a27c30e63 1.4x">
<img src="//my.meteoblue.com/visimage/meteogram_seasonal?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&ts=1658738348&sig=6ef29d0d2659ab24955ccf6e215291bb" class="image-lazyload loaded" data-srcset="//my.meteoblue.com/visimage/meteogram_seasonal_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&ts=1658738348&sig=0e7e5de5c6655457d4d4e932ad1333a0 1.4x" alt="meteoblue" srcset="//my.meteoblue.com/visimage/meteogram_seasonal_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&ts=1658738348&sig=0e7e5de5c6655457d4d4e932ad1333a0 1.4x">
<img src="//my.meteoblue.com/visimage/meteogram_airquality?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&ts=1658737992&sig=d6ba83c4b3c11219154465f89a9714b4" class="image-lazyload loaded" data-srcset="//my.meteoblue.com/visimage/meteogram_airquality_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&ts=1658737992&sig=3102b46bcc16deb2d06b78d3cfe20653 1.4x" alt="meteoblue" srcset="//my.meteoblue.com/visimage/meteogram_airquality_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&ts=1658737992&sig=3102b46bcc16deb2d06b78d3cfe20653 1.4x">
<img src="//my.meteoblue.com/visimage/meteogram_air?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&fcstlength=72&lang=en&ts=1658738129&sig=779f04316bcb2f31fbafac55436cfe3a" class="image-lazyload loaded" data-srcset="//my.meteoblue.com/visimage/meteogram_air_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&fcstlength=72&lang=en&ts=1658738129&sig=057c75e787fdb96530e7b329402a6e8d 1.4x" alt="meteoblue" srcset="//my.meteoblue.com/visimage/meteogram_air_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&fcstlength=72&lang=en&ts=1658738129&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ü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...
Re: Embedded graphic in block does not fill the complete block
Posted: Mon Jul 25, 2022 2:47 pm
by Oli
Thank you!
The problem was simple the width="400px" in the link. With 720 it looks nice. It can be so simple sometimes.