Bad_Egg

Hi Skandha,

Not really. ??

What I am trying to figure out is which software — WP, Clean Box, or Adaptive Images — is actually handling image delivery in responsive design.

For example, in order to accommodate Retina screens, one needs 2X the normal pixels. So for my header I uploaded a 2500 x 462 pixel image. On my laptop and desktop this is scaled to 1160 x 214. Interestingly, this should not be scaled but rather a smaller image should be delivered. Yet neither WP, Clean Box, or the Adaptive images plugin are doing so (though Adaptive Images say their plugin only works for mobile devices). This image (and others) scaling is slowing down the loading of my site.

So my questions are these: Since Clean Box is responsive design, when I upload an image to my WP library, does Clean Box create multiple, resized images for delivery to different devices?

If not, how does Clean Box work with WP 4.4 and the way it creates multiple image sizes? Is what WP does true responsive images; that is, does it deliver different image sizes to different devices?

(I noticed, though, that WP does not really scale images; it just seems to make cropped versions. Not sure what good that does.)

Is there any need for the Adaptive Images plugin in this new(ish) environment whereby WP has supposedly made responsive imaging a part of the core WP environment?

Thanks.

As an aside, when I check my site in GT Metrix, it tells me some of my images are being resized in CSS, and it is recommended I deliver a smaller image. I thought this is what Adaptive Images is supposed to do?

I’m confused. According to WP,

WordPress automatically creates several sizes of each image uploaded to the media library. By including the available sizes of an image into a srcset attribute, browsers can now choose to download the most appropriate size and ignore the others—potentially saving bandwidth and speeding up page load times in the process.

Today I tested by uploading a 2300×500-pixel image to the media library but I did not place it on any page or post. In the Adaptive Images folder in wp-content/cache/adaptive-images, the image does not appear anywhere.

In the wp-content/uploads folder, it appears in its original form and in 8 other sizes. This is also true of my older images.

So it does appear that WP now create multiple images. How does that work, or not work, between Adaptive Images and WP?

Thanks, Radu. Image optimization is my next task. First is to determine if I need to keep my Adaptive Images plugin or not.

I read through the comments on the blog post you linked to; it seems to indicate this update is applied retroactively to older images, is independent of the theme used (it’s now a core process of WP, though I would suspect it still relies on the theme itself being responsive), but that disabling previously used responsive image plugins can create havoc. But there is nothing in the post that provides answers to these questions.

Thanks! This worked.
BTW, I thought I was in the dedicated Clean Box support. Will bookmark that for future.
Thanks again.

Hi Pioneer:

Well, that almost worked. I created a class called “pullquote” and added the styling. I added the coding you suggested, but unfortunately what happened is that I got straight quotes instead of curly quotes.

So I made two classes:

p.pullquote:before {
	content: "\201C";
	font-size: 2em;
	line-height: 1em; 
	font-family: serif;	
	}
p.pullquote:after{
	content: "\201D";
	font-size: 2em;
	line-height: 1em; 
	font-family: serif;	
	}

But unfortunately the after quotation mark forces the last line of the pull quote to sit lower to accommodate the larger font of the quotation mark, even with the forced line-height of 1em. This is visually displeasing. And if I reduce the line-height to .5em, or even .25em to force the line up, this just pushes the over-sized quotation mark into the text above.

I did some more digging about the Net, and found that some designers are actually using images to create the quotation marks for pull quotes. Some WP users are creating a closing quote that sits on the next line, flush with the opening quotation mark. It looks okay but not what I wanted to achieve. So it looks like what I wanted to do isn’t possible.

Oh, well, them’s the breaks. ??

I’m almost there, but…

I added this:

blockquote:after {
	content: "\201D";
	display: block;
	font-size: 60px;
	height: 0;
	right: -40px;
	position: relative;
	top: -20px;
}

but no amount of jiggling the values will make the quote sit automatically in relation to the text. Am I missing something or is a closing quote in a responsive design WP site not actually possible?

@michael: when I try to put the code in my child CSS (so it won’t be overridden if and when the theme is updated), it doesn’t work anymore.

I put it in the typography section of my child CSS. So I am flummoxed as to why it works in the parent CSS but not the child.

EDIT: Never mind. I must have done something wrong because now it works.

• This reply was modified 8 years, 6 months ago by Bad_Egg.

@shannon: I thought the point of using a child theme is precisely so the child CSS loads first? How else would one’s modifications work?

The rest of the CSS is loading fine, as the rest of the site functions as designed. I haven’t made any changes to blockquotes in the child CSS.

I think it may have something to do with the way the blockquote is styled in this theme; that is, only the blockquote quotation mark has been styled, not the text that makes up the blockquote.

I’m not a coder, so the whole enqueue script thing is over my head.

However, when I look again at the code,

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	quotes: "" "";
} 

I understand it to mean that q, which is defined as the quotation marks, is supposed to appear both before and after the content, BUT then

blockquote:before {
	content: "\201C";
	display: block;
	font-size: 30px;
	height: 0;
	left: -20px;
	position: relative;
	top: -10px;
}

only styles the opening (“before’) quotation mark, which might explain why only that mark appears and changes when I change the values in that section of code (for example, if I change the font size to 90px, the change in size of the quotation mark is obvious). Yes? No?

Perhaps the coders simply forgot to make a style for the closing quotation mark?

@michael: I added your blockquote style to the parent CSS, in the Typography section as opposed to the Elements section where the rest of the blockquote code is, to test. This worked. Thank you.

Now I just have to figure out how to get the after blockquote to be the same size as the opening one, to get it to display, and position it correctly. Can I not make another section of code similar to the blockquote:before but for a blockquote:after? I will try that while I await a reply.

Thank you thus far.

@pitt1823
Credit?? They’ve never even said thank you, or apologized for calling me stupid. Oh well, the plugin got most of the job done and for that I am grateful.

Read the first line:
“…because it appears to be only one of two that I found I could customize without having to know code.”

And I moved on to another theme. (This post was started two months ago — you’re a bit late to the party.)

And I DO pay — for things that work.

As someone who works in the arts, I am sooooo tired of the attitude that everything on the internet should be free. Your plugin does me a service. So I have a budget of what I can spend on my WP site and I have divided it up between the widgets and the theme I use. It’s only right that I pay something.

Donation made. It wasn’t much (I live in Vancouver so I’m house poor) but I wanted to show my appreciation.

Thanks again. Donation made today. It wasn’t much — I’m poor — but I wanted to share my appreciation.

No worries. My fault for not reading more closely.