Question 30043 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Flutter: How to call images from API – WordPress

I have a WordPress blog and I’m trying to create an app for that blog. While using an API for the blog I’m unable to find the right set of code to fetch images that are in between the blog I have fetched the featured image of the blog but the problem is to fetch the images between paragraph text. For now, I’m getting such texts instead of the images. Screenshots attached.

enter image description here

Secondly, While fetching the text I’m getting the tags along with the text so how can I remove these tags. Screenshot attached.

enter image description here
enter image description here

Here is my code which I’m using to fetch all of these:

import 'package:flutter/material.dart';
import 'package:thewritingparadigm/screens/post_details.dart';
import 'package:thewritingparadigm/service/post_data.dart';

class LatestPost extends StatefulWidget {
  const LatestPost({Key? key}) : super(key: key);

  @override
  State<LatestPost> createState() => _LatestPostState();
}

class _LatestPostState extends State<LatestPost> {
  Post postService = Post();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List>(
      future: postService.getAllPost(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          if (snapshot.data!.isEmpty) {
            return const Center(child: Text("No Post Available"));
          }
          return ListView.builder(
              shrinkWrap: true,
              itemCount: snapshot.data?.length,
              itemBuilder: (context, i) {
                return Card(
                  child: ListTile(
                    title: Column(
                      children: [
                        const SizedBox(
                          height: 20.0,
                        ),
                        SizedBox(
                          width: double.infinity,
                          height: 250.0,
                          child: Image.network(snapshot.data![i]["_embedded"]
                              !["wp:featuredmedia"][0]["source_url"]),
                        ),
                        const SizedBox(
                          height: 15.0,
                        ),
                        Text(
                          snapshot.data![i]['title']['rendered'],
                          style: const TextStyle(
                            fontSize: 25.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                    subtitle: Container(
                      padding: const EdgeInsets.only(
                          left: 5.0, right: 5.0, bottom: 25.0),
                      child: Text(
                        snapshot.data![i]['content']['rendered']
                            .toString()
                            .replaceAll("<p>", "")
                            .replaceAll("</p>", ""),
                        maxLines: 4,
                        overflow: TextOverflow.ellipsis,
                        style: const TextStyle(fontSize: 16.0),
                      ),
                    ),
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) =>
                              PostDetails(data: snapshot.data?[i]),
                        ),
                      );
                    },
                  ),
                );
              });
        } else if (snapshot.hasError) {
          return Center(
            child: Text(snapshot.error.toString()),
          );
        } else {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }
}
Tags:

5

Answers


  1. 0

    What you are getting from the API is the already pre rendered html content. The code you posted in the first screenshot is HTML code, you can run it inside any .html file. What you need is to strip the images from it.

    Would suggest first thing is to try to get another wordpress API if possible, to return the images relating to a specific post.

    If you cannot do that, attempt the following:

    • Parse the entire response as a string.

    • Use string interpolation to perform a series of split() methods.

    • First, split by the pattern which is your base url, i.e http://thewriting.../uploads/.
      The above will give you a List<String>, each element will start with what is after /uploads/ and ends with someImageUrl.jpg somenumber.w.

    • On this list, perform a forEach() loop, where you iterate over every element, and then use .split() and use the pattern ".jpg". It will give you a list of two string, the first element is the url you want, the second element is rubish you don’t need.

    • Inside the same for each, after you do the split, you take the first [0] entry.

    • after that, you concatenate your baseUrl, with the image path with .jpg. And you get you array of paths.

        final String _baseUrl = 'http://thewriting..../uploads/'; //write the entire url until uploads.

    List<String> _list = yourHtmlResponse.split(_baseUrl);

    _list.forEach((element) {
      element =_baseUrl + element.split('.jpg').first + '.jpg';
      print(element);//just to check how the url is looking so far.
    });

    The above should get you a List<String> which has all the images in the response.

    Login or Signup to reply.
  2. 0

    use this library

    tap here

    var document = parser.parse(response.body);
        var mainTag = document.getElementById('ppd');


        var imageUrl = mainTag.querySelector('#wp-block-image');
        var getImageData = imageUrl!
            .getElementsByTagName('img')
            .map((e) => e.attributes['src'])
            .first;
        print(getImageData);
    Login or Signup to reply.
  3. 0

    You can convert your html block to json be like:

    It returns a json with an array encapsulating it. For your particular example jsonDecode should work fine, just take index 0 of the array to access the json.

    var res = await http.Client()
    .get(Uri.parse('https:// your url here'));

var body = res.body;
var decoded = jsonDecode(body);
var json = decoded[0];

var response = 
json["tag1"][0]["tag2"];
print(response);
    Login or Signup to reply.
  4. 0

    did you try the flutter dev cookbook
    it could help you allot

    Visit https://docs.flutter.dev/cookbook/networking/fetch-data

    Login or Signup to reply.
  5. 0

    It’s fixed by simply updating your environment variables in pubspec.yaml
    It should look like this:
    environment:
    sdk: ‘>=2.12.0 <3.0.0’

    The other solution is to remove ! of snapshot.data![i][‘title’][‘rendered’], but it is not the most optimal solution. I recommend you update pubspect.yaml

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search