图片HTML消失在Wordpress的博客文章(和amp版本)中

时间:2018-12-12 03:43:40

标签: html wordpress image amp-html amp-img

不久前,在这个社区的帮助下,我能够使用div类和public int Divisors(int fact) { int number = int.Parse(textBox2.Text); int factorCount = 0; int sqrt = (int)Math.Ceiling(Math.Sqrt(number)); for (int i = 1; i < sqrt; i++) { if (number % i == 0) { factorCount += 2; // We found a pair of factors. } } // Check if our number is an exact square. if (sqrt * sqrt == number) { factorCount++; } return factorCount; } private void ShowallButton_Click(object sender, EventArgs e) { int input = int.Parse(textBox2.Text); double output = Divisors(input); MessageBox.Show(+output + ""); } 标签在博客文章中设置要在台式机和移动设备上显示/隐藏的图片,以显示桌面/移动设备。已为台式机和移动设备设置了特定的amp-img,因为div类不适用于amp页面。

我不会一直使用这些图像,但是当我需要在台式机和移动设备的其他位置显示图像时,或者当我要显示同一图像的两个版本时,该功能很有用相同的位置(例如,在段落之间),但我希望它们根据某人使用的设备具有一定的长宽比。

我曾经使用CSS媒体查询,但是它变得非常混乱并且增加了太多工作。并且向我建议不要对放大器图像使用CSS媒体查询。

以下是如何将我的图像立即输入到我的博客文章中的示例:

我用它在桌面上的一个位置显示图像(此博客文章中的第二个图像:https://www.smartfertilitychoices.com/inositol-pcos/):

<picture>

这是为了在手机上显示相同图片,而该图片恰好位于博客文章中的其他位置:

<div class="hidden-sm hidden-xs">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(min-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="alignright" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img class="alignright" media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325>
</amp-img>

当我希望将两个不同的图像放在台式机和移动设备上的同一位置时(在上面链接的博客文章中的第三个图像),我会用到它:

<div class="hidden-md hidden-lg">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(max-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="aligncenter" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img media="(max-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325 layout="responsive">
</amp-img>

自从Wordpress上周更新以来,我现在无法在不删除html部分(<picture> <source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-8.jpg" media="(min-width: 980px)"> <img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" class="aligncenter" alt="Inositol and PCOS"> </picture> <amp-img media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-8.jpg" width=750 height=293 layout="responsive"> </amp-img> <amp-img media="(max-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" width=390 height=325 layout="responsive"> </amp-img> 标签和<picture>标签)的情况下“更新”我的博客文章。嵌入了诸如注册表单和视频(javascript + html)之类的东西,我已经通过使用短代码解决了这些问题,我已经测试过,如果我将图像html输入到短代码创建者中,然后使用短代码,则短代码几乎可以完美地工作但是此额外步骤只是创建不必要的工作,我希望有一种更简单的方法(如果存在)。

以下是一些部分消失的示例,当它消失时会发生什么:

<amp-img>

变成

<div class="hidden-sm hidden-xs">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(min-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="alignright" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img class="alignright" media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325>
</amp-img>

<div class="hidden-sm hidden-xs">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="alignright" alt="Inositol and PCOS" width="390" height="325">
</div>

变成

<div class="hidden-md hidden-lg">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(max-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="aligncenter" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img media="(max-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325 layout="responsive">
</amp-img>
  • 以及以上两个示例都意味着该图片将在博客文章的amp版本中显示两次,但对于常规的非amp版本仍然可以正常工作。

最后,这是

<div class="hidden-md hidden-lg">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="aligncenter" alt="Inositol and PCOS" width="390" height="325">
</div>

变成:

<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-8.jpg" media="(min-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" class="aligncenter" alt="Inositol and PCOS">
</picture>
<amp-img media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-8.jpg" width=750 height=293 layout="responsive">
</amp-img>
<amp-img media="(max-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" width=390 height=325 layout="responsive">
</amp-img>
  • 这意味着图像的仅一个变体显示/inositol-and-pcos-7.jpg(移动版本)。我知道解决此问题的方法尤其是在该位置仅具有图像的桌面版本,但是我希望不必在移动设备上进行此操作。在其他博客文章中,我在桌面上还设置了其他宽幅图像,其中包含文本,一旦将其压缩到移动大小,就很难阅读。

如果有人对将图像嵌入到博客文章中的其他方式有任何见识,并且能够显示/隐藏台式机与移动+的内容,特别是amp图片。谢谢!

0 个答案:

没有答案