Agave Plugins Header Logo

Displaying Posts Thumbnail

Here you will learn how to include the posts thumbnail image plus what size you would like to use. The below again is going to be just the basic listing but including a thumbnail image.

[[netsposts thumbnail='true']]
Hello world!
Published 10/19/2020 in Agave Plugins Download Files
Welcome to Agave Plugins for WordPress and more.... This is your first post. Edit or delete it, then start writing!read more ❯
Pacific
Published 4/4/2020 in Ocean Views
Pacific Ocean Sunset
The Pacific Ocean is the largest and deepest of Earth's oceanic divisions. It extends from the Arctic Ocean in the north to the Southern Ocean (or, depending on definition, to Antarctica) in the south and is bounded by the continents of Asia and Australia in the west and the Americas in the east.read more ❯
Rocky Mountains
Published 4/4/2020 in Mountain Ranges of the World
The Rocky Mountains
The Rocky Mountains, also known as the Rockies, are a major mountain range located in western North America. The Rocky Mountains stretch 3,000 km (1,900 mi) in straight-line distance from the northernmost part of British Columbia, in western Canada, to New Mexico in the Southwestern United States. The northern terminus is near the Liard River, while the southernmost point is near Albuquerque, adjacent the Sandia–Manzano Mountains. Located within the North American Cordillera, the Rockies are distinct from the Pacific Coast Ranges, Cascade Range, and the Sierra Nevada, which all lie farther to the west.read more ❯
Test Post 1
Published 9/1/2021 in Agave Plugins Private Support
Rain Forest Water Falls
Published 4/3/2020 in Rain Forest Scenic Pictures
Rain Forest Waterfalls
The Amazon is one giant rain forest, so it is not surprising that there are dramatic waterfalls throughout the region, particularly during the wet season. The contrast of cascading water, rocky outcrops and tropical greenery make Amazonian waterfalls a visual treat.read more ❯
Mojave
Published 4/4/2020 in Desert Landscapes
Mojave Desert
The Mojave Desert is situated in a transitional zone between the Great Basin Desert to the north and the Sonoran Desert to the south (mainly between 34 and 38°N latitudes). The Mojave Desert, a rain-shadow desert, is defined by a combination of latitude, elevation, geology, and indicator plants.read more ❯
Andes
Published 8/5/2020 in Mountain Ranges of the World
Andes Mountains
The Andes, Andes Mountains or Andean Mountains (Spanish: Cordillera de los Andes) are the longest continental mountain range in the world, forming a continuous highland along the western edge of South America. The range is 7,000 km (4,300 mi) long, 200 to 700 km (120 to 430 mi) wide (widest between 18° south and 20° south latitude), and has an average height of about 4,000 m (13,000 ft). The Andes extend from north to south through seven South American countries: Venezuela, Colombia, Ecuador, Peru, Bolivia, Chile, and Argentina.read more ❯
Date and Time
Published 4/10/2020 in Agave Plugins LLC
This post is displaying the current date and time so you may know how my plugin network posts extended processes the shortcode. read more ❯

As you can see adding the thumbnails gives the posts a more lively look. To make it better just follow the tutorial basic setup/custom css.

The default setting is to display the thumbnail above the excerpt. If you would like it to float to the left of the excerpt text then you would add the following to the css file. I'm also going to add an ID to the following excerpt. It is wrapped in the netsposts-content divs.

[[netsposts thumbnail='true' shortcode_id='image-align-left']]

And the CSS will be the following.

