Jump to content

Two issues... Firstly, I can't figure out how to get variations of one of my images from another page. Second, I need to grab a fixed amount of images, not all of them.


Recommended Posts

These issues should be fairly easy for any intermediate to advanced ProcessWire developer to answer. I'm new to PHP and relatively new to ProcessWire and just need a bit of help. What I'm trying to do is bring in a couple of cards from my Projects page to display on my home page. I finally got the code right to bring in the cards but right now they're using my original images instead of my resized "variations". So firstly, I would like to know how to reference the variations of my images instead of using the original. Secondly, I need to grab only four of the cards from the Project page and not import in all ten. It should be just two small changes to my code to do these things (I would imagine). Here is the code I currently have for that section:

<?php
		// https://processwire.com/api/arrays/
		// check if the array of images has items

		if (count($pages->get("/projects/")->images)) :

			// get array of images from the field
			$images = $pages->get("/projects/")->images;

			$count = 0;

			// iterate over each one
			foreach ($images as $image) :

				$count++;

				$sectionText = $pages->get("/projects/")->get("paragraph_$count");

				$img = $image;

				$buttonCode = $pages->get("/projects/")->get("url_$count");

		?>

			<span id="card<?php echo $count?>" class="card">

				<img class="cardThumb" src="<?php echo $img->url; ?>" alt="<?php echo $image->description; ?> Thumbnail" />

				<div class="cardBody">
                  
					<div class="cardText">
						<h2><?php echo $img->description; ?></h2>
						<?php echo $sectionText; ?>
					</div>

					<div class="primaryBtn">
						<a href="https://www.paypal.com/donate?hosted_button_id=
							<?php echo $buttonCode; ?>
							&source=url">
							<button>
								<i class="fas fa-donate"></i> Donate
							</button>
						</a>
					</div>
                  
				</div>

			</span>

		<?php
			endforeach;
			endif;
		?>

Thanks in advance for any help!

Link to post
Share on other sites

Hey, first thing that I spotted is that you do a check if there are images, what exactly means there can be one or more images. But you also said you need exactly 4 images. So, what should the code do if there are less then 4 images available? You may do a check if it at minimum has 4 images:

if (4 <= count($pages->get("/projects/")->images))

So, if you would check that there are more than 3 images available, you should use a for loop instead of the foreach loop.

// iterate over first four images
for($i = 0; $i < 4; $i++) :
	$image = $images->eq($i);
    ...

Third thing is to get the variation. You can do it at the point where you copy the $image to the $img variable:

$img = $image->width(200);  // or $image->height(...) or $image->size(...)

 

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By skeltern
      WebP image support is great and works fine. But once created I've issues to get rid of all API generated WebP variations.
      The backend image field variations "Delete" works and I can remove all variations JPEG plus WebP. Image list is clean but all WebP API variations are still stored in file system (for instance files/12345/84.900x675.webp etc). I can only use ImageSizer with temp 'force' option to request fresh WebP variations or have to delete WebP files from folders. No other way so far. Tested with 2 sites and latest master PW 3.0.165.
      Is there somewhere a "magic button" or config/setup thing to solve my sticky WebP issue?
    • By psy
      I've searched, and maybe missed, the solution. I have a 'normal' images field and uploading images with a file size greater than 10Kb is fine. Any image size smaller results in the never-ending spinner and no upload.
      No min/max width/height set on image uploads in admin, ie just the defaults.
      Any ideas on how to fix?
      Using:
      PW: 3.0.175
      PHP: 7.3
      Marking it as "Resolved" rather than "Solved" as it auto-magically fixed itself. No idea whether PW, PHP, or just an internet hiccough... All good now 🤞
    • By picarica
      so hello there i have fiel field type i have lots of stuff there, and also an image i can easily get image from that field using
                                                        
      $options = array('quality' => 85, 'upscaling' => true, 'cropping' => 'north', 'sharpening' => 'medium'); $word = ".png"; // Test if string contains the word foreach($childgames->subor_hry as $file) { if(strpos($file, $word) !== false){ /* $imger = $file->size(473, 266, $options); */ echo $file; /* echo $file->url; */ } } so i get the fiel i tried invoking size on it like the commented out part and it doesnt work i get error Oh snizzle… Error:     Exception: Method Pagefile::size does not exist or is not callable in this context (in
      what am i doing wrong? can you guys help me by all logic this should work
    • By Max Esnée
      Hi,
      When I upload a large(ish) SVG (≈120ko in this case) into an image field, it tends to get stuck at 100% and block the whole website. If I force refresh the admin page, the svg has not been uploaded. The file is correctly copied into the assets folder though. Other svg tends to be uploaded fine albeit I've noticed that pages containing svg images in the admin are very slow to load generally. Other pages using the same template but with jpeg or png images are much faster to load.
      I get the following error in the JS console:

      I develop locally using MAMP on macOS and I'm using Firefox. I'm using the last ProcessWire version (3.0.165).
      I also tested in Chrome and got the same error.
    • By totoff
      Dear all,
      tomorrow I'll have to introduce some editors on how to upload and edit images in image fields in Processwire. The site in question is quite image rich and I've spent some time to serve the appropriate images via scrcset already cropped for different screen sizes.
      However, the backend offers a lot of possibilities to manipulate images and most of them I'm not familiar with because as a developer I've never spent much thinking on what all the features might be good for … Yet I'm concerned that my editors work on images in the backend may interfere with my optimization strategies in the templates.
      Is there a general rule of thumb what content editors should do or not do with images in order not to break srcset strategies etc.? Maybe there is already a source of information you could point me to?
      Your recommendations are much appreciated!
×
×
  • Create New...