How Can I Append Inline Style to Post Images in WordPress

Simple problem, not sure where to start.

Posts on our website get pulled into an RSS feed and get automatically emailed by an email service. This works perfectly great, except for one thing — normal web size images make our emailed posts look bad on mobile — the images render too big and make the email too wide, such that the text reduces to a smaller size.

I need to add an inline style to uploaded post images:

style="max-width: 100px; max-height: auto;" 

This forces any image to be restricted to the width of the div into which we put the content.

I don’t care if the style tag gets added to the images in the post on the website or in the RSS feed, but it needs to be there or it ruins the emailed post on mobile. When I add the style inline myself, it causes the email look great in a mobile display.

Any thoughts on how I can inject this inline style?

Is nonce useless when user input is reflected within an inline script?

I stumbled upon a web app which is accepting user input and putting it into a variable within script tag.

The script tag does have a nonce attribute.

enter image description here

As am working on bypassing the XSS filter, I had this thought that this practice of reflecting user input within an inline script with nonce attribute beats the purpose of using it.

Is my understand correct or am I missing something here ?

CSP: any way to prevent inline scripts dynamically created by a trusted external script?

Let’s say I have a simple web application which uses a single JavaScript (JS) file, loaded from its own domain, and has implemented the restrictive Content Security Policy (CSP) of default-src 'self'. There’s a stored XSS in it whereby the JS file will make an Ajax call to an API which would return some content stored in a database, and that content (which came from untrusted user input) has inline JavaScript in it. The JS file creates an element in the page’s document and sets its HTML content to the retrieved content. Let’s assume that this is the necessary way of doing what it needs to do, and let’s assume that sanitising/encoding the input is unfeasible. I know that user input should always be sanitised, just for the purposes of this question, skip this suggestion as a solution.

Is there any way to set a CSP such that this inline JavaScript, dynamically put onto the page by trusted JavaScript, is blocked?

Here’s a minimal working example (you may need to serve it from a simple HTTP server, e.g. php -S localhost:58000, rather than loading as an .html file)

csp-test.html:

<!DOCTYPE html> <html>   <head>     <meta charset="UTF-8" />     <meta http-equiv="Content-Security-Policy" content="default-src 'self'">     <script charset="utf-8">       console.log('script') // blocked, OK     </script>     <script src="csp-test.js" charset="utf-8"></script>   </head>   <body>     <img src="x" onerror="console.log('img')"/> <!-- blocked, OK -->   </body> </html> 

csp-test.js:

console.log('trusted ext script') // executed, OK i = document.createElement('img') i.src = 'y' i.addEventListener('error',   function(){ console.log('img by trusted ext script'); }) // executed, HOW TO BLOCK THIS? document.body.append(i) 

result:

enter image description here

Imagify / Image Optimization for theme inline div background?

I’m using the imgaify plugin to serve webp images. Using their plugin a normal tag ends up looking like this:

<picture class="attachment-large size-large wp-post-image"> <source type="image/webp" srcset="https://.../image.jpg.webp 870w, https://.../image-300x128.jpg.webp 300w" sizes="(max-width: 870px) 100vw, 870px"> <img width="870" height="372" src="https://.../img.jpg" alt="Questions? We Can Help" srcset="https://.../image.jpg 870w, https://.../image-300x128.jpg 300w" sizes="(max-width: 870px) 100vw, 870px"> </picture> 

This works fine and well for normal img tag replacement. Here is where i am running into issue:

On some of the pages, my custom theme grabs the featured image and sets this image to the background of a DIV inline with CSS. No optimization is applied here heavily weighing down the page size.

I’m unsure what the best approach would be to fix this:

  1. Create a custom function that returns the optimized jpg/png version of the featured image and return that?

  2. Create a custom function that will spit out the webp version of the file (does one exist?) then use something like monderizr to detect webp support and display the correct styles?

I’m not currently using modernizr so adding another script may outweigh any speed gains. Is there a simpler solution?

Here is how my theme generates the code for the featured image:

<?php if ( has_post_thumbnail() ) : ?> <div class="innerpage-banner" style="background:url(<?php $  src = wp_get_attachment_image_src( get_post_thumbnail_id( $  post->ID ), 'full', false ); echo esc_url( $  src[0] ); ?>) no-repeat; background-size:cover; background-position: center center;"> <?php else: ?>     ... <?php endif; ?> 

Validity of in-line help content over time as users graduate from novice to Intermediate stages

