in this video I'm gonna be showing you
how to sort out your image sizes I got
sent an email the other day from someone
tutorial that I put up recently where we
create and Amazon a fit site using
wasone and the storefront theme and
they'd gone through a tutorial set the
site up all was going well but they
noticed that the images looked a little
bit weird they're all different sizes
that kind of thing now this problem has
come up previously with flats erm and
Kingdom as well I think some of the
other themes that I've been using so I'm
going to show you how to fix that and
how to get your images all the same size
is it looking nice let's go
[Music]
hello it's Alex here from WP eagle hope
you're all well and now before you
started if you're not already subscribed
please click the subscribe button below
and if you like what I'm doing the like
button really does help me so please
give it a click if you would be so kind
now that's how all the way let's get on
with the video so as I said in
introduction I'm going to be resizing
some images that are pulled in from
Amazon using wasone this should work on
pretty much any WooCommerce theme
however for this example i'm gonna be
using storefront so let's get a computer
and take a look ok so maybe at the site
shoes crave calm this site was sent to
me via email by one of my viewers who's
having a problem with the image size so
I thought I want a good opportunity to
create a quick video so I can help not
just one person but hopefully many
people out in one hit so if we scroll
down here's our products and we see
they're all different sizes and this is
because the images on Amazon are all
different sizes so it pulls them down
and if you know they're different
they're different and this is what they
look like so all we need to do is just
one little setting to get this looking a
bit better and which basically just
adjust the sizes so what we need to do
first is actually work out the size of
the smallest image and then we'll adjust
the bigger ones to kind of line up with
that so it looks like it's probably this
one here this ugh
Kip shearling boot I'll just go right
click and then inspect and just get a
little hover a nut driver it I can see
that the image here can't point but as
you can see up there it's 2/3 one point
free by 186 0.88 it's that bit there
I'll put an arrow up so you can see what
I'm talking about so that's kind of the
minimum size so if we go for that kind
of range we should be fine so I'm gonna
remember we'll try remember I remember
2:30 by 186 let's just you know round it
down a little bit 2:30 by 186 so let's
go into our dashboard and obviously
those sizes may vary depending on the
products and things you're putting down
but maybe as a guide though those
dimensions are probably gonna work for
most sites I love thought so I'm going
to WooCommerce and settings
then I'm gonna go into products then
display then scroll down and it's this
one here the catalog images that's one
that we want to adjust so two thirty by
one eight six so changes now we don't
need to regenerate any thumbnails or
anything like that because the images
are pulled down dynamically from Amazon
so you should just do it let's have a
look
there we go look they're all the same
size now and they're not looking too bad
one other thing you might want to do and
this is entirely optional is get these
buttons all in in a kind of a row so
they're not going up and down because
these are kind of they were just in
themselves based on the amount of text
and whether it's a little sale thing and
I don't know I don't think it sits very
nicely on the eye rather they were all
in like in a row so to do that we're
gonna need a little bit of custom CSS so
I'm just going to go in to inspect now
this is going to vary depending on the
theme this is storefront theme as I've
already said so this better I'm doing
now will only apply to storefront theme
although the image thing that I just did
in mukombo settings that should apply to
20 would converse theme but this bit is
just for storefront people so what I'm
gonna do is I'm gonna find this bit yeah
that looks good put this bit of CSS over
here ul dot products dot sorry ul dot
product space Li dot product space blah
blah blah
I will put this bit of code on to WP
eagle so you can just copy and paste it
onto your site what I'm gonna do is I'm
gonna add a don't want make capitals on
and add a minimum height so CSS hatchery
is min - height and then I'm gonna ever
guess I say Turner pigs you know maybe
more than that 300 pix oh yeah they're
moving still not quite lined up and
already say I'm 320 yeah maybe even free
ten that will go for free 320
there we go they're all in a row
just going to copy this bit of code then
you go to customize scroll down
additional CSS and then I'm just going
to paste it into here save and publish
and then let's have a look and there we
go I think that looks a bit better that
brings us to the end of this video
hopefully all your images are now the
same size and looking good if they're
not or if you've got another problem or
question or comment or something like
that do leave it below I do love to hear
from you guys and I do try and reply to
as many as I possibly can if you're not
already part of the WP eagle family then
please do click on the little Eagle up
there become a subscriber and click the
little bell to be notified when I upload
a new video which is generally every
single week and talking to videos here's
one it's been chosen especially for you
I hope you enjoy it until next time bye
for now
#Best Education Page #Online Earning
online earning,make money online, earn money online, online earning, online earning sites,
make money online free, online money income, earn money online free, money online, best way to earn money online, online income site, money earning websites, best online earning sites, easiest way to earn money online, earn money payment bkash, online money income site
Posts
No comments:
Post a Comment