Armadillo Blog: How do you place photos, not postage stamps?


(e.g.,) #1

Having a dilemma once again, with Armadillo.
Advice appreciated.

Have photo that should figure prominently in a blog post.
Its 150 ppi for Retina Displays. Works fine some places, not others.

Am I correct in this?: In blog page - I appear to have only 2 options:

  • Make it fit in a non-scrolling Armadillo blog page & thus an ignominous postage stamp on a desktop.

  • Make it work on a desktop & only show a non-scrollable corner on moblie device.

Does not make for a pretty page.


(Rob D) #2

@Runamok – I think you are a bit confused about how to determine your photos’ dimensions in general, not just in Armadillo.

Retina resolution is 144ppi, but that’s just a related remark. Some people approach the resolution as totally unimportant in web design. It only counts in print. Dimensions are most important for web designers. Here’s an article that might help you (and anybody interested) to grasp the whole idea. I know I have been confused myself…


(e.g.,) #3

Thanks for the link, Rob. Haven’t visited it - yet.
I quite understand that resolution is handled differently in web vs print.

Using Stacks, based upon what I’ve read:
I believe I can double the resolution for Retina displays.

Am I wrong in this?

Yes, 144 & 150 are pretty close to one another & yes 144 is LITERALLY double 72ppi. What I am seeing is not a 6px difference. Are you suggesting that if I use 144, it will work?

150px fits some other applications occasionally used which have set output sizes.

I have successfully used images in earlier incarnation of the page, with a few caveats adjusting to a horrible previous theme (imo, as a result of sidebars which are ridiculous on a phone-sized mobile device, but I digress).

It seems to be I cannot apply images well using Armadillo, or even a Carousel 2 photo gallery. There is no device “responsiveness” as far as my experiments go. I have a miniscule image on a desktop, in order to fit the mobile parameters.

Possibly this is my operator error, but I’m not finding success getting a viewable mobile image to be worth a glance on a desktop. Perhaps something is not even close to clearly described?:

I have the SAME images in 2+ different photo galleries - with different outcomes.


(Lisa Sandler) #4

As @Rovertek said, the ppi/dpi do not matter. What matters are the dimensions… what is the width and height in pixels?

Also… do you have a link? It’s hard to know exactly what your problem is without it.

I use Armadillo and have no issues with photos and sizes on different screens. https://www.lisasandlerphotography.com/blog/


(Rob D) #5

No, I am not. Those 6 pixels would save you some kilobytes, though. Either you prepare your images for Retina or for older screens, you should use 72ppi. For Retina double dimensions, not ppi.

I would really recommend reading the article. It solves the mystery.

By the way, dpi and ppi are almost always treated as the same thing, but they are not. In print, we use dpi (dots per inch – they determine the “density” of a printing screen, where a half-tone image is printed with “dots”) and on computer screen, we use ppi (pixels per inch).


(e.g.,) #6

Thanks again, Rob.

Really not a mystery. The question abt 144<–>150 was rhetorical to achieve common perspective.
A few kb are fine by me in the case of the diff between 144 & 150.

I don’t care to add an additional step in my process for 6Dpi.
(I wasn’t dedicating my life to designing web pages, so the nuance is moot as content is more important to me than form).

Dpi & ppi is known to me. I prefer referring to print terminology which is my usual medium & therefore convenient when referring to photos & images that may eventually be printed.

I got crisper images at 150 - adjusting the dimensions. Its a versatile size for me without keeping volumes of different-sized images for every purpose under heaven.

In fact, resorting to PS, I made an earlier incarnation work in a overly simple version. Now, trying to use the bells & whistles, it appears those bells & whistles are unavailable in the software chosen. Unless this is all operator error.


(Lisa Sandler) #7

@Runamok

Again, you do not mention your pixels dimensions at all. That is critical in understanding your image size and how it renders in websites. I sent you an email with this explanation below and screenshots. Your image, is as you described, a postage stamp size because that is the size in pixel dimensions that it actually is.

The link that @Rovertek included above is a good explanation, but for a more simple explanation:
Your files are 265 x 157 pixels. That IS a postage stamp on a website page.

