Add a custom IMAGE FIELD with DIVI Theme Builder and Advanced Custom Fields Image Field. No coding!

Aloha everybody welcome back here we are  continuing our series on advanced custom   fields with the divi theme builder today  we're going to be going over the image field   so if you're just getting started using advanced  custom fields with divi check out my other videos   then my text video to help you get started if  you do find this video helpful and appreciate   the work that i did hit that like button subscribe  and let's get started okay so here we are on our   demo website that has nothing but advanced custom  fields and divi installed we're at a post here   and what we want is we want the author to be able  to put an image in here let's say for the product   uh we have our advanced custom fields and we have  a field group that we created called product and   we want to go ahead and add a field and of course  we want the image field let's just go ahead and   select that all right so we're going to give it  a name we're going to call this product image and   then when you're in the field you can just press  tab to auto populate the field name and we're   going to go ahead and give some instructions for  our author we are not going to make this required   once again if you're using advanced custom fields  and you make these fields required and the author   does not fill them out or does not input anything  into those fields you won't be able to publish the   post so we were not going to make this required  you see here we have three different types of   formats in which we could return so advanced  custom fields can either return an array of data   which will include things like your alt tags and  your title tags it could return just the image url   or it could return the image id every image that  you upload to wordpress is given an image id same   thing with every post that you create every page  that you create is given a post id by wordpress   and that's what this will be pulling in and we'll  be showing you that in just a second here you   could also pull in the image url which is where  the image lives on your website and that will pull   in this data and like i said this will pull in an  array of data for now let's just go ahead and keep   it on image id the preview size we're going to  make this thumbnail 150 by 150. now this preview   size is just for the back end such as where we  are now when the author is creating this page or   product this is what they're going to see they're  going to see a 1 by a 150 by 150 thumbnail of   the image that they want to put on the page this  does not mean that the image is going to show up   on the page as 150 by 150 okay that we have to  do on the front end when we're designing the   page where this post is going to go okay so the  library option here is they could you could either   allow them to upload an image and have access to  the media library that's already on the website   or you can make it so that they have to upload a  post so we're going to keep this at all here is   where you could select any kind of restrictions  to the image size and the file size and you can   even allow restrictions for file types so if you  want to leave out a particular file type then   what you need to do is list all the file types  that you want to be allowed and then leave out   any ones that you don't we are not going to have  any conditional logic or any wrapper attributes   and we are going to go ahead and close this  field here if you remember in our previous videos   all these settings we have are just standard  settings and none of these settings have changed   when we created a our field group called product  okay so we have our field group and we have our   field image and we're gonna go ahead and update  this and the most important thing is that this   this field this field group will show up on  the post type that is equal to post if you   don't already know you could have these field  types show up almost anywhere on your website   and templates and typical parts we are having  to show up on every single post that is created   and then if you come over here to our  post you'll see i have an example post   and we're going to go ahead and edit this one  and when we come down here you'll see we have our   field group that we called product and here's  our product image field here's the instructions   that we gave it upload a project image and  let's go ahead and add an image now you'll   see i have an image here that's already uploaded  or i could upload a file just like any other kind   of wordpress post and you'll see over here  it's filled out already with the alt text   the title text and a caption and down here you'll  see the file the file url okay so let's go ahead   and close select this one so here's where you  could see that every post is given an id if you   look down on the bottom left corner of the screen  you will see that this little address toolbar says   post equals 46 and that means that this post given  an id of 46. so let's go ahead and update our post   and now we need to get this image into our post  template so here we are at our divi theme builder   and you'll see that we have a custom  template that is equal to all posts   which means that this custom body here that i'm  editing will show up on all posts that are created   all right so let's open it up so here you'll  see we have our post title and our post content   and we come down here and there's this little  box that we created to input our data we're   just going to go ahead and add underneath here  and when divi gets funny like this and it wants   to make it hard to add a box after this one thing  you could do is just come over here and go to the   wireframe and get in there and create something  new after it like this one here and that's what   i'm going to do i'm going to add something after  this h4 and after h4 we're going to do an image   so now since this is a template builder we're  not going to just add an image because if you   add an image here it's going to show up on every  single post so what we need to do is come into   our dynamic contact selector and open this guy  up and you'll see that we have some divi items   that we could choose from we have some other  items that it has picked up being that i use   advanced custom fields and created other demos  and then down here you'll see that it has our   field group product and our one and only field in  there image if you had other fields in this field   group they will show up here for simplicity i've  erased them all and we just have this one so let's   go ahead and select product image and press ok  let's go ahead and go back to our full view here   and you'll see that it's down here now of course  this is just a template so it has no image to show   it's just going to show an image icon but it's  pulling in the data is what it's going to want to   do let's go ahead and save this come back to our  post here and refresh it and you'll see that it's   pulled in our bike one thing i do want to mention  if you created a new field group and or new fields   and you come to your theme builder and those  fields are not available for you to choose from   such as right here let's say your field group is  not showing up just back out of your theme builder   refresh it and re-enter that section and  your new field groups will show up okay   okay so our images here so a couple things  we'll notice is that it's way too big for   our use and it is also not pulling in any info  such as a title tag when i hover over this image   it should have a title tag if you are using this  just to pull in a logo or something decorative on   your website you don't need to always have alt  tags and title tags but if you're going to use   images that show something like this or are going  to show something to your reader you definitely   want to have all your title tags and your alt  tags in there let's just go ahead and click in   and inspect this element and you'll see that it  has the place for the alt tag and the title tag   but there is nothing in there we definitely want  something in there for our various screen readers   and seo purposes okay and the reason why it is  not showing all that data is because in our field   group we had it selecting only the image id if we  come back in here you'll see these options these   are important because even though advanced custom  fields is collecting all the data within that   image it's only going to spit out what we need it  to spit out okay and currently it's only spinning   out the image id and that's just not enough  and if it were to only spit out the image url   that would not quite be enough either so let's  go ahead and go back over here and select the   image array and update it and come back up to our  post and refresh it let's go ahead and inspect   the element and you'll see it's still not adding  those items there okay and so what we need to do   is in this image image field that we this image  that we created in divi we could come in here   and we could go to our advanced settings and  you'll see we have our attributes right here   and this is where you would usually maybe  put your image title and your alt text here   and instead of typing it in once again you could  come in here and salute choose your field group   down here okay so that's what we're gonna do  and same thing for our title we're gonna save   it all and we're gonna update our template let's  come back to our post and refresh it and it's   still there and it's still not pulling in all the  data that we need let's just go inspect it again   and you'll see the alt tag is now populated with  our image again same thing with our title tag it's   just pulling in the image location and again  that's not what we want the answer is to come   over here and in our field group create those  text fields so let's go ahead and add a field   and we're going to call this product image  title and then we're going to press tab to   auto populate our field this field type will be a  text we are going to give them some instructions   we're not going to make this required though we're  not going to change any of these other rules and   we are not going to add any conditional logic at  this point and let's go ahead and add one more and   we're going to call this product image alt again  we're going to press tab to auto populate our   field name it's going to be a text field and we're  going to get some instructions and once again   same thing not going to make it required and  these values down here we are just going to leave   and if we close our fields here you'll see in  our field group we have a product image a product   image title and a product image alt and we're  going to go ahead and update these let's come   back to our post editor here and refresh it and  now our new text fields are added here as well   so we're going to go ahead and give this product  an image now this image title you could have used   as the title up here as well so you can make it  so it's the same thing for now we're just gonna   pretend that we are titling this image here okay  and we're gonna call it really cool bike and down   here we're just gonna put something fancy  like some alt text okay so we're going to   update this and so now we come back to our divi  template builder and come back into our image   and now we could go in and give it a link  so that when someone clicks on that image   you don't always want this but sometimes you want  to link to a larger image or sometimes you want it   to link to the actual product and this is what i  was talking about before you see so we created our   fields and my new fields are not showing up in  here so let's just go ahead and get out of this   and save all our changes if we made them and close  our section here and just make sure we come over   here and save it and that refreshes our whole  builder and let's come over here and reopen it go   back down to our image and let's work on our image  so now if we come back to our link field over here   and we have our options of our new items that  we created now this is the product image and we   could just have it linked to that and that will be  just fine where we want to use our new fields is   in advance and attributes and we could come over  here and you'll see it's already has them in here   and we can go ahead and get rid of  these guys and we're going to go to our   field group select our image alt text  and then we can select our image title save all those guys now if we come back and  refresh you'll see now that when i click it   it goes to the page and where it lives and if i  stay here you'll see that it gives me my title tag   really cool bike there you go let's go ahead and  inspect the element and you'll see now our alt   tag has our alt and our title tag has our title  so now we need to get this down to the size that   we want so let's go back to our theme builder  over here let's come over here to our image   and open it up let's go down to the design and  do our sizing and then you could come and make   it something like let's say 150 by 150. save it  come back and refresh and it's 150 and then you   could have your description on to the right of it  you could obviously style this in different ways   in which you want with your theme builder this  is just going to show you how to start pulling   that data into your theme builder to start using  it and last but not least you might want to have   a caption appear under your image so you could  just come over here so you just come to your field   group and add a new field instead of creating a  new field we just come over here and duplicate it   because we just want another text field and we're  going to call this product image caption come in   here and press tab i'm going to add a caption to  it and keep all the settings the same so let's go   ahead and update this come back to our post here  and refresh it and we're going to add a caption   and we're going to update it and let's go ahead  and put that under our image with a text block   so you can erase all this content that's  auto populated there and select your box here   and our caption once again is not going to show  up close this guy and refresh our template builder   now go into your text box and add that  content with our product image caption field   go ahead and save this and you'll see here is our  caption that we could style and place anywhere   around this image that we choose to this is a  great opportunity to use conditional logic this   is a lot of information here to see on a post and  if the author never has not even uploaded an image   maybe these items don't need to show up as well  let's go ahead and hide these until the author   post an image so here we are back in our field  group for the product and we have our image and   we're going to leave this one just fine so let's  go ahead and close the image and let's come into   our product image title and edit it and scroll  down and now let's add some conditional logic   and we just basically want to show this field  if product image has any value okay you can   set it to if it has no value but obviously that  doesn't make sense and any value means that it has   something inside it okay and let's go ahead and  do that to the other ones as well and update it   let's come back to our our post here and  refresh it so that those settings take   effect and obviously we have a bike here so these  things show up let's go ahead and delete this bike   and you'll see automatically all those fields get  taken away and let's just go ahead and update this   post real quick okay our post has been updated  and here's what it would look like if we came and   we're creating a new post come down here and add  an image and when we go to add an image you'll see   our other fields are available and these are only  pre-populated because it's picking up the data   from the back end of in our database otherwise  these would be blank so that's a great opportunity   of where you might want to use conditional logic  it's not very hard to use and that's how you   get started using the image field from advanced  custom fields within divi so that would do it for   this video if you found at all found it helpful  please hit that like button for me join me in   my next video as we explore more advanced custom  fields and divi and i'll see in the next one aloha

Channel: Kris Jolls

Views: 64

Keywords: web design, graphic design, wp, wordpress, divi, divi theme, acf, advanced custom fields, plugin, image field, web design 2020, custom image field, advanced custom fields image field, advanced custom fields divi builder, divi image field, wordpress images, wordpress image field

Id: aHXAM19hqP0

Length: 15min 22sec (922 seconds)

Published: Thu Nov 18 2021