I am using the Advanced custom fields plugin to add a upload image option to a page, but I am wondering if there is a way so that, when I output it to a theme with <img src="<?php the_field('add_image'); ?>"/> it is not full size, it is cropped or set to one of the wordpress preset media sizes. Right now it outputs the full size image, So unless I teach my user to crop and resize images this doesn't seem to work for me.
Thanks in advance.
In Advanced Custom Fields the field editing screen where you add in the required fields and assign them to post edit screens did you choose image URL or Attachment ID for the image field? It sounds like you've got it set as image URL which will just return the URL to the originally uploaded file as you've discovered.
On the Advanced Custom Fields website where it has the documentation, there is a code examples page and a section that touches upon using attachment ID.
See below for a code example taken from the code example page here.
<?php $image = wp_get_attachment_image_src(get_field('add_image'), 'full'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php get_the_title(get_field('add_image')) ?>" />
I've changed the names of the fields to that of the ones you provided in your question. So change the media field to attachment ID and then you can use the above code.
I presume you know how to change the field to use attachment ID, but if not this page has screenshots of the image field and explains everything for you.
The below image was taken from the documentation link on ACF image fields which clearly shows beside the "return value" label Image URL or Attachment ID.
The newer versions of ACF now support the custom image sizes as defined in your functions file. When creating the custom field, you will now see a listing that includes the defined custom image sizes, even with Image URL selected.
