thumbnails page using li instead of td

the_vladiator
Posts: 7
Joined: 04 Oct 2018, 02:38

thumbnails page using li instead of td

Post by the_vladiator » 04 Oct 2018, 02:56

I have worked to remove the <table> tag from a theme I was using with ETG, and the only related tags left are the <tr> and <td> tags in [#thumbspage.thumbstable#]. I cannot find a way to generate the thumbnail page with <li> tags instead of <tr> and <td> for each thumbnail.

I don't really need number of rows and columns since my cleaned up theme is fully responsive.

Is there a way to change the generation of thumbstable to use <li> instead of <tr> and <td>?

Maxim
Site Admin
Posts: 979
Joined: 02 Mar 2009, 17:02

Re: thumbnails page using li instead of td

Post by Maxim » 04 Oct 2018, 12:49

Right now you cannot do that. But if you give me a piece of code that use <li> tags for the gallery images along with thumbnail titles - I can try to add it to the program.

the_vladiator
Posts: 7
Joined: 04 Oct 2018, 02:38

Re: thumbnails page using li instead of td

Post by the_vladiator » 04 Oct 2018, 18:29

Thank you for answering! I'm glad to hear that you can help.
Take a look at one of my ETG galleries done without tables: https://www.touristbee.com/photos/Austr ... burg-2015/

As you know, you can do CTRL+U in your browser and see the page source. Take a look at this snippet:
<div class="main_table">
<tr class="tr_thumbnail_images" id="thumbsrow1">
<td id="td_thumbnail_1" class="td_thumbnail_image">
<a href="imgpages/salzburg-austria-10.html"><img src="thumbs/tn_salzburg-10.jpg"></a></td>
<td id="td_thumbnail_2" class="td_thumbnail_image">
<a href="imgpages/salzburg-austria-11.html"><img src="thumbs/tn_salzburg-austria-11.jpg"></a></td>
<td id="td_thumbnail_3" class="td_thumbnail_image">
<a href="imgpages/salzburg-austria-12.html"><img src="thumbs/tn_salzburg-12.jpg"></a></td>
<td id="td_thumbnail_4" class="td_thumbnail_image">
<a href="imgpages/salzburg-austria-13.html"><img src="thumbs/tn_salzburg-13.jpg"></a></td>
<td id="td_thumbnail_5" class="td_thumbnail_image">
<a href="imgpages/salzburg-austria-14.html"><img src="thumbs/tn_salzburg-14.jpg"></a></td>
</tr>

Page still works responsively but I really want to use <li> instead of the <tr><td> combination, as <li> would be the correct tag.

This is produced by [#thumbspage.thumbstable#]. Here is what I need:

Ideally there should be a new ETG tag called [#thumbspage.thumblist#] that will output like this:

<li id="td_thumbnail_1" class="td_thumbnail_image">
<a href="imgpages/salzburg-austria-10.html"><img src="thumbs/tn_salzburg-10.jpg"></a></li>
<li id="td_thumbnail_2" class="td_thumbnail_image">
<a href="imgpages/salzburg-austria-11.html"><img src="thumbs/tn_salzburg-austria-11.jpg"></a></li>
....

your id and class could be something different like id="li_thumbnail_1" and class="li_thumbnail_image", so that styles can be applied if needed.

For me, I don't use thumbnail title, but you can also insert the thumbnail title in the <a> tag.

This would be perfect!

Maxim
Site Admin
Posts: 979
Joined: 02 Mar 2009, 17:02

Re: thumbnails page using li instead of td

Post by Maxim » 04 Oct 2018, 19:14

The only actual reason <li> tags were not implemented yet is the control over the thumbnail title... So this issue must be resolved in order to add <li> to the program... Right now you have a lot of control over the thumbnail title and many customers make use of it in their galleries. Can <li> tags provide the same customization options? For example, can title be displayed above the thumbnail image?

the_vladiator
Posts: 7
Joined: 04 Oct 2018, 02:38

Re: thumbnails page using li instead of td

Post by the_vladiator » 04 Oct 2018, 22:25

Yes, you can control everything with CSS and the order of your DOM elements. For example:

Title above the thumbnail image
<li id="td_thumbnail_1" class="td_thumbnail_image">
<span class="thumbnail_title">This is my thumbnail title</span>
<a href="imgpages/salzburg-austria-10.html"><img src="thumbs/tn_salzburg-10.jpg"></a>
</li>

Title below the thumbnail image:
<li id="td_thumbnail_2" class="td_thumbnail_image">
<a href="imgpages/salzburg-austria-11.html"><img src="thumbs/tn_salzburg-austria-11.jpg"></a>
<span class="thumbnail_title">This is my thumbnail title</span>
</li>

Then in the CSS file you can have the following:
.thumbnail_title {
display:block;
}

This essentially makes the thumbnail title a block element instead of inline, so the image will respect the DOM element order.

Obviously the <li> tag needs to be coupled with the following CSS for displaying the list horizontally and thus being "responsively" rendered by browsers:
li {
display:inline;
min-width: <thumbnail width>;
max-width: <thumbnail width>;
}

This way the <li> container is fixed and the thumbnail title element will follow the DOM order, and wrap accordingly.

The main reason why I am asking for a separate tag is to make sure all the existing themes continue to work without any problem. So adding a new ETG tag called [#thumbspage.thumblist#] would be the way to go because you don't have to modify any existing themes.

Really appreciate your help.

Maxim
Site Admin
Posts: 979
Joined: 02 Mar 2009, 17:02

Re: thumbnails page using li instead of td

Post by Maxim » 05 Oct 2018, 15:34

OK, thanks for the info. I'll try to find out if it fits existing program interface.

the_vladiator
Posts: 7
Joined: 04 Oct 2018, 02:38

Re: thumbnails page using li instead of td

Post by the_vladiator » 19 Oct 2018, 19:19

Any updates Maxim? I'm looking to redo many of my galleries as Google is penalizing me for not being mobile friendly...and I want to redo them with using <li> instead of tables. Thanx much for your help.

Maxim
Site Admin
Posts: 979
Joined: 02 Mar 2009, 17:02

Re: thumbnails page using li instead of td

Post by Maxim » 19 Oct 2018, 19:41

Yes, I'm working on it.Here is the screenshot of work in progress:

Image

the_vladiator
Posts: 7
Joined: 04 Oct 2018, 02:38

Re: thumbnails page using li instead of td

Post by the_vladiator » 22 Oct 2018, 17:05

Thank you for the update! Looks great.

Maxim
Site Admin
Posts: 979
Joined: 02 Mar 2009, 17:02

Re: thumbnails page using li instead of td

Post by Maxim » 26 Oct 2018, 16:26

OK, new version of the program with a new special tag [#thumbspage.thumbslist#] is available. You're welcome to download and try it:

https://www.exisoftware.com/download.html

You can see the sample usage of the new tag in the new template called Thumbnails list (White). Please let me know if this is what you wanted and if there are any problems using the new tag and new version in general.

Post Reply