#image-align-left .netsposts-content .wp-post-image { float: left; margin-right: 1em; }
Hello world!
Published 10/19/2020 in Agave Plugins Download Files
Welcome to Agave Plugins for WordPress and more.... This is your first post. Edit or delete it, then start writing!read more ❯
Pacific
Published 4/4/2020 in Ocean Views
Pacific Ocean Sunset
The Pacific Ocean is the largest and deepest of Earth's oceanic divisions. It extends from the Arctic Ocean in the north to the Southern Ocean (or, depending on definition, to Antarctica) in the south and is bounded by the continents of Asia and Australia in the west and the Americas in the east.read more ❯
Rocky Mountains
Published 4/4/2020 in Mountain Ranges of the World
The Rocky Mountains
The Rocky Mountains, also known as the Rockies, are a major mountain range located in western North America. The Rocky Mountains stretch 3,000 km (1,900 mi) in straight-line distance from the northernmost part of British Columbia, in western Canada, to New Mexico in the Southwestern United States. The northern terminus is near the Liard River, while the southernmost point is near Albuquerque, adjacent the Sandia–Manzano Mountains. Located within the North American Cordillera, the Rockies are distinct from the Pacific Coast Ranges, Cascade Range, and the Sierra Nevada, which all lie farther to the west.read more ❯
Test Post 1
Published 9/1/2021 in Agave Plugins Private Support
Rain Forest Water Falls
Published 4/3/2020 in Rain Forest Scenic Pictures
Rain Forest Waterfalls
The Amazon is one giant rain forest, so it is not surprising that there are dramatic waterfalls throughout the region, particularly during the wet season. The contrast of cascading water, rocky outcrops and tropical greenery make Amazonian waterfalls a visual treat.read more ❯
Mojave
Published 4/4/2020 in Desert Landscapes
Mojave Desert
The Mojave Desert is situated in a transitional zone between the Great Basin Desert to the north and the Sonoran Desert to the south (mainly between 34 and 38°N latitudes). The Mojave Desert, a rain-shadow desert, is defined by a combination of latitude, elevation, geology, and indicator plants.read more ❯
Andes
Published 8/5/2020 in Mountain Ranges of the World
Andes Mountains
The Andes, Andes Mountains or Andean Mountains (Spanish: Cordillera de los Andes) are the longest continental mountain range in the world, forming a continuous highland along the western edge of South America. The range is 7,000 km (4,300 mi) long, 200 to 700 km (120 to 430 mi) wide (widest between 18° south and 20° south latitude), and has an average height of about 4,000 m (13,000 ft). The Andes extend from north to south through seven South American countries: Venezuela, Colombia, Ecuador, Peru, Bolivia, Chile, and Argentina.read more ❯
Date and Time
Published 4/10/2020 in Agave Plugins LLC
This post is displaying the current date and time so you may know how my plugin network posts extended processes the shortcode. read more ❯

If you see I also gave the image a little margin on its right side so the text doesn't but up against it. If you have a lot of text it will flow around the image use the above css. I'm giving the next example the same as above but only a width of 400px that way you can see what it looks like when the text starts to wrap.

Hello world!
Published 10/19/2020 in Agave Plugins Download Files
Welcome to Agave Plugins for WordPress and more.... This is your first post. Edit or delete it, then start writing!read more ❯

Pacific
Published 4/4/2020 in Ocean Views
Pacific Ocean Sunset
The Pacific Ocean is the largest and deepest of Earth's oceanic divisions. It extends from the Arctic Ocean in the north to the Southern Ocean (or, depending on definition, to Antarctica) in the south and is bounded by the continents of Asia and Australia in the west and the Americas in the east.read more ❯

Rocky Mountains
Published 4/4/2020 in Mountain Ranges of the World
The Rocky Mountains
The Rocky Mountains, also known as the Rockies, are a major mountain range located in western North America. The Rocky Mountains stretch 3,000 km (1,900 mi) in straight-line distance from the northernmost part of British Columbia, in western Canada, to New Mexico in the Southwestern United States. The northern terminus is near the Liard River, while the southernmost point is near Albuquerque, adjacent the Sandia–Manzano Mountains. Located within the North American Cordillera, the Rockies are distinct from the Pacific Coast Ranges, Cascade Range, and the Sierra Nevada, which all lie farther to the west.read more ❯

Test Post 1
Published 9/1/2021 in Agave Plugins Private Support

Rain Forest Water Falls
Published 4/3/2020 in Rain Forest Scenic Pictures
Rain Forest Waterfalls
The Amazon is one giant rain forest, so it is not surprising that there are dramatic waterfalls throughout the region, particularly during the wet season. The contrast of cascading water, rocky outcrops and tropical greenery make Amazonian waterfalls a visual treat.read more ❯

Mojave
Published 4/4/2020 in Desert Landscapes
Mojave Desert
The Mojave Desert is situated in a transitional zone between the Great Basin Desert to the north and the Sonoran Desert to the south (mainly between 34 and 38°N latitudes). The Mojave Desert, a rain-shadow desert, is defined by a combination of latitude, elevation, geology, and indicator plants.read more ❯

Andes
Published 8/5/2020 in Mountain Ranges of the World
Andes Mountains
The Andes, Andes Mountains or Andean Mountains (Spanish: Cordillera de los Andes) are the longest continental mountain range in the world, forming a continuous highland along the western edge of South America. The range is 7,000 km (4,300 mi) long, 200 to 700 km (120 to 430 mi) wide (widest between 18° south and 20° south latitude), and has an average height of about 4,000 m (13,000 ft). The Andes extend from north to south through seven South American countries: Venezuela, Colombia, Ecuador, Peru, Bolivia, Chile, and Argentina.read more ❯

