Another API Weather App example & one question

Beta
#1

Hi there,

just like @raye showed his results with the new API feature in this thread API Weather App Example and Suggestions , I also tried out the new API feature in 6.4b3, but with data from a regional weather provider.

I need to say, the this was my first experience with loopers, but it turned out pretty good. Before I used a JSON plugin to import all the weather data from the external source, but now I can do this in Pro, which is amazing. This saves me a lot of money and one plugin less.

Bildschirmfoto 2023-10-26 um 22.29.23
Bildschirmfoto 2023-10-26 um 22.29.233467Ă—2990 451 KB

What I need to know is, is there a way to replace the imageURL from the external source? I did this before with the other plugin to replace the ugly weather icons which are in .png with my own .svg icons.

This i how I previously replaced the imgeURL with TWIG:

{% set iconurl = dayForecasts.0.symbol.imageUrl | replace({'http://daten.buergernetz.bz.it/services/weather/graphics/icons/imgsource/wetter/':'/img/weather_icons/' }) %}
{% set iconurl = iconurl | replace({'.png':'.svg' }) %}

<img src="{{iconurl}}" alt="{{dayForecasts.0.symbol.description}}" title="{{dayForecasts.0.symbol.description}}" width="auto"></br></br>

now this is the looper I have in Pro:

<img src="{{dc:looper:field key="dayForecasts.0.symbol.imageUrl"}}" alt="{{dc:looper:field key="dayForecasts.0.symbol.description"}}" title="{{dc:looper:field key="dayForecasts.0.symbol.description"}}" width="auto"></br></br>

Any advice?

2 Likes
#2

Hey @xoa,

sehr schönes Wetter-Beispiel :slight_smile:

Here is the approach I did in my weather example. I did also exchange the icons delivered by OpenWeather. Although my situtation was a bit different, but maybe it helps:

I created a div that contains ALL possible weather icons and used the icon element with thenew FontAwesome icons. From OpenWeather docs I knew there are “only” 19 different icons.

2023-10-27_08-43
2023-10-27_08-432260Ă—1362 145 KB

OpenWeather just sends a name of icon like 10d. On every weather icon element I added a condition like in the image. So if weather.icon = 10d like in the image, the rain icon is the only icon where the condition is true.

2023-10-27_08-45
2023-10-27_08-453088Ă—1612 200 KB

Yes, that is dilligence and error prone if OpenWeather ever changes their system. But it was only an experiment.

I for myself, in a porduction environment, would write a small custom shortcode filter, where you exactly rewrite the steps of your twig example.

For example in my weather example I needed a way to convert a temperature like 14.83257 in a sprintf way. So I wrote a little shortcode which exactly does this:
[sprintf text="{{dc:looper:field key="temp.day"}}" format="%01.0f"]
und used that in the textfield like in the image below:

2023-10-27_08-58
2023-10-27_08-583088Ă—1612 226 KB

Question is, if the shortcode is also interpreted in the source field of an image element :thinking:
But i bet it will. If not you can try a detour along a custom paramter and put that custom parameter value int the source field of the image.

#3

Vielen Dank @raye :grinning:

Thank’s a lot for your advice of making use of the condition-function. This works indeed, although it may not be the “best” solution.
But let’s see, maybe sooner or later somebody can explain us how it is done right. :grin: But for now it works. :blush:

1 Like
#4

You are speaking my lingo mentioning Twig in this forum. Dynamic Content itself doesn’t have the abilities you would need like the string replacements you are doing in your Twig template. We plan on integrating Twig itself or a more robust templating engine eventually though next year. Conditions can definitely help you interact with data as Raye has described too. Working with data still has some limitations as you might see with pagination, but it’s on our scope.

You can integrate directly to DC here as well if that helps. I have a sample for you below although incomplete. Have a great day!

// {{dc:custom:iconformat}}
// EX
// {{dc:custom:iconformat icon="{{dc:looper:field key='dayForecasts.0.symbol.imageUrl'}}"}}
 add_filter( 'cs_dynamic_content_custom_iconformat', function($result, $args = []) {
  $iconUrl = $args['icon'];

  // str_replace(...)
  return $iconUrl;
}, 0, 2);
#5

@charlie Thank you very much for your answer an your example.
I have to take a look at it. I’m no expert in this whole thing so I think I have to play around a bit and see how it’s going. I need to understand more clearly where to put what code. :slight_smile: