Displaying and hiding images in a blog = using js

Topic: Hide image on blog page / 664.

Displaying and hiding visual elements of a site (div, img, p, etc.) is also possible using js.
The user has the option of selecting (view - not displaying) a visual object.

Step 1.
Edit the script Blog: inc/tags/blog.php.
We will stop (stop the script) after line no. 83 (?>).
We insert the following js script.

<script type="text/javascript"> document.getElementById("objectBlock").style.display = "block"; document.getElementById("objectInlineBlock").style.display = "inline-block"; document.getElementById("objectVisible").style.visibility = "visible"; </script>

Put continue php script.

Step 2.
We include the following code in the inc/tags/css/blog.css file.

`/Insert into blog.css/
img.no-display {
display: none;

img.no-visible {
visibility: hidden;
div.no-display {
display: none;

div.no-visible {
visibility: hidden;
p.no-display {
display: none;

p.no-visible {
visibility: hidden;

Step 3.
Edit blog posts as follows.
It is important to specify β€œid =” ----------- β€œβ€.
If β€œid” is not embedded, the script does not affect the display of the object.

<! - Examples Blog content -> <Img class="no-display" id="objectBlock" src="/content/media/myimage.jpg" alt="image_block"> <Img class="no-display" id="objectInlineBlock" src="/content/media/hipster.jpg" alt="image inline_block"> <Img class="no-visible" id="objectVisible" src="/content/media/gallery/book.jpg" alt="image_visible">

This is just a basic idea of ​​using js in blog.php.
You can edit it according to your needs.


1 Like

This topic was automatically closed after 60 minutes. New replies are no longer allowed.