Date and Time
Published 4/10/2020 in Agave Plugins LLC
This post is displaying the current date and time so you may know how my plugin network posts extended processes the shortcode. read more ❯

If you would like the text or image vertically centered you would have to use some custom css involving flex-box or grid-containers. I will use flex-box in the example below.

[[netsposts thumbnail='true' shortcode_id='image-align-left-vertical-middle']]
#image-align-left-flex .netsposts-content { display: flex; flex-flow: column wrap; justify-content: space-between; }

All the items have a default width of a hundred percent so it will look no different than the first example on this page. We must target the .netsposts-excerpt class and give it a width of 100% minus the width of the image so they will appear in the same row. Plus we will still need a little space to the right of the image so it looks nice.

This will leave ten pixel margin between the content and image. The reason the gab is 10px is because I'm using the default thumbnail size which has the dimensions of 150px width and 150px height.

Hello world!
Published 10/19/2020 in Agave Plugins Download Files
Welcome to Agave Plugins for WordPress and more.... This is your first post. Edit or delete it, then start writing!read more ❯
Pacific
Published 4/4/2020 in Ocean Views
Pacific Ocean Sunset
The Pacific Ocean is the largest and deepest of Earth's oceanic divisions. It extends from the Arctic Ocean in the north to the Southern Ocean (or, depending on definition, to Antarctica) in the south and is bounded by the continents of Asia and Australia in the west and the Americas in the east.read more ❯
Rocky Mountains
Published 4/4/2020 in Mountain Ranges of the World
The Rocky Mountains
The Rocky Mountains, also known as the Rockies, are a major mountain range located in western North America. The Rocky Mountains stretch 3,000 km (1,900 mi) in straight-line distance from the northernmost part of British Columbia, in western Canada, to New Mexico in the Southwestern United States. The northern terminus is near the Liard River, while the southernmost point is near Albuquerque, adjacent the Sandia–Manzano Mountains. Located within the North American Cordillera, the Rockies are distinct from the Pacific Coast Ranges, Cascade Range, and the Sierra Nevada, which all lie farther to the west.read more ❯
Test Post 1
Published 9/1/2021 in Agave Plugins Private Support
Rain Forest Water Falls
Published 4/3/2020 in Rain Forest Scenic Pictures
Rain Forest Waterfalls
The Amazon is one giant rain forest, so it is not surprising that there are dramatic waterfalls throughout the region, particularly during the wet season. The contrast of cascading water, rocky outcrops and tropical greenery make Amazonian waterfalls a visual treat.read more ❯
Mojave
Published 4/4/2020 in Desert Landscapes
Mojave Desert
The Mojave Desert is situated in a transitional zone between the Great Basin Desert to the north and the Sonoran Desert to the south (mainly between 34 and 38°N latitudes). The Mojave Desert, a rain-shadow desert, is defined by a combination of latitude, elevation, geology, and indicator plants.read more ❯
Andes
Published 8/5/2020 in Mountain Ranges of the World
Andes Mountains
The Andes, Andes Mountains or Andean Mountains (Spanish: Cordillera de los Andes) are the longest continental mountain range in the world, forming a continuous highland along the western edge of South America. The range is 7,000 km (4,300 mi) long, 200 to 700 km (120 to 430 mi) wide (widest between 18° south and 20° south latitude), and has an average height of about 4,000 m (13,000 ft). The Andes extend from north to south through seven South American countries: Venezuela, Colombia, Ecuador, Peru, Bolivia, Chile, and Argentina.read more ❯
Date and Time
Published 4/10/2020 in Agave Plugins LLC
This post is displaying the current date and time so you may know how my plugin network posts extended processes the shortcode. read more ❯

Below is with a width of 400px.

Hello world!
Published 10/19/2020 in Agave Plugins Download Files
Welcome to Agave Plugins for WordPress and more.... This is your first post. Edit or delete it, then start writing!read more ❯

Pacific
Published 4/4/2020 in Ocean Views
Pacific Ocean Sunset
The Pacific Ocean is the largest and deepest of Earth's oceanic divisions. It extends from the Arctic Ocean in the north to the Southern Ocean (or, depending on definition, to Antarctica) in the south and is bounded by the continents of Asia and Australia in the west and the Americas in the east.read more ❯

