Use custom image size in bootstrap slider

  • I know you can set custom image sizes in functions.php using the add_image_size() function.

    So I’ve added this to my functions.php:
    add_image_size('portfolioSlider', 1110, 667, true);

    How can you use this custom size in a bootstrap slider? I have this bootstrap slider that works fine:

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
     <ol class="carousel-indicators">
					
     <?php 
	$indicatorCount = 0;
  	foreach ($projectPhotos as $projectPhoto): ?>
	<li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $indicatorCount; ?>" class="<?php if ($indicatorCount == 0) echo 'active'; ?>"></li>
	<?php 
	$indicatorCount++;
	endforeach; ?>

 	</ol>

	<div class="carousel-inner">
	<?php 
	$slideCount = 0;
		
	foreach ($projectPhotos as $projectPhoto): ?>
	<div class="carousel-item <?php if ($slideCount == 0) echo 'active'; ?>">
	<img src="<?php echo esc_url($projectPhoto); ?>" />
	</div>
	<?php 
	$slideCount++;
	endforeach; ?>
	</div>

 	<a href="#carouselExampleIndicators" role="button" class="carousel-control-prev" data-slide="prev">
	<span class="carousel-control-prev-icon" aria-hidden="true"></span>
	<span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
	<span class="carousel-control-next-icon" aria-hidden="true"></span>
	<span class="sr-only">Next</span>
	</a>

	</div>

    What is the syntax for accessing the custom image size, all the examples I see are only focused on the featured image or post thumbnail.

    • This topic was modified 4 years, 3 months ago by traveler.
Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    Use wp_get_attachment_image() to get an img tag for the desired size specified. You also need to pass the attachment ID. Collect image attachments by query, using whatever criteria you need to get the right images. For example, you could get all image attachments whose parent_id is that of the current post. You could use the “fields” argument for WP_Query to only get the IDs of query results if you don’t need the other object properties for anything.

Viewing 1 replies (of 1 total)
  • The topic ‘Use custom image size in bootstrap slider’ is closed to new replies.