This is a question in regards to an Enterprise product.

Consider a selection menu –

Option 1

help text (2 liner max)


Option 2

help text (2 liner max)


Option 3

help text (2 liner max)


Notes –

1) This help text was added below the Options as there was feedback from new users that the Option Label itself was not sufficient to communicate the intent of the option.

2) Advanced users have come back saying that they do not need to see the help text every time as they are well aware of the options. This is very much understandable.

Questions –

Our product has both ends of the user expertise spectrum fairly distributed. Also, let’s note that users graduate overtime. A tooltip cannot be used as we have seen very less usage of the same and creates extra friction for new users, compared to immediate help. Considering that standard interaction design principles recommend designing for the ‘Intermediate User’ (Alan Cooper, Dan Normal) – is tooltip the only way out? Or are there other thoughts?

Please advice. Thanks!

¿Que tipo de cajas son los flex-items? ¿Se pueden considerar un tipo de caja como block inline e inline-block?

Los elementos inline no pueden tener un width y height definido pero en un flex-container si defino un height,padding y margin a un elemento inline estos son si aplicados.

Se puede condiderar a un flex-item como un tipo de caja en el que el padding,margin,width,height y border de los elementos son respetados?

Cuando digo que si se pueden considerar un tipo de caja me refiero a que si flex-item podría considerarse como si fuese un valor de display solo que definido por el container y no de forma autónoma

.flex-container{   height: 200px;   background: pink;   display: flex; } .flex-item{   background-color: blue;   padding: 50px;   color: white; }  .flex-item:nth-child(2){   background-color: orange;   width: 500px;   padding: 100px; }
<div class="flex-container">   <span class="flex-item">1</span>   <span class="flex-item">2</span> </div>

Ad in E-mails and Inline Contextual Ads questions

Hello!
I want to clarify some info before the purchase.
1) Do you have a schedule of e-mails topics and free dates for the ad at the bottom? What are the characteristics of your e-mail base? Age, GEO, sex etc. What are the e-mail open rate and the size of the base?
2) Do you have any cases with a results of such ad?
3) Where I can find additional info about Contextual Ads questions and cases in this field as well?

Should password fields be blanked when inline validation fails?

This question with a similar name refers to registration, but in my case, I would like to address submission.

My use cases are:

  • A login form consisting of an email address.
  • A change password form where the user enters his new password twice to change his password.

Assumptions:

  • The user has javascript enabled, so we can use AJAX and perform inline form validation. There is then no security risk of sending the password back to the users to re-render the form.

The password field can fail for several reasons:

  1. In the login form, the password is blank or the password/email combination is incorrect.

  2. In the change password form, the password does not meet password requirements (minimum length, etc).

  3. In the change password form, the repeated password does not match the password.

  4. In the change password form, a blank password field exists.

Currently, I have the following behavior:

  • In the change password field, once the password is successfully changed, the passwords fields are blanked out as there is no point keeping them around, and we prepare “clean” fields in case the user wants to change the password again.

Should I also blank the fields for the other failure modes? For example, when using change password fields and setting a password like “123456” and the form returns “You need to have at least a letter in your password”, I could just go the beginning of both builds and add “a”, resulting in “a123456”. This probably defeats the purpose of secure passwords, but it is a lot faster than typing “a123456”.

Are there any established guidelines for this?

Sharepoint: inline image in email

I am unable to add inline images in an email. The mail just show a square having a red cross inside it.

Is there a way to add inline images to email which needs to be sent from SharePoint.

Updated:

public static void SendMail(tenantContext,)   {             Microsoft.SharePoint.Client.Utilities.Utility.SendEmail(tenantContext, new Microsoft.SharePoint.Client.Utilities.EmailProperties()             {                 From = from,                 To = email.to,                 Subject = "subject",                 Body = "hi <img src='image1.png'>",             });             tenantContext.ExecuteQuery();                  } 

Changing a slideshow to display all images in-line on smaller screens/mobile

Hello, I have a photography portfolio that I set up years ago to show each gallery as a near full screen slideshow. At one point, I figured out how to adjust it for mobile and smaller window sizes, to disable the slideshow and instead show the images all at once in a vertical line.

I ended up disabling that option for a while because I was having some issues with the menu overlapping on specific tablets, but now I want to implement it again and can't figure out where I backed up that code…

Changing a slideshow to display all images in-line on smaller screens/mobile