Rocky Mountains
Published 4/4/2020 in Mountain Ranges of the World
The Rocky Mountains
The Rocky Mountains, also known as the Rockies, are a major mountain range located in western North America. The Rocky Mountains stretch 3,000 km (1,900 mi) in straight-line distance from the northernmost part of British Columbia, in western Canada, to New Mexico in the Southwestern United States. The northern terminus is near the Liard River, while the southernmost point is near Albuquerque, adjacent the Sandia–Manzano Mountains. Located within the North American Cordillera, the Rockies are distinct from the Pacific Coast Ranges, Cascade Range, and the Sierra Nevada, which all lie farther to the west.read more ❯

Test Post 1
Published 9/1/2021 in Agave Plugins Private Support

Rain Forest Water Falls
Published 4/3/2020 in Rain Forest Scenic Pictures
Rain Forest Waterfalls
The Amazon is one giant rain forest, so it is not surprising that there are dramatic waterfalls throughout the region, particularly during the wet season. The contrast of cascading water, rocky outcrops and tropical greenery make Amazonian waterfalls a visual treat.read more ❯

Mojave
Published 4/4/2020 in Desert Landscapes
Mojave Desert
The Mojave Desert is situated in a transitional zone between the Great Basin Desert to the north and the Sonoran Desert to the south (mainly between 34 and 38°N latitudes). The Mojave Desert, a rain-shadow desert, is defined by a combination of latitude, elevation, geology, and indicator plants.read more ❯

Andes
Published 8/5/2020 in Mountain Ranges of the World
Andes Mountains
The Andes, Andes Mountains or Andean Mountains (Spanish: Cordillera de los Andes) are the longest continental mountain range in the world, forming a continuous highland along the western edge of South America. The range is 7,000 km (4,300 mi) long, 200 to 700 km (120 to 430 mi) wide (widest between 18° south and 20° south latitude), and has an average height of about 4,000 m (13,000 ft). The Andes extend from north to south through seven South American countries: Venezuela, Colombia, Ecuador, Peru, Bolivia, Chile, and Argentina.read more ❯

Date and Time
Published 4/10/2020 in Agave Plugins LLC
This post is displaying the current date and time so you may know how my plugin network posts extended processes the shortcode. read more ❯

As you can see the text doesn't flow around the image but just stays to the right. If you'd like to keep the image centered vertically with the text you would add the following to the CSS above. align-items: center;.

Below is what it will look like with that simple addition.

Hello world!
Published 10/19/2020 in Agave Plugins Download Files
Welcome to Agave Plugins for WordPress and more.... This is your first post. Edit or delete it, then start writing!read more ❯

Pacific
Published 4/4/2020 in Ocean Views
Pacific Ocean Sunset
The Pacific Ocean is the largest and deepest of Earth's oceanic divisions. It extends from the Arctic Ocean in the north to the Southern Ocean (or, depending on definition, to Antarctica) in the south and is bounded by the continents of Asia and Australia in the west and the Americas in the east.read more ❯

Rocky Mountains
Published 4/4/2020 in Mountain Ranges of the World
The Rocky Mountains
The Rocky Mountains, also known as the Rockies, are a major mountain range located in western North America. The Rocky Mountains stretch 3,000 km (1,900 mi) in straight-line distance from the northernmost part of British Columbia, in western Canada, to New Mexico in the Southwestern United States. The northern terminus is near the Liard River, while the southernmost point is near Albuquerque, adjacent the Sandia–Manzano Mountains. Located within the North American Cordillera, the Rockies are distinct from the Pacific Coast Ranges, Cascade Range, and the Sierra Nevada, which all lie farther to the west.read more ❯

Test Post 1
Published 9/1/2021 in Agave Plugins Private Support

Rain Forest Water Falls
Published 4/3/2020 in Rain Forest Scenic Pictures
Rain Forest Waterfalls
The Amazon is one giant rain forest, so it is not surprising that there are dramatic waterfalls throughout the region, particularly during the wet season. The contrast of cascading water, rocky outcrops and tropical greenery make Amazonian waterfalls a visual treat.read more ❯

Mojave
Published 4/4/2020 in Desert Landscapes
Mojave Desert
The Mojave Desert is situated in a transitional zone between the Great Basin Desert to the north and the Sonoran Desert to the south (mainly between 34 and 38°N latitudes). The Mojave Desert, a rain-shadow desert, is defined by a combination of latitude, elevation, geology, and indicator plants.read more ❯

Andes
Published 8/5/2020 in Mountain Ranges of the World
Andes Mountains
The Andes, Andes Mountains or Andean Mountains (Spanish: Cordillera de los Andes) are the longest continental mountain range in the world, forming a continuous highland along the western edge of South America. The range is 7,000 km (4,300 mi) long, 200 to 700 km (120 to 430 mi) wide (widest between 18° south and 20° south latitude), and has an average height of about 4,000 m (13,000 ft). The Andes extend from north to south through seven South American countries: Venezuela, Colombia, Ecuador, Peru, Bolivia, Chile, and Argentina.read more ❯