Dpi/ppi have no place in this equation, unless you are also considering/changing the pixel dimensions. Two Photoshop files here:

Same pixel dimensions, different dpi/ppi. File will still be the same exact size no matter what, unless you change the pixel dimensions themselves.
Hope this helps.


(e.g.,) #8

Yes. Thank you. I understand that.
I am using PS in precisely that manner.

If 2 photogalleries (2 plug-ins) display the SAME image - 2 different ways, then something is amiss.


(Lisa Sandler) #9

Well, sure each stack or plugin will display differently a bit. They all have different settings. Unless we’re totally not getting what you’re trying to say, sorry.


(e.g.,) #10

There are several things going on simultaneously.

  1. Armadillo Blog. Trying to preface blog entries with in-line photos.

  2. Photo Galleries. Using 2 different Gallery Methodologies.
    The methods for galleries are Carousel 2 & the old Photo Album feature inside of RW.
    It is not clear if I was supposed to buy another PhotoGallery plug-in to work correctly with NickCates’ Reason Pro.

I understand there are different feature sets within each Gallery module/plug-in. I am trying everything I can to get the result to come out as intended. I wanted more than the std RW gallery.

My core gallery was RW flip gallery. With 3 sub-galleries. 1 using Flow, 1 (or 2) using Carousel.
They do not fit the page properly when I go from one device to another. I am trying to find out why.

Pixel dimensions are in the 600-750 range.


(Lisa Sandler) #11

Those are not pixel dimensions, unless you mean 600x750.

It’s up to you what stacks and plugins you use for your galleries. I use https://stacks4stacks.com/progallery/ from stacks4stacks and also http://rwextras.com/xslider/, both from @willwood.


(e.g.,) #13

Currently, the pixel sizes are not optimal, but tend to be 650-700 pixels in landscape orientation.
Because those worked both on desktop & on mobile in a previous theme with a sidebar.

There are 3 issues being addressed here. In-line in the blog entries, on 2 different photo galleries & whatever issues the theme introduces or limits.


(e.g.,) #14

I’ve spent too much (several hundreds) & still not getting what I want as outcome.
This would be another gripe about whether plug-ins are adequately described for a good comparative.

Yes, this is not optimal. These are images not nec. final - just dropped in because they are test candidates.


(Lisa Sandler) #15

View a few of those files in photoshop at 100% view. Are they not all different in size? Why would you expect them to be the same when used online?
I set up a few of your file sizes, shown at 100%:


(e.g.,) #17

Steve B:

Thanks. My post 2 above has a screenshot of image sizes.
It was posted quite a few minutes before your last post saying I was not supplying information.

Lisa,

Is there a size all the rest key from?
1st image determines all subsequent form factors displayed?

There is a max dimension available in some gallery apps.

I have to conclude the plug-ins are not capable.


(Lisa Sandler) #19

Honestly, I just set the files up in a width and height that looks good on my website. I start with SOOC (straight out of camera) sizes and make other ratios that work from there. You can see that a 500x300 file is not going to fill the screen, if that is your wish.

I don’t specifically know this plug-in or the theme you are using. I don’t seem to have a limit of size on the images I use in https://stacks4stacks.com/progallery/ or http://rwextras.com/xslider/. I don’t recall ever seeing a limit on pixel size, though considering my original photography SOOC files start out at 5760 x 3840, that is way too large, so I reduce them.

Read the link that @Rovertek posted. You can see that desktop screens are pretty large. If your files are only 700 pixels wide or smaller, they are not going to be large enough for that purpose.

I also use certain stacks with my galleries to make them uniform in size: like https://stacks4stacks.com/adaptivegrid/


(Lisa Sandler) #20

He’s having a hard time having them look all the same on his website. I’m trying to make the case for pixel dimensions.


(e.g.,) #22

I give up. I have been painstaking how I said things.
I must be speaking a different language entirely.


(Rob D) #23

No, I think there is some deeply rooted notion that you have and that prevents you from taking a fresh look at the problem. Please, read the article from my link above.

No matter how much experience we think we have, we can always learn new things. Don’t get me wrong, I am not trying to insult you…


(David) #24

As i recall the Carousel plugin is not responsive. Could that be a cause of your problem?