Date and Time
Published 4/10/2020 in Agave Plugins LLC
This post is displaying the current date and time so you may know how my plugin network posts extended processes the shortcode. read more ❯

As you can see they each have their own look to them so it's what you prefer.

What some people prefer is a nice custom image on top of the next and have it fully responsive to shrink down on screen size. You can do this by choosing a custom size image. You wouldn't necessarily want a big square image but more of a rectangular one. I created some custom sizes of the thumbnails so what I'll add to the shortcode is the name I gave it which was custom-size-500.

[[netsposts thumbnail='true' size='custom-size-500']]
Hello world!
Published 10/19/2020 in Agave Plugins Download Files
Welcome to Agave Plugins for WordPress and more.... This is your first post. Edit or delete it, then start writing!read more ❯
Pacific
Published 4/4/2020 in Ocean Views
Pacific Ocean Sunset
The Pacific Ocean is the largest and deepest of Earth's oceanic divisions. It extends from the Arctic Ocean in the north to the Southern Ocean (or, depending on definition, to Antarctica) in the south and is bounded by the continents of Asia and Australia in the west and the Americas in the east.read more ❯
Rocky Mountains
Published 4/4/2020 in Mountain Ranges of the World
The Rocky Mountains
The Rocky Mountains, also known as the Rockies, are a major mountain range located in western North America. The Rocky Mountains stretch 3,000 km (1,900 mi) in straight-line distance from the northernmost part of British Columbia, in western Canada, to New Mexico in the Southwestern United States. The northern terminus is near the Liard River, while the southernmost point is near Albuquerque, adjacent the Sandia–Manzano Mountains. Located within the North American Cordillera, the Rockies are distinct from the Pacific Coast Ranges, Cascade Range, and the Sierra Nevada, which all lie farther to the west.read more ❯
Test Post 1
Published 9/1/2021 in Agave Plugins Private Support
Rain Forest Water Falls
Published 4/3/2020 in Rain Forest Scenic Pictures
Rain Forest Waterfalls
The Amazon is one giant rain forest, so it is not surprising that there are dramatic waterfalls throughout the region, particularly during the wet season. The contrast of cascading water, rocky outcrops and tropical greenery make Amazonian waterfalls a visual treat.read more ❯
Mojave
Published 4/4/2020 in Desert Landscapes
Mojave Desert
The Mojave Desert is situated in a transitional zone between the Great Basin Desert to the north and the Sonoran Desert to the south (mainly between 34 and 38°N latitudes). The Mojave Desert, a rain-shadow desert, is defined by a combination of latitude, elevation, geology, and indicator plants.read more ❯
Andes
Published 8/5/2020 in Mountain Ranges of the World
Andes Mountains
The Andes, Andes Mountains or Andean Mountains (Spanish: Cordillera de los Andes) are the longest continental mountain range in the world, forming a continuous highland along the western edge of South America. The range is 7,000 km (4,300 mi) long, 200 to 700 km (120 to 430 mi) wide (widest between 18° south and 20° south latitude), and has an average height of about 4,000 m (13,000 ft). The Andes extend from north to south through seven South American countries: Venezuela, Colombia, Ecuador, Peru, Bolivia, Chile, and Argentina.read more ❯
Date and Time
Published 4/10/2020 in Agave Plugins LLC
This post is displaying the current date and time so you may know how my plugin network posts extended processes the shortcode. read more ❯

The images have dimensions of 500px wide by 333px high. I'm going to show you another little trick you may use and take advantage of the wrap_start= and wrap_end= arguments. Whatever goes in to wrap_start will be at the very beginning of the .netsposts-content div and wrap_end will be at the very end it as you may have guessed. I'm going to give the container the same width as the image.

Plus I'm going to remove the read more link and make the title a link. Plus when somebody hovers over the image it will turn to black and white.

[[netsposts thumbnail='true' size='custom-size-500' exclude_read_more_link='true' include_link_title='true' wrap_start='<div style="max-width: 500px;">' wrap_end='</div>']]

The reason I chose max-width instead of just width is when the screen size goes smaller than 500px the column will shrink accordingly.

Note: If you want to include a default thumbnail because not all posts or pages will have a featured image you may designate a default image using the following shortcode which will replace any that are missing.

default_thumbnail='(img-url)'

and of course replace img-url with the actual